Using .live() for iFrame.load() event? - javascript

I know an iFrame is added to my page via javascript somewhere in my page, I want to be notified when it is loaded, but this doesn't work:
$("iframe").live("load",
function () {
alert(this.name + ": Im loaded!");
});
No alert is shown
Any idea why? any idea how can we achieve this?

I think you can do a callback after adding the iframe to your page.
As mentioned here, it's not possible to bind live() to iframe load().
Note: The .live() and .delegate() methods cannot be used to detect the
load event of an iframe. The load event does not correctly bubble up
the parent document and the event.target isn't set by Firefox, IE9 or
Chrome, which is required to do event delegation.
So in your callback, you have to call this, maybe set a timeout to make sure it fires after the iframe has been loaded.
$("iframe").load(function () {
alert(this.name + ": Im loaded!");
});

It won't work, for load event only works on Window object.
If you wish to be noticed when page inside the iframe is loaded, then you should write code on the inside page, which calls window.parent to notify its parent page.

Related

Target HTML generated by Javascript?

I have a slider button created using a JavaScript plugin, which automatically generates an element with class name .flex-next. However, when I run the following code, nothing is logged in my console:
$(window).load(function() {
$( ".flex-next" ).on( "click", function() {
console.log("youclick");
})
});
Since the button is added dynamically after the dom is loaded, you need to use event delegation so the click event can be used on this button:
$(document).on('click','.flex-nex',function() {
console.log("youclick");
})
Your setting your call to fire when the window loads by using $(window).load(...);. A flexsider is initiated on $(document).ready(...) which happens after the window loads and all of the content is loaded into the DOM. So when your script fires, it looks for an element that isnt there yet.
Get around this by firing your script on $(document).ready(), and use event delegation. The best practice way is to declare your function like so:
$(document).ready(
$(document).on('click', ".flex-next", function() {
console.log("youclick");
});
});
this way your click listener will wait until the page is ready and will put a click event on to any .flex-next event, even those created dynamically. That way if your using large imagery that is loaded asynchronously the code will still work.
You are probably calling your $(".flex-next").on call before the slider button has been executed. So, basically, your .flex-next class doesn't exist in the DOM yet when you call the .on
You should call the .on call after plugin has been initialized.

call on .load in not working properly

I have a page xyz.jsp which having a script on page load and its working fine.
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
but if i am calling this page on abc.jsp on jquery .load page is rendering but
$("#hiddenLoginButton").click(); is not working.
dont know the reason why its not coming.
please tell me that its working onload of xyz.jsp but if i calling that page on abc.jsp it not working
Adding code which is in abc.jsp:
function newstyle(){
$("#test").load("xyz.jsp");
};
so, newstyle calling onload on abc.HTML rendering fine but
function loginRegOverlay() {
$("#hiddenLoginButton").click();
};
which is in xyz.jsp not working fine if i am calling that on abc.jsp..i hope its clear now.
.load() is an ajax request so if you are loading elements from other page then direct binding of events to the element won't work. So workaround to this is event delegation which you have to delegate the event to the existing parent item which is loading the html from other page.
$(document).find('#hiddenLoginButton').click();
You can delegate it to the closest parent which was available at the time of page load:
$('#ID or .Class of the parent item').find('#hiddenLoginButton').click();
like:
$('#wrapper').find('#hiddenLoginButton').click();
side note:
if you are able to post some rendered html then that would be much better to see what is going on and what will be suggested to overcome this.
Try with .trigger like
$("#hiddenLoginButton").trigger('click');
and we assumed that you have called the function loginRegOverlay() on page load
AND I have noticed that you wrote code in xyz.jsp and you want to trigger it on abc.jsp then include that xyz.jsp at abc.jsp
inlcude('xyz.jsp');
and plz makesure that those buttons ids are unique bec xyz is loads on abc and due to duplicate in ids they wont work,you can give them same class and fire it as once
You can use .live or .on method for event delegation
$("#hiddenLoginButton").live('click', function(){});

Live Detect iframe page onload

