I have a situation where I am loading an iframe inside of a backbone view. The view has an events hash that handles click events.
events: {
'mousedown': 'toggleActive'
}
This works fine for the DOM that the view is part of. Problem is when I click inside the iframe DOM, the click event doesn't bubble up to the view (as expected). So I wrote some code that transfers the click from the iframe DOM to the parent DOM. I have the following inside the iframe body.
$("body").bind("click", function(event){
window.parent.document.$("#"+tgId).trigger(event.type);
});
This works fine for regular jquery event handlers, but for some reason it doesn't trigger the view's event handlers (from the events hash).
Does anyone have any ideas?
Have you tried adding a debugger statement inside your click handler, and then checking what window.parent.document.$("#"+tgId) actually is? It's hard to say for sure, but my guess is that that code is not selecting the element you expect. jQuery will then happily let you call trigger on an empty set, so you would't get any errors if that was the case.
Related
Is it true: GTM will not work if there is already an event handler on the element?
For example, I want to configure button click tracking. But if it already in code page has another handler (script, addEventListener) on it, will GTM ignore my setup? It's right? If so, in what cases will GTM not record events?
Thanks
No, that is not true. Google Tag Manager will work even when there is already an event handler attached. However it will not work if the function in that event handler suppresses event propagation.
For example, GTM will fail if you do something like this (example is using jQuery, but the same goes for plain JS):
$('a#toTop').on('click', function() {
console.log("Link Clicked");
return false;
});
because return false stops event propagation, which is a JS feature that GTM needs to work.
Google Tag Manager does not attach event handler to individual elements. Instead it attaches the event handler to the document itself. A click on an element then propagates upwards through the DOM, until it meets the document root and is handled by the respective event handler. If you do a return false the event does not travel upwards, and the GTM event handler will not work.
However if you do this properly - e.g. by using event.preventDefault() instead of return false - then GTM will work just fine. "Return false" is mostly an outdated way to suppress the default action of an element, and should not be used for that purpose anymore in any case.
It is totaly in caos.
The trigger is always fired when I click on any element.
But I am sure I setup the trigger setting on particular element.
This is extremely weierd. Does someone tell me why it happens, and what is the problem with ?
There is (almost) no problem, that's just how GTM works. The event listener is not bound to the element, but to the document, and waits for the event to bubble up.
So the click is triggered on every element, goes up the DOM tree and when it arrives at the document GTM checks if the target element matches the filter you have configured in your trigger.
This is not really a problem until it comes to debugging in GTM preview mode, because then every click will produce an entry in the preview pane and it gets crowded pretty fast.
If it is gtm.click then it should be just fine . I attached a screen shot here . If you see the something like this when you click any where on the page then it is fine . Gtm automaticlly trigger this event when you implement any onclick trigger
I'm using jQuery to convert a column of hyperlinks within a gridview into UI dialogs.
This gridview is in an updatepanel, and for one of the dialog's buttons I perform a __dopostback on this updatepanel, which refreshes the changes I've made within the dialog.
It all works rather nicely, apart from one small issue.... that is when the updatepanel posts back and recreates the gridview table with new data.. I lose the dialog functionality!
Previously, I simply had the following:
$('a.createdialog').click(function(e) { <iframe code here>.dialog( { <buttons and other options> } )
and it made sense that, once the gridview was updated, the above will essentially be wiped.
So I put that code into a function, and as well as running this function on the page load I also placed the function into the dialog's button code. This however does not fix the issue... I tried moving where I call this function around from the button to the updatepanel's loading events with registerstartupscript().. again no luck.
any ideas?
Cheers :D
Try the live method, description from JQuery Docs: Attach a handler to the event for all elements which match the current selector, now and in the future. The async postback/refresh is killing the handler; live can help in this situation persist the handler.
http://api.jquery.com/live/
$('.clickme').live('click', function() {
// Live handler called.
});
HTH.
I have a several actions that can be taken on the screen that would cause image to be re-loaded via Ajax call (non-jQuery). I need a way to detect that image has been reloaded so that I can attach event handler to the image again. How can I do this?
An alternative way of doing it is to use the live event in jQuery.
Which binds handlers to currently existing (selected) elements and any others which may appear later on (through a XMLHttpRequest or simply DOM handling). This means you don't have to detect if an image or other element has been reloaded, it binds the events for you automatically.
It's not clear to me whether the ajax is simply updating the src of an image, or whether you have whole new chunks of html with <img> tags in them.
In any case, this should bind an onload event to any image on the page and any img that gets added to the DOM.
$('img').live("load", function(e){
// fires when an img tag has an onload event fire.
});
I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.
So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.
I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.
Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.
Some investigation shows that:
On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.
So, my questions are is:
Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?
The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.
I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.
Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:
ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);
In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.