Add onclick to com.google.gwt.dom.client.ImageElement - image

I add an onclic event in a com.google.gwt.dom.client.ImageElement using
imageElement.setAttribute("onclick","var tabla=document.getElementById('tablaWidget');var length=tabla.rows.length; for(var i=0;i
This works in firefox but not in IE.
I read here: onclick setAttribute workaround for IE7 that I shouldn't use setAttribute to do this because is not crossbrowser, but I don`t know how to do it because this element doesn´t have the onclick or addEventListener method.
Thanks for your help.

You should use com.google.gwt.user.client.ui.Image instead of com.google.gwt.dom.client.ImageElement for any images that will be used in the UI. Then you can use Image#addClickHandler to handle clicks in a cross-browser compatible manner.

Related

how to access the id of div which is loaded through ajax

I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.

jquery contextMenu + .live

I am using a plugin called jQuery contextMenu but am having trouble making it work with elements that are loaded via ajax after the DOM has already loaded. does anyone know how i can get this working with .live?
I've made a modification of the original jquery.contextMenu.js script. I've replaced .each() with .live("mousedown", ...) and deleted appropriate mousedown binding (you can also make a diff of my code and the original to get the changes).
You can get the code from http://pastebin.com/jBcAR6g1
Works for me.
2018 update without plugin:
$(document).on('contextmenu','#object_id',function() {
//code
});
I think you must use enableContextMenuItems() method on the newly added elements. If you post your code it would be easier to help.

jQuery .live event propagation

I have a little problem with jQuery .live method. I am using it for catching ajax events for Google Analytics on my website, but in case I have a link with an inner image, the click event is fired up from the image and my live binded click event does not catch it.
I really dont like to add these events manually everytime after changing content and I dont like to bind it to the image (because of the missing href parameter, this case I had use some .parent method), so what is the best way how to handle this?
Notice: I am not sure about efficiency of the .live method, so in case there are big performance differences, please tell me that:) I tried to profile it in webkit profiler, but I didn't see any difference..
Just place a click(function(event) { ... }) handler on the static parent element, and find the element which started the event with event.target.
Assuming you have an a containing an img, any event on the img should bubble to the a, which will catch it.
You could also try using the .delegate() method (http://api.jquery.com/delegate/)
Here is some more info regarding .live() vs. delegate():
http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
http://www.youtube.com/watch?v=23Q4S9hmHQY
jQuery: live() vs delegate() [stackoverflow.com]
Update:
Here is a post by Jupiter 24 about "Why you should never use jQuery live":
http://jupiterjs.com/news/why-you-should-never-use-jquery-live

jquery colorbox and jquery date picker

I am using jquery colorbox and jquery date picker. My problem is date picker doesn't work in my popup window using jquery colorbox. I tried to used outside colorbox and its work fine.
Any help would greatly appreciated.
I tried the code below but still doesn't work.
onLoad: function(){
$('#date-pick').datepick();
},
I think you may write these codes $('#date-pick').datepick(); in colorbox's onComplete function. When all dom elements are ready then the code will work.
Well, for starters, to create the datepicker with jquery-ui its:
$("#datepicker").datepicker();
It may well be something else, but you really haven't shown us much. I don't even know if you're using the jquery-ui datepicker as you've provided very little information in your question.

Jquery Validation plugin and Colorbox

Does anyone know the best way to get the Jquery Validation plugin to run when submitting a form that has been loaded dynamically into a Jquery Colorbox modal window?
Add the validation set up to the colorbox callback. That way the color box has been loaded and the form exists before you attempt to set up validation for it.
$('selector').colorbox({...options...}, function() {
$('form',this).validate( {...options...} );
});
I was playing around with this and found a better solution (at least for myself).
$('selector').colorbox(
{options, onComplete:function(){$('selector').validate({}
});
Visually I can see when the lightbox is finished loading, it'll attach this function to the lightbox. It's the same as what tvanfosson posted, but I like mine for readability purposes.

Resources