I have a div element that contains some iframes. At times, I destroy those iframes and create new one, but I always need to know when each of them (also those added later) has finished loading. I thought that the following code would work but I get nothing logged to the debug console. Any help?
// doesn't work
$('#viewport').on('load', 'iframe', function() {
console.log('LOADED!');
return true;
});
// doesn't work either
$('#viewport').on('ready', 'iframe', function() {
console.log('LOADED!');
return true;
});
It might be that the frame finishes loading before you add the event.
Try to add the event before you add it to the DOM.
var iframe = document.createElement("iframe");
// set iframe properties
$(iframe ).on('ready', 'iframe', function() {
console.log('LOADED!');
});
document.body.appendChild(iframe);
I'm pretty convinced that this can't be done with dynamic iframes. From the jQuery site (under the deprecated load() function:
Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.
I can't get a similar project to work, either.

jQuery scripts no longer run on partially refreshed elements

I have a number of jQuery scripts that select elements within the area that I run a partial page refresh on.
I am using this css tricks code snippet to refresh that part of the page:
$('#refreshbutton').click(function() {
var url = "http://myUrl.com/indexTest.php?ID=" + Math.random();
setTimeout(function() {
$("#maindisplay").load(url+" #maindisplay>*","");
}, 100);
});
The problem is that the elements within #maindisplay are changed, thus are considered new elements in the dom. Since the scripts that select those elements and attach functions to them run at domready and not during the partial refresh, this poses a problem.
So far I have been unable to find a way to reattach the scripts to the elements within #maindisplay after I partially refresh it.
My question is: What is the optimal way to reattach the scripts to the refreshed area of the page.
Thank you for any advice.
You need to use the live() function to attach your click handler.
You have the following options that I can think of:
Put the attach in a function and call that function on page refresh
Use the .live() functionality
Use .delegate() functionality
Put the Javascript reference to the functionality in a reference in the refresh so that it executes as a part of that refresh
Put the function in the callback
make it part of your setTimeout
some other creative method I did not think of...
Just a note: I would look at the .delegate() with contextual selection added in recent versions (available in 1.4.2 for instance).
Does load() not take a callback function as it's second argument? Why not reattach event handlers to the elements with that function?
$('#result').load('ajax/test.html', function() {
//reattach event handlers here.
});

Weird Bubbling Issue

I'm not sure why this is bubbling, but it is. Wondering if anyone has any ideas?
$('#file_upload').live('submit',function(event){
$('#file_upload').attr('action','io.cfm?action=updateitemfile&item_id='+$('.agenda-modal').attr('data-defaultitemid'));
$('iframe').load(function(){
$('.upload_output').empty();
$livepreview.agenda({
action:'get',
id:$('.agenda-modal').attr('data-defaultitemid'),
type:'item',
callback:function(json){
for(x in json[0].files){
$('.upload_output').append('<li class="file-upload"><a target="blank" href="io.cfm?action=getitemfile&item_file_id='+json[0].files[x].item_file_id+'">'+json[0].files[x].file_name+'</a> <a style="color:red" href="#deletefile-'+json[0].files[x].item_file_id+'">[X]</a></li>');
}
console.log('callback');
}
});
console.log('iframed');
});
console.log('go');
});
So, if I upload a files i get the following in my console:
go
iframe
callback
If i do it a 2nd time in a row:
go
iframed
iframed
callback
callback
and three times:
go
iframed
iframed
iframed
callback
callback
callback
etc.
I assumed if the live() event was bubbling "go" would bubble also, but it isn't. I tried event.stropPropagation just about everywhere inside of the submit, and .die() connected to the $('#file_upload').die().live(... like so.
Any ideas?
P.S. This live() call is just inside a jQuery doc load ($(function(){...});)
If you use one your issue should be resolved.
$('iframe').one("load", function() {
It's because you're attaching a new/additional .load() handler each time, this means the one your just added and all previous load event handlers are all running. If you want the handler to only run once, use .one(), instead of this:
$('iframe').load(function(){
use this:
$('iframe').one('load', function(){
or, a bit more wasteful but you could .unbind() each time:
$('iframe').unbind('load').load(function(){

Categories

Resources