get JS to load on JQM page

Question

I am trying to get a plugin to run on JQM, but I need it to wait and load when page two is active. Right now, its loading when it starts up. I have my pages set up with data-role='page'. Here is my code:

$(document).ready(function(){
    $("#two").bind('pageinit')
    jQuery(".namesleft").fitText();
    jQuery(".scoreleft").fitText();
    jQuery(".namesright").fitText();
    jQuery(".scoreright").fitText();
});

thanks in advance for the help

score 1 · Answer 1 · answered Apr 03 '13 at 05:31

1

jQuery mobile has an alternative to $(document).ready. The code should look something like this:

    <script type="text/javascript">
       $('div:jqmData(role="page")').live('pagebeforeshow',function(){
             // code to execute on each page change
       });
</script>

In fact, jQm has an entire set of event alternatives to regular jQuery events: http://jquerymobile.com/demos/1.2.1/docs/api/events.html

answered Apr 03 '13 at 05:31

Elad Lachmi

10,406
13
71
133

so your saying my code should look like this? – user2185197 Apr 03 '13 at 05:54
Yes, and if you want this to only run on specific pages, you can change the selector. – Elad Lachmi Apr 03 '13 at 06:23

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/F2Gcm/

$(document).on('pageshow', '#index', function(){       
    $("h1").fitText(0.273);
    $(".download").fitText(1);
});

On method should be used instead of live method to bind a page event, live method is deprecated and don't exist in jQuery 1.9+.

Also this should be bound to pageshow event because it wont work in any other case. jQuery Mobile is strict with plugins doing visual changes, that kind of plugins will work only in pageshow event.

If you want a better understanding of jQuery Mobile page events take a look at this ARTICLE, or find it HERE.

KSL · Answer 3 · 2013-04-03T06:01:08.430

0

you can add your code in JQM's pageshow event like:

$("#two").live('pageshow', function(){
    $(".namesleft, .scoreleft, .namesright, .scoreright").fitText();
});

edited Apr 03 '13 at 06:01

answered Apr 03 '13 at 05:43

KSL

49
1
15

that makes the plugin not work at all not sure why but it does – user2185197 Apr 03 '13 at 06:08

get JS to load on JQM page

3 Answers3