CODEWITHSUNDEEP
javascriptjquery-mobile
Justin White
Justin White

Reputation: 714

Dont understand why this javascript won't work in jQm

Seems to me like this should work (based on answers to other questions here on SM), but I'm not getting any results...

Here's my code in the head 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's 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's 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>

Upvotes: 4

Views: 871

Answers (4)

Jasper
Jasper

Reputation: 75993

<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's 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 runs each pageshow event, you will be getting multiple listings when users navigate to, away, and then back to the page. You could use the pageinit event instead: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Update

The error in 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've got an extra , { and are missing a bit of syntax to make this make sense. You're also using equal signs where you should be using colons (since you're setting properties of an object):

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

This creates a list-item, then appends a link to it with some attributes set.

Note that you can copy my code, paste it over your code (in your document) and it will work fine. I've tested it using my console.

In a general sense, you should learn to use your console, it will help you an amazing amount. For instance I found the error on your page in about 30 seconds...

Upvotes: 1

Clarence Liu
Clarence Liu

Reputation: 4019

Well firstly use

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

not $('ul#custom-navbar').listview('refresh'); this won't work if the element isn't initialized


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


Also you need to put the $('ul#custom-navbar').listview(); within your live function like someone else mentioned, jQM isn't loaded when you call it, and you should be using the pageinit event, pageshow also fires when you navigate back to the page (thru the back button etc), you don't want to init it twice. Read up on those two, optimally you'd be using both to cleanly handle JS.

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

Upvotes: 0

OldTroll
OldTroll

Reputation: 771

Well, from the jQuery Mobile website they directly recommend not binding to $(document).ready() due to their use of some ajax magic behind the scenes and instead recommend performing something similar to what you're doing but with pageinit instead of pageshow. From what I can see in the documentation they should be (for this) functionally equivalent. Have you tried binding pageshow or pageinit 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 learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, 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.

Upvotes: 1

Srikanth Kshatriy
Srikanth Kshatriy

Reputation: 444

I guess 'pageshow' event is of jquery mobile framework. If am right, then you should add jquery mobile script tag before your script.

Upvotes: 0

Related Questions