Examples php

[Jakobs1]

Hi Your scripts look great. But im a newbie on jquery mobile and json.

Could you please post some simple example files, complete with client php ajax and server response?

Thanks alot

Tom

[starnutoditopo]

Yes: a very simple page with a single lazy list would be very useful. Thanks! :-)

[dcarrith]

@Jakobs1 @starnutoditopo - I put together two PHP code samples ( https://github.com/dcarrith/jquery.mobile.lazyloader/tree/master/samples ) and a jsfiddle ( http://jsfiddle.net/t5zrd/ ) that you can use to experiment. I'll admit that it isn't as simple as it could be, but it was something I was able to put together faster than starting samples from scratch.

However, because AJAX requests can't be made across different domains (and I'm trying to use jsfiddle for the client-side of the samples) I had to add unofficial support for JSONP just to allow the jsfiddle examples to make the requests for more artists and queued tracks to my server at musotic.com (take a look at the pageinit event handlers for the #artists and #queue pages - you'll see the moreUrl is set to my domain - where I have placed the two provided sample files artists.sample.page.php and queue.sample.page.php).

So, one thing to keep in mind is that the '"JSONP" : true' parameter wouldn't be necessary if everything is on the same server. And, the callback part of the response would also be unecessary (and wrong actually) if you're using the standard $.ajax and POST. So, for example, instead of this line:

echo $callback."( '".$artists[ $retrieved ]."' );";

You would just do this:

echo $artists[ $retrieved ]; // i.e. just the JSLINT compatible JSON string

Now that I've added the JSONP support, I'll probably end up working it into the final 1.0 build pretty soon.

I'll be happy to answer any questions you might have. But, really though, it will require some trial an error on your part to get a good feel for how things are working. And, this really is a stripped down example because I haven't demonstrated the SESSION handling part that is required on the server side. Basically, the server side would need to track how many artists or tracks have been retrieved so far so that when you go from artists to albums, and then back to artists, it will know how many artists were displaying before you went to view an artists' set of albums. Then, when you go back to the index page, the lazyloader would need to call the clearUrl. But, in these examples, I do not have a working clearUrl in place. I'll try to add on to the example when I have some time. But, it probably won't be for another couple weeks.

[dcarrith]

I thought I should clarify that only the list of Artists and tracks on the Queue page will lazyload in the jsfiddle I linked to above. About 80 artists will load in increments of 20 and about 70 queued tracks will load in increments of 10. All other links are likely to be broken with the exception of the Back button when on the Artists or Queue page.

[starnutoditopo]

Hi, Dave! Thanks for your example. Unfortunately, it's still too complex for me. I would like to use the lazy loader in an ASP.NET sample application. I'm trying to mirror the "queue" page in your example, but i don't manage to make it to work. My page's overall layout looks like this:

html
   body
      div data-role="page" (this is just a container, with no id)
      div data-role="content"  (this is just another container, with no id)
         scripts (for lazyloader and its dependencies)
         div id="queue" data-role="page"
             ul id="queueTracksList" data-role="listview"
                li data-role="list-divider" role="heading"
                li
         div id="queueLazyloaderProgressDiv"
      script id="queueDustTemplate" (the item template)
      script (lazyloader initialization)

the last script is the following:

 var playlist_index_offset = 0;

    $(document).ready(function () {

        // Initialize the lazyloader widget
        $("#queue").lazyloader();

        /* Set some default options for the lazyloader */
        $.mobile.lazyloader.prototype.timeoutOptions.mousewheel = 300;
        $.mobile.lazyloader.prototype.timeoutOptions.scrollstart = 700;
        $.mobile.lazyloader.prototype.timeoutOptions.scrollstop = 100;
        $.mobile.lazyloader.prototype.timeoutOptions.showprogress = 100;

        // Set up the variable options to pass to the lazyloader reinitialize function
        var options = {
            "threshold": 640,
            "retrieve": 10,
            "retrieved": 1,
            "bubbles": true,
            "offset": playlist_index_offset
        };

        // Set up the page specific settings to pass to the lazyloader reinitialize function
        var settings = {
            "pageId": "queue",
            "templateType": "dust",
            "templateId": "queueDustTemplate",
            "templatePrecompiled": false,
            "mainId": "queueTracksList",
            "progressDivId": "queueLazyloaderProgressDiv",
            "moreUrl": "Data/More",
            "clearUrl": "Data/Clear",
            "JSONP": true
        };

        // Set up the post parameters to pass to the lazyloader reinitialize function
        var parameters = { "retrieve": options.retrieve,
            "retrieved": options.retrieved,
            "offset": options.offset
        };

        // Reinitialize the lazyloader so that it correctly handles the listview on the artists page
        $("#queue").lazyloader("reInitialize", options, settings, parameters);
    });

When I run the page, no call is performed on the server, and nothing appears on the client. If I remove the containers that are directly inside the body and that wrap all other things, that is: if I remove the following:

      div data-role="page" (this is just a container, with no id)
      div data-role="content"  (this is just another container, with no id)

then, I can see the list, but still no call seems to arrive to the server, while the progressive div appears and disappears according to mouse wheel movements.

Any suggestion would be appreciated. If you think that it could be useful, I can post the complete code of my sample, as soon as it works.

Thanks!

Bye, Xc

[dcarrith]

Well, first of all, I don't think it is syntactically correct to have a data-role=page inside another data-role=page. In a multi-page template, you can have multiple data-role=page but they can only be siblings, not children of each other. Take a look at the bottom of the page http://dcarrith.github.com/jquery.mobile.lazyloader/ you will see some events you can listen for. The create and error events might be useful to see if an error is occurring. Also, try using Firebug for Firefox to see if the request is going out to the moreUrl and see if it's getting a response. It's likely that it is not going out or if it is, it's not responding. Or, if you are responding with JSON, then you will need to define your dust template to use for the transformation to HTML. WIthout that, it will exhibit the behavior you describe.

[dcarrith]

Also, you probably don't need to use JSONP. If you take that parameter out of the settings, then it will use a standard AJAX request (which has been tested quite a bit more - although, JSONP seems to work just fine).

[starnutoditopo]

Hi!

My notes near your reply:

Well, first of all, I don't think it is syntactically correct to have a data-role=page inside another data-role=page. In a multi-page template, you can have multiple data-role=page but they can only be siblings, not children of each other.

I agree. I will have only one data-role=page div, with id="index".

Take a look at the bottom of the page http://dcarrith.github.com/jquery.mobile.lazyloader/ you will see some events you can listen for. The create and error events might be useful to see if an error is occurring.

I subscribed to all those events firing an alert when each occurs: now I see that the lazyloadercreate event occurs while executing:

// Initialize the lazyloader widget
$("#index").lazyloader();

but no other event fires and no error seems to occur (even in firebug).

Also, try using Firebug for Firefox to see if the request is going out to the moreUrl and see if it's getting a response. It's likely that it is not going out or if it is, it's not responding. Or, if you are responding with JSON, then you will need to define your dust template to use for the transformation to HTML. WIthout that, it will exhibit the behavior you describe.

Also, you probably don't need to use JSONP. If you take that parameter out of the settings, then it will use a standard AJAX request (which has been tested quite a bit more - although, JSONP seems to work just fine).

It looks like the problem is on the client side, as no request seems to be performed (in firebug requests are listed for the page and related resources like js or css, but nothing else).

Also, calling this:

        $("#index").lazyloader("loadMore", 0);

at the very end of all scripts (inside the $('body').on('pageinit', '#index' ...) function nothing happens. My feeling is that I'm facing some silly mistake in the structure of the HTML, or simply I'm invoking lazyloader with the wrong parameters.

[dcarrith]

There must be something wrong with the path set for the moreUrl. Currently it looks like you have it set to "Data/More". I don't think that path would resolve correctly. Can you send me the details of the GET or POST? I'm curious to see the Post (or Request) and the Response as captured by Firebug. In the Firebug console, you should see something like this:

POST or GET http://www.yourdomain.com/Data/More 200 OK <- if it worked - you might see 404 or something if it can't be found

That console entry should be expandable where you should have several tabs for things like Headers, Request, Response, HTML, JSON, etc.

For example, in my browser, I see this on the POST tab:

Parameters application/x-www-form-urlencoded offset 0 retrieve 10 retrieved 10

Source retrieve=10&retrieved=10&offset=0

The Response tab contains the JSON that my server responded with.

[starnutoditopo]

Hi!

My zipped sample code seems too big for the mail server. I'll try the jsfiddle way (see my previous mail below).

Bye, Xc

On Wed, Jul 11, 2012 at 8:57 AM, Starnuto di topo starnutoditopo@gmail.comwrote:

Hi!

There must be something wrong with the path set for the moreUrl. Currently it looks like you have it set to "Data/More". I don't think that path would resolve correctly. Can you send me the details of the GET or POST? I'm curious to see the Request and the Response as captured by Firebug. In the Firebug console, you should see something like this: GET http://www.yourdomain.com/Data/More 200 OK <- if it worked - you might see 404 or something if it can't be found That console entry should be expandable where you should have several tabs for things like Headers, Request, Response, HTML, JSON, etc.

In attachment, you find my sample code. The server side is WRONG: don't expect to get a correct reply from it: I just used it to catch a break point in the calls. But I'm pretty sure that the problem is in the client. I must have configured something in the wrong way. I'll try to explain my problem in a jsfiddle as soon as possible, starting from your examples.

Thanks!

Bye, Xc

[starnutoditopo]

Hi!

I forked your sample and I tried to remove as many things as possible in order to make it similar to my case (that is: a single lazy loaded page: queue). Meanwhile, I found a strange behaviour playing wiht the "retrieve" and "retrieved" settings. So, what I report below is not really related to my original problem, but maybe could help. Look at this (this is your sample, with a lot of stuff commented out), that is working fine: http://jsfiddle.net/starnutoditopo/ccASF/6/ In the next version, I commented out some "preloaded" items from the list, without touching the js: it's kind of working, in the sense that you have to scroll to make the list loaded: http://jsfiddle.net/starnutoditopo/ccASF/7/ Finally, in the next version, I set the "retrieved" setting to 1, and it looks like not working any more: http://jsfiddle.net/starnutoditopo/ccASF/8/

Bye, Xc

On Wed, Jul 11, 2012 at 9:00 AM, Starnuto di topo starnutoditopo@gmail.comwrote:

Hi!

My zipped sample code seems too big for the mail server. I'll try the jsfiddle way (see my previous mail below).

Bye, Xc

On Wed, Jul 11, 2012 at 8:57 AM, Starnuto di topo < starnutoditopo@gmail.com> wrote:

Hi!

There must be something wrong with the path set for the moreUrl. Currently it looks like you have it set to "Data/More". I don't think that path would resolve correctly. Can you send me the details of the GET or POST? I'm curious to see the Request and the Response as captured by Firebug. In the Firebug console, you should see something like this: GET http://www.yourdomain.com/Data/More 200 OK <- if it worked - you might see 404 or something if it can't be found That console entry should be expandable where you should have several tabs for things like Headers, Request, Response, HTML, JSON, etc.

In attachment, you find my sample code. The server side is WRONG: don't expect to get a correct reply from it: I just used it to catch a break point in the calls. But I'm pretty sure that the problem is in the client. I must have configured something in the wrong way. I'll try to explain my problem in a jsfiddle as soon as possible, starting from your examples.

Thanks!

Bye, Xc

[starnutoditopo]

Hi!

Also, this seems not to work (2 "preloaded" items, both "retrieve" ande "retrieved" settings set to 2): http://jsfiddle.net/starnutoditopo/ccASF/8/

Bye, Xc

On Wed, Jul 11, 2012 at 9:47 AM, Starnuto di topo starnutoditopo@gmail.comwrote:

Hi!

I forked your sample and I tried to remove as many things as possible in order to make it similar to my case (that is: a single lazy loaded page: queue). Meanwhile, I found a strange behaviour playing wiht the "retrieve" and "retrieved" settings. So, what I report below is not really related to my original problem, but maybe could help. Look at this (this is your sample, with a lot of stuff commented out), that is working fine: http://jsfiddle.net/starnutoditopo/ccASF/6/ In the next version, I commented out some "preloaded" items from the list, without touching the js: it's kind of working, in the sense that you have to scroll to make the list loaded: http://jsfiddle.net/starnutoditopo/ccASF/7/ Finally, in the next version, I set the "retrieved" setting to 1, and it looks like not working any more: http://jsfiddle.net/starnutoditopo/ccASF/8/

Bye, Xc

On Wed, Jul 11, 2012 at 9:00 AM, Starnuto di topo < starnutoditopo@gmail.com> wrote:

Hi!

My zipped sample code seems too big for the mail server. I'll try the jsfiddle way (see my previous mail below).

Bye, Xc

On Wed, Jul 11, 2012 at 8:57 AM, Starnuto di topo < starnutoditopo@gmail.com> wrote:

Hi!

There must be something wrong with the path set for the moreUrl. Currently it looks like you have it set to "Data/More". I don't think that path would resolve correctly. Can you send me the details of the GET or POST? I'm curious to see the Request and the Response as captured by Firebug. In the Firebug console, you should see something like this: GET http://www.yourdomain.com/Data/More 200 OK <- if it worked - you might see 404 or something if it can't be found That console entry should be expandable where you should have several tabs for things like Headers, Request, Response, HTML, JSON, etc.

In attachment, you find my sample code. The server side is WRONG: don't expect to get a correct reply from it: I just used it to catch a break point in the calls. But I'm pretty sure that the problem is in the client. I must have configured something in the wrong way. I'll try to explain my problem in a jsfiddle as soon as possible, starting from your examples.

Thanks!

Bye, Xc

[dcarrith]

Oh, sorry for the confusion. The only way I felt safe providing my server side sample (the one running on my server) was if I hard coded the array of JSON and then explicitly checked for those values before indexing into the array with whatever the client sent as the "retrieved" value. Some extrapolation is required for the server side code. So, for example, the artists.sample.page.php will only work for the values 20, 40, 60 and 80 as it is now. And, the queue.sample.page.php example will only work with the values 10, 20, 30, 40, 50, 60, and 70 as it is now. That's if you use the moreUrl that points to my server. It seems like I might need to provide different sample files on github if the hard coded values are going to cause confusion.

[dcarrith]

@starnutoditopo - any luck capturing the Post and response to your server code with Firebug? I'm guessing the "Data/More" URL is resolving to jsfiddle.net or something. Try putting in an absolute path for moreUrl (like I did) to reach out to your server code (if running lazyloader from jsfiddle).

[starnutoditopo]

No way. I put this: http://www.musotic.com/samples/queue.sample.page.php in the "moreUrl" setting, but nothing changed.

Meanwhile, have a look at this: http://jsfiddle.net/starnutoditopo/ccASF/11/ Here, basically I removed the "index" page, so that "queue" is the only page. Where is the mistake?

Thanks!

Bye, Xc

On Wed, Jul 11, 2012 at 1:41 PM, Dave < reply@reply.github.com

wrote:

@starnutoditopo - any luck capturing the Post and response to your server code with Firebug? I'm guessing the "Data/More" URL is resolving to jsfiddle.net or something. Try putting in an absolute path like I did to reach out to my server code.

---

Reply to this email directly or view it on GitHub:

https://github.com/dcarrith/jquery.mobile.lazyloader/issues/5#issuecomment-6904208

[starnutoditopo]

Found: pageshow and pageInit were inverted. This is now working for me: http://jsfiddle.net/starnutoditopo/ccASF/12/

Bye, Xc

On Wed, Jul 11, 2012 at 2:57 PM, Starnuto di topo starnutoditopo@gmail.comwrote:

No way. I put this: http://www.musotic.com/samples/queue.sample.page.php in the "moreUrl" setting, but nothing changed.

Meanwhile, have a look at this: http://jsfiddle.net/starnutoditopo/ccASF/11/ Here, basically I removed the "index" page, so that "queue" is the only page. Where is the mistake?

Thanks!

Bye, Xc

On Wed, Jul 11, 2012 at 1:41 PM, Dave < reply@reply.github.com

wrote:

@starnutoditopo - any luck capturing the Post and response to your server code with Firebug? I'm guessing the "Data/More" URL is resolving to jsfiddle.net or something. Try putting in an absolute path like I did to reach out to my server code.

---

Reply to this email directly or view it on GitHub:

https://github.com/dcarrith/jquery.mobile.lazyloader/issues/5#issuecomment-6904208

[starnutoditopo]

Hi!

As promised, I pushed the sample code in: https://bitbucket.org/starnutoditopo/mobilelazyloader Only, I need a way to share it to you (as the code contains a copy of your scripts, I would like you have a look at it, before making it public): have you got a userId on bitbucket.org?

Thanks!

Bye, Xc

On Wed, Jul 11, 2012 at 3:00 PM, Starnuto di topo starnutoditopo@gmail.comwrote:

Found: pageshow and pageInit were inverted. This is now working for me: http://jsfiddle.net/starnutoditopo/ccASF/12/

Bye, Xc

On Wed, Jul 11, 2012 at 2:57 PM, Starnuto di topo < starnutoditopo@gmail.com> wrote:

No way. I put this: http://www.musotic.com/samples/queue.sample.page.php in the "moreUrl" setting, but nothing changed.

Meanwhile, have a look at this: http://jsfiddle.net/starnutoditopo/ccASF/11/ Here, basically I removed the "index" page, so that "queue" is the only page. Where is the mistake?

Thanks!

Bye, Xc

On Wed, Jul 11, 2012 at 1:41 PM, Dave < reply@reply.github.com

wrote:

@starnutoditopo - any luck capturing the Post and response to your server code with Firebug? I'm guessing the "Data/More" URL is resolving to jsfiddle.net or something. Try putting in an absolute path like I did to reach out to my server code.

---

Reply to this email directly or view it on GitHub:

https://github.com/dcarrith/jquery.mobile.lazyloader/issues/5#issuecomment-6904208

[dcarrith]

@starnutoditopo - I created an account on bitbucket - same username as github.

[starnutoditopo]

Fine. You are admin of the project feel free to apport any changes to it. It simply lazyly loads a list of pictures from http://www.panoramio.com/ . I tried to make it as simple as possible, just starting from a default template and adding the required scripts. The project still suffers of these 2 problems: 1) list is NOT authomatically initialized (that is: you need to perform a scroll before anything gets displayed) 2) not all LazyLoader events seems to fire (eg.: lazyloaderbeforecreate)

Bye, Xc

On Thu, Jul 12, 2012 at 5:01 PM, Dave < reply@reply.github.com

wrote:

@starnutoditopo - I created an account on bitbucket - same username as github.

---

Reply to this email directly or view it on GitHub:

https://github.com/dcarrith/jquery.mobile.lazyloader/issues/5#issuecomment-6937459

[dcarrith]

FYI: I fixed an issue with the jsfiddle example and updated the link for it in the comment above (https://github.com/dcarrith/jquery.mobile.lazyloader/issues/5#issuecomment-6865782).