Json request data and jquery prettyphoto binding issue - javascript

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.

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.

Related

AJAX loaded content with lightbox2

I'm using the Lightbox2 script and the content of my page is loaded via an AJAX request.
I don't find any function to attach new images or initialize Lightbox2 after an AJAX request, How can I make that in order to use Lightbox2 for images loaded via AJAX ?
Léo
I had to reinitialize lightbox in order to detect new images. I have done that like this:
window.lightbox.init();
I placed this code in my success handler of ajax call after I have added the new content:
contentContainer.empty().html(data);
From the documentation files: http://lokeshdhakar.com/projects/lightbox2/
You do not need to initiate anything, any image link with the data-lightbox attribute like this:
Image #1
will work automagically even if loaded by AJAX as soon as you add it to your DOM.
EDIT: After having taken a look at the lightbox script, you may have to change as well the line #51:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
into this:
$('body').live('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {

a .get() request on page load

I will be redirecting the user to a page. This page gets all of its content from a REST api in JSON format. So on page load I would like to execute the $.get() request and load the contents of my divs in the page.
I know how to execute the get request, however, I don't know how to do it on page load. I have a application.js file for my entire application. So I can't put it in document.ready because that it would load on each page in my application.
I will be executing the get request like this:
$.get(
$(this).data('myurl'),
function (data) {
var item = data.response.item[0];
$('mydiv').html(item.text);
}
);
With jQuery this is very easy, but you have to put this block in your 'start'-page:
$(function() {
// this code will be executed on page load
app.start();
});
From what I understand, you only want to get data from rest api on a specific page..
for that you can do:
$(function(){
if (window.location.href.indexOf('/your/page/url') > -1){
// your $.get here
$.get('/torestapi', function(){ //update divs });
}
});
Add it as an inline script block with a separate document.ready, or just before </body>.
Or add it to a separate js file, and link it only from the specific page where you want to use it.

Using jQuery to bind an event to AJAX content

I have a menu that is AJAXed in, thus loads later than the actual page. I would like to know if there is a way to bind an event to the surrounding div (the container div of logged in information).
Basically the container is empty when jQuery(document).ready() runs and gets populated 1-2 seconds after. I would like to run some scripts when this happens - and I'd rather not put the script into the AJAXed content itself.
In short, I want to execute some Javascript when a certain element shows on screen.
you can write your script inside success function of ajax... success is called whn the ajax request succeeds...
$.ajax{(
url:....
...
success:function(result){
//do your stuff like appeding..
//your script here
}
})
it would be easier if you provide us with codes to help you out..

Loading content into a div using jQuery's load method

I am trying to load the contents into a div named rightcontent into my page from external html files using the jQuery's load method. Initially, there is no content in my div rightcontent, and as the user clicks some links, the texts are automatically loaded into that div.
Take a look at these snippets :
In my web page:
<div id="rightcontent">
</div>
The same web page also contains links like these:
<a class="myajaxreq" href="pages/abc.html">Link I</a><br>
<a class="myajaxreq" href="pages/pqr.html">Link II</a>
The external javascript file contains these code:
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#rightcontent').load(myhref);
return false;
});
When I check whether my javascript calls are made correctly using alert(myhref), it works correctly. However, no content is loaded into the div. Help me out here !!
Are you testing the code locally or on a server? AJAX requests won't work locally.
Upload it to a server (and put everything in the right subdirectories) and it should work fine.
use
$('#rightcontent').text(myhref);
instaed of
$('#rightcontent').load(myhref);
Try using
$(".myajaxreq").click(function(){
$.get( $(this).attr("href"), function(page){
$("#rightcontent").html(page);
})
return false;
})

How to insert javascript into an AJAX Django app?

I have a Django app where the main content changes frequently via AJAX loads. Since I need to run a lot of javascript on the newly loaded content, what I do now is include a javascript block with several document.ready and other functions at the end of the loaded HTML template.
Is this the proper way to load javascript on AJAX loaded content? If I replace the content block with new (AJAX loaded) HTML + scripts, will the old scripts be removed cleanly?
Are there monitoring tools to detect javascript / memory usage? I am running into some page crashes so I suspect there are some leaks occurring.
Thanks!
You should definitely look into using .live() rather than including new javascript blocks within the loaded html content:
http://api.jquery.com/live/
From the docs:
The .live() method is able to affect elements that have not yet been
added to the DOM through the use of event delegation: a handler bound
to an ancestor element is responsible for events that are triggered on
its descendants.
IMHO you should avoid inserting javascript code into AJAX loading page elements. It's not he best way to do that.
Why cant you make a javascript function and activate it after AJAX finishes load? Or put it on click or hover event...
JavaScript Onclick:
<a class="orange"
onclick="return voteClick(this, '{{ item.pk }}', '1', '{% url ajaxvote %}')"
href=''>Button text</a>
and then in your script:
function voteClick(self, pk, multiplier, url){
//some actions function makes
//for e.g. making POST or changing DOM
// you can use vars that are generated by django template system
return false;
};
jQuery Way:
$.post(url, { param1: value1, param2: value2 }, function(data){
//some function actions upon your AJAX complete
//call your function with code here
// you can load some 'data' for this script from django
// and not the whole script
voteClick(self, value1, value2, data);
return false;
} //end function
);//end POST
ou can read more on this: jQuery POST
So main idea here is that you must load script as a static content from your MEDIA_ROOT and pass it some needed parameters. It's hard way to load your scripts with live() functions. You must take care of tracing lot's of functions and params.
Of course if you're using jQuery it's easy to trace code events with it's selectors. But again... Why do you need to load code with AJAX request? It's definitely static file to be used here, as your scripts file...

Categories

Resources