Question

There is a situation I am having with jQuery. In particular its prettyPhoto library and getJSON function.

I have a page which loads HTML, it calls jQuery and prettyPhoto. There is some inline JS which makes a JSON request further down the page:

It should work like the below:

1) Page loads,

2) Javascript code run,

3) Script runs a jQuery JSON request which returns and has HTML (a-tags and images inside each a-tag) inside,

4) Script then prints the HTML from inside the JSON to the screen,

5) User clicks a-tag/image and it opens in prettyPhoto’s iframe popup.

NOTE -> Each a-tag has a prettyPhoto id attached (to load the image in prettyPhoto using iframe popup).

The problem is the images (a-links) do not open with prettyPhoto and I am not sure why. There is no JS Error.

However, it does work if i manually have the HTML (a-links/image) already there (so just loading their HTML from the JSON request seems to make the difference).

Seems by time the JSON request returns (with HTML) prettyphoto already binds to a-tags (or lack off).

Tested so far:

Tried putting JSON request in ‘document.ready’ and prettyPhoto in ‘window.load’. So does JSON requests early and prettyPhoto binds when everything else loads – failed

Tried using jQuery AJAX instead of JSON – failed

Dont need the code especially but having trouble with the logic.

Answer 1

It sounds like the HTML from the JSON (a-links/images) doesnt come back quick enough (before ‘window.load’ runs).

Try putting the prettyPhoto JS into the success callback (i.e. where returns data).

Below load_images.json is the JSON request you do which returns the HTML (a-links and their images):

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //JS code running prettyPhoto inside here. Now will bind to a-links.
});

PrettyPhoto now binds to A-links AFTER the JSON has loaded them.

Hopefully will help having the prettyPhoto stuff AFTER the a-links.

If that fails try putting the prettyPhoto code inside the complete callback which occurs after success callback. Like the below:

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //nothing
})
.complete(function() {
     //JS code running prettyPhoto inside here. Now will bind to a-links.
});

This way you are giving prettyPhoto plenty of time to bind to the correct a-links which are marked for it.

Try that.