Page works with jquery Mobile, but not with only jquery

Page works with jquery Mobile, but not with only jquery
0

#1

My wikipedia viewer project works, but only when using the jquery Mobile library. I am not trying to do anything that would seemingly require the jquery Mobile library. I happened to add the library simply since I ignorantly thought I might need it to help with the site working on mobile devices. In my mind, the site should work with simple jquery being the only JS library required.

The main structure of the page is that you can search in the input box ( search event/call to wikipedia api is triggered based on a jquery keyup event of the Enter or Return key in the search box) and then a list will populate below with search results.

Here is a link to my codepen: https://codepen.io/gm-gis/pen/mpZdea

My basic question is - why does this page not work if I do not include the jquery Mobile library?


#2

Because you have the following line that uses the Mobile library.

$.mobile.loading().hide();

If you comment this line out and remove the Mobile library it will run, but the layout of your page changes.

Also, you need to add the following to keep the form from submitting and reloading the page when the Enter key is pressed.

$("form").submit(function(e){
  e.preventDefault();
});

#3

Thanks for your suggestion. I’d tried removing the
$.mobile.loading().hide(); line and the mobile library earlier several times but the site doesn’t work without it.

Please visit the codepen again and try it out. I believe you will see the site doesn’t work even after I edited the pen to include your suggestions.


#4

I looked at the Codepen, but do not see where you added the part to prevent the submitting of the form.

EDIT: I checked again and you added the code I suggested and it works.


#5

Thanks that did it! Appreciate your help.


#6

I’m curious, why does the whole page want to reload when the form is submitted? (searching around stack overflow I see this is a common issue)


#7

The form normally has an action attribute whose value points to a script (local or on another site) to handle the results of the form data (i.e. text box values). When the action attribute is not present it is like putting action="" which tells the browser to load the same page.


#8

Great. Thanks for helping me understand what’s really going on under the hood there.