CODEWITHSUNDEEP
javascriptjqueryonerror
Liontack Lightning
Liontack Lightning

Reputation: 81

Call JavaScript function at Jquery.load

I've a javascript function setErrorImages(), which searches all img tags and and gives them an onerror function. This works great.

I also have a division content with dynamic content by calling de jquery .load function like this, which also works:

$("#content").load("http://example.com/otherpage.php");

But when the new content (otherpage.php) was loaded into the division, the setErrorImages() function doesn't work on the img'es within the new content.

I can call the setErrorImages() function on the otherpage.php, and everything works perfectly, but this way I have to do this on every otherpage, which are a lot.

Is there a way to send a javascript file or function with the jquery .load,
or maybe there is a way to re-execute the javascript function right after the jquery .load.

Kind regards,
Liontack

function setErrorImages(){
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].onerror = function(){ setErrorImage(this); };
    }
}

function setErrorImage(image){
    image.onerror = null;
    image.src = 'http://tanuri.eu/images/error.png';
}

Upvotes: 0

Views: 201

Answers (2)

Alnitak
Alnitak

Reputation: 339856

Firstly, I suggest using the this context instead of a parameter for your error handler:

function setErrorImage() {
    this.onerror = null;
    this.src = 'http://tanuri.eu/images/error.png';
}

Secondly, change setErrorImages to use this too:

function setErrorImages() {
    var images = this.getElementsByTagName('img');
    for (var i = 0, n = images.length; i < n; ++i) {
        images[i].onerror = setErrorImage;    // parameter is now implict
    }
}

Note how there's now no need for a function wrapper for the onerror call - the browser automatically sets this to be the element of interest.

For simpler code you could also just use jQuery to do this job for you since you already have it loaded:

function setErrorImages() {
    $('img', this).error(setErrorImage);
}

Thirdly, use the complete handler of .load, taking advantage of the fact that it sets this to be the parent of the part of the DOM that just got replaced. This avoids setting the onerror handler on elements in the page that you already looked at.

$('#content').load(url, setErrorImages);

The only other change is that on your initial invocation you'll need to pass document to setErrorImages using .call:

setErrorImages.call(document);

Upvotes: 1

pmandell
pmandell

Reputation: 4328

$("#content").load("http://example.com/otherpage.php", setErrorImages);

.load() accepts a "complete" parameter:

A callback function that is executed when the request completes.

Upvotes: 2

Related Questions