jQuery Mobile breaks my site

Question

I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.

Any ideas on what I could be missing?

Thanks

EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.

What it breaks: - I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white

• Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).

• it prints out 'loading' twice and 'undefined' once at the bottom of the page

All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)

Anyone else experiencing these problems?

Answer 1

jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:

(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

If you want to disable single link to be loaded by the ajax you should write something like this:

<a href="/some_page" data-ajax="false" >link</a>

or do it globally:

$(document).bind("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
});

jm also does replacement on other elements so you should try using data-role attribute, for example:

<select id="test" data-role="none">

to disable replacing this element.

Answer 2

For those like me where

$.mobile.ajaxEnabled = false;

did not work and the whole page layout seems still broken:

For me this one works (- set it inline before loading the jquery mobile file):

<script>
    // Preload configuration
    $( document ).on( "mobileinit", function() {
        $.mobile.autoInitializePage = false; // This one does the job
    });
</script>

Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:

$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled

For further information see: http://api.jquerymobile.com/global-config/

I'm using v1.4.5