JQuery Mobile and JSONP

Question

I have my jquery mobile app pulling data from our mysql db using JSONP. The data is pulling fine, but the problem comes when I go back to the previous "page" in my app then click on a different option, it doubles the data on the next screen, and it will just keep stacking the data as many times as I do that. What am I missing?

The app doesn't look right in any browsers, but it looks fine in the ios simulator or appmobi simulator. I can post some code if needed, just know it won't look right in your browser.

Thank you for any help you can provide

$('#two').bind('pagecreate',function(event){  

var img = getUrlVars()["st"];
var photo = $('#img');

$.ajax({
  type: 'GET',
  url: 'http://serverhidden/json/img.php?st='+img,
  dataType: 'jsonp',
  success: function(data) {
    $.each(data, function(i,item){
    var image = '<img class="stmap" src="images/states/lrg/'+item.img+' "/>';                  

        photo.html(image);

       });            
     },
        error: function(e) {
        //called if there is an error
       //console.log(e.message);
    }
 });
});

What do you mean "double your data"? The dom might stay the same between "pages" (actual pages? or different screens on the same page?) and you load the jsonp more then once. — reconbot, Dec 14 '11 at 14:12
Yeah, that might have been the wrong term. I mean if I select, for example, the state of California, it will show the information for California twice if I go back and click the link again for that state. And if I select another state, it just shows California again but now it shows it three times, and it just keeps adding like that each time All pages are one HTML page, so that's why I used the term "pages" — theschwag, Dec 14 '11 at 14:15
That sounds more and more like an event has been subscribed to each time you go to the page. — Dessus, Dec 15 '11 at 05:23

score 0 · Answer 1 · answered Dec 14 '11 at 17:26

0

So without any code from your project this is a shot in the dark but it seems like you populate a pseudo-page with information on pageshow with an .append() call. Instead of using .append(), use .html() as it will replace the information already present rather than add to it.

If each state has an individual page then you can bind to the pagecreate (or similar) event so the data will only be appended once rather than on each pageshow event.

answered Dec 14 '11 at 17:26

Jasper

75,717
14
151
146

I think you are on to something. Look back top at my code I added in for my pseudo-page called #two. It gets an image from the server and spits back into the app – theschwag Dec 14 '11 at 20:08

score 0 · Accepted Answer · edited May 23 '17 at 10:34

Make sure you are not subscribing your event multiple times. It seems silly but is easy to do.

I would recommend you add logs to your JQM site so that you can see how many times your site is being updated.

You should also be aware that updating a JQMobile page often requires a call to a method to update content after a page is rendered. See here: jQuery Mobile rendering problems with content being added after the page is initialized

Hope those help.

JQuery Mobile and JSONP

2 Answers2