CODEWITHSUNDEEP
javascriptjquery
Difusio
Difusio

Reputation: 799

Onload fires no matter where I place it

Right, I'm getting quite aggitated with this. I'm probably doing something wrong, but here's what I'm doing:

$(document).ready(function () {
    $('#somebutton').click(function () {
        openPage1();
    });
    $('#someotherbutton').click(function () {
        openPage2();
    });
});
var openPage1 = function () {
    $('#iframe').attr('src', 'someurl');
    $('#iframe').load(function () {
        $('#button').click();
    });
};
var openPage2 = function () {
    $('#iframe').attr('src', 'anotherurl');
    $('#iframe').load(function () {
        $('#anotherbutton').click();
    });
}

Whenever I click somebutton everything goes as expected. However when I click someotherbutton. The .load() from openPage1() is called first and I can't find a way to stop that. The .load() from openPage1() has a button with the same name, however on openPage2() I need to modify the contents before clicking the buttons.

I need to use .load() because I can't click the buttons before the document is ready.

Basically what I need is two seperate .load() instances on the same iframe, that don't fire off on each other.

Besides that, maybe my understanding of jQuery/JS is wrong, but shouldn't the .load() events only be listening after clicking the corresponding button?

Can someone help me out, this has been keeping me busy all afternoon.

Upvotes: 0

Views: 103

Answers (4)

LeGEC
LeGEC

Reputation: 51850

By writing : $('#iframe').load(function (){ $('#button').click(); });, you are adding a listener on the load event, which will stay and be re-executed on each subsequent reload of the iframe.

Here is a jsfiddle to demonstrate this : click on the "reload" button, and see how many times the "loaded" message appears in your console.

in your case, if you click on #somebutton, then on #someotherbutton, after the second click, you will have two handlers bound on the load event, and both will be triggered.

If you click 5 times on #somebutton, you should end up calling 5 times $('#button').click().

If you want to execute it once, you can follow Fred's suggestion, or use jQuery .one() binder :

$('#iframe').one('load', function(){  $('#button').click()  });

Here is the updated jsfiddle : 'loaded' should be displayed only once per click.

Upvotes: 2

SomeShinyObject
SomeShinyObject

Reputation: 7811

This isn't really an answer to your problem Now it is an answer, but I think utilizing functions as they were intended could be beneficial here, i.e.:

//Utilize a single function that takes arguments
var openPage = function (frame, src, eventEl) {
    frame.attr('src', src);      // If you pass frame as a jQuery object, you don't
    frame.on("load", function(){ // need to do it again
        $(this).off("load");
        evEl.click(); //Same for your buttons
    });
}



//Simplify other code
$(document).ready(function () {
    $('#somebutton').click(function () {
        openPage($("#iframe"),somehref,$("#buttonelement"));
    });
    $('#someotherbutton').click(function () {
        openPage($("#iframe"),anotherhref,$("#someotherbuttonelement"));
    });
});

Upvotes: 0

Fred
Fred

Reputation: 1404

Try using on, and once loaded, unbind

$("#iframe").on("load", function(){
    $(this).off("load");
    $('#button').click();
});

That way you remove the handler you put up before the second button is clicked?

Upvotes: 4

Jurijs Kastanovs
Jurijs Kastanovs

Reputation: 685

Maybe try and replace the lines in both functions like this:

$('#iframe').load(function() {
    $('#anotherbutton').click();
};
$('#iframe').attr('src', 'anotherurl');

Otherwise it might be firing the event before the new event-handler has been set.

Upvotes: 1

Related Questions