dcarrith / jquery.mobile.lazyloader

jquery.mobile.lazyloader is a proper jQuery Mobile Widget for lazy loading listviews with AJAX calls to a server-side resource.
MIT License
77 stars 18 forks source link

Problems setting up a working example, ajax call not firing #13

Open synfield opened 12 years ago

synfield commented 12 years ago

I have similar problems to 'starnutoditopo ' and 'jakobs1' in trying to get the ajax request to work.

I can get the lazyloadercreate call to trigger a console.log call but the ajax request is not even registering in the firebug console.

I'm sourcing the the json file example that you've provided, locally, therefore I don;t require jsonp and have changed the json file to return the raw json without callback.

I've even tried using jsonp and calling json from your 'http://www.musotic.com' server, without success.

You can have a look at the example I've used here http://w3.manukau.ac.nz/wwwmobile/jqm-lazyloader/test_lazyloader_eg_v4.html#queue .

Cheers.

dcarrith commented 12 years ago

@synfield - I think one problem is that the initially displayed listview is empty.

    <ul id="queueTracksList" data-role="listview">
    </ul>  

Try to put some li items in there and see if it works.

Since you're getting the lazyloadercreate event, that means it is being initialized properly. And, since the lazyloadererror event is triggered, it does seem to be retrieving some items and tries to load them onto the main listview. However, I think the code tries to append the retrieved items onto the last li element. Since there are no li elements, it is throwing the error.

Take a look at the main jquery.lazyloader.js file and you'll see the issue. Lines 58-67:

    // Create the default selectors that can be overridden during reinitialization
    _defaultSelectors : {

        // This is the selector of the main element (e.g. the <ul> in the case of a listview)
        "main"      : 'ul',
        // This is the selector for a single element of things that are being lazyloaded (e.g. the <li> in the case of a listview)
        "single"    : 'ul li',
        // This is the selector for the bottom element that may need to be removed and added back post lazyloading in certain cases
        "bottom"    : '[data-role="list-divider"]'
    },

Then lines 656-662:

    // Even if Dust templates aren't pre-compiled in an external script, they are still pre-compiled during initialization
       dust.loadSource( template );

       dust.render( templateId, json, function( err, result ) {
              // Append the item HTML onto the main HTML string
              html = result;
       } );

Then, finally, the parts that tries to insert or append the retrieved markup. Lines 682-690:

       // First check for the bottom element to see if we need to insert the html before it
       if ( $bottomElement ) {

             $( singleItemElementSelector ).last().before( html );

       } else { // we can just append it

             $( mainElementSelector ).append( html );
       }

I'm willing to accept this as a valid bug though. It should be able to handle loading items into an empty listview. Sorry if it caused you to waste a lot of time troubleshooting. Thanks for taking the time to post an issue here.

synfield commented 12 years ago

@dcarrith Thanks for your quick reply. Looking forward to your patch.

Cheers.