CODEWITHSUNDEEP
jquery-mobile
jasonaburton
jasonaburton

Reputation: 3103

jQuery Mobile breaks my site

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

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?

Upvotes: 8

Views: 5683

Answers (3)

StefaDesign
StefaDesign

Reputation: 959

Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.

It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.

You can make and download yours here : http://jquerymobile.com/download-builder/

I hope it worked for you too guys!

Upvotes: 0

sasha
sasha

Reputation: 821

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

Upvotes: 2

dvk3
dvk3

Reputation: 161

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.

Upvotes: 12

Related Questions