Don't understand why this javascript will not work in jQm

Question

It seems to me that this should work (based on answers to other questions here on SM), but I am not getting any results ...

Here is my code at the top of the page:

Second edit:

<script type="text/javascript"> function capitalizeFirstLetter(string){ return string.charAt(0).toUpperCase() + string.slice(1); } $(document).delegate('#sun, #mon, #tue, #wed, #thu, #fri, #sat', 'pageshow' , function() { var days = ['sun','mon','tue','wed','thu','fri','sat'], output = [],//create an output buffering variable d = new Date(); for(var x=0; x<days.length; x++){ //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array output.push('<li><a href="#' + days[x] + '">' + capitalizeFirstLetter(days[x]) + '</a></li>'); } //now we add the buffered data to the listview and either refresh or initialize the widget var $cNav = $('#custom-navbar') $cNav.append(output.join('')); //if the listview has the `ui-listview` class then it been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized if ($cNav.hasClass('ui-navbar')) { $cNav.navbar('refresh'); } else { $cNav.navbar(); } }); </script> 

And here is my code in the body:

 <div data-role="content"> <div data-role="navbar" style="margin: -10px 0 15px 0;"> <ul id="custom-navbar"></ul> </div> 

Answer 1

 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).delegate('#sun', 'pageshow' , function() { alert("!"); var days = ['sun','mon','tue','wed','thu','fri','fri','sat'], output = [];//create an output buffering variable for(var x=0; x<days.length; x++){ alert(days[x]); //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array output.push('<li><a data-ajax="false" href="#' + days[x] + '">' + days[x] + '</a></li>'); } //now we add the buffered data to the listview and either refresh or initialize the widget var $cNav = $('#custom-navbar') $cNav.append(output.join('')); //if the listview has the `ui-listview` class then it been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized if ($cNav.hasClass('ui-listview')) { $cNav.listview('refresh'); } else { $cNav.listview(); } }); </script> <script src="../js/jquery.mobile-1.0.1.js"></script> 

Since this code fires every pageshow event, you will receive several lists when users move to and then back to the page. Instead, you can use the pageinit event: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Update

The error on your page comes from here:

  $('ul#custom-navbar').append('<li/>', { .append('<a/>', { 'href' = "#" + days[x], 'data-ajax' = "false", 'text' = days[x] }); }); 

Do you see it? You have extra , { and you lack syntax to make sense. You also use equal signs, where you must use colons (as you set object properties):

  $('ul#custom-navbar').append( $('<li/>').append('<a/>', { 'href' : "#" + days[x], 'data-ajax' : "false", 'text' : days[x] }) ); 

This creates a list item and then adds a link to it with the attributes set.

Please note that you can copy my code, paste it on top of your code (in your document), and it will work fine. I tested it using the console.

In general, you should learn how to use the console, this will help you get an amazing amount. For example, I found an error on your page after about 30 seconds ...

Answer 2

Well, from the jQuery Mobile website, they explicitly recommend not getting attached to $ (document) .ready () due to some kind of ajax magic being used backstage and instead recommend doing something similar to what you are doing, but with pageinit instead of pages. From what I see in the documentation, they should be (for this) functionally equivalent. Did you try to bind pages or page after loading jqm?

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Important: use pageInit (), not $ (document) .ready ()

The first thing you learned in jQuery is to call the code inside $ (document) .ready (), so everything will be executed as soon as the DOM loads. However, in jQuery Mobile Ajax is used to load the contents of each page into the DOM when navigating and the DOM readiness handler is executed only for the first page. To execute the code whenever a new page is loaded and created, you can bind to the pageinit event. This event is described in detail at the bottom of this page.

Answer 3

I assume the "pageshow" event has a jQuery mobile framework. If you're right, you must add the jQuery mobile script tag before the script.

Answer 4

Ok first use

$('ul#custom-navbar').listview();

not $('ul#custom-navbar').listview('refresh'); this will not work if the item is not initialized

But if you added html attr data-role = "listview" to ul, then on the show page jQM will automatically start listview, if so, and then you added elements to it, then you need to run $('ul#custom-navbar').listview('refresh'); I recommend that you do this instead.

In addition, you need to put $('ul#custom-navbar').listview(); in your live function, as mentioned above, jQM does not load when you call it, and you should use the pageinit event, when you go to the page (via the back button, etc.), you do not want to run it twice. Read on these two, optimally you will use both to cleanly handle JS.

PS: I'm glad that you are listening to pageinit / pageshow events correctly and are not using document.ready, I also suggest starting listening in the mobileinit handler, for example. $(document).bind("mobileinit", function(){//your pageinit/pageshow listeners here , as well as the .live function .live deprecated, use $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){