[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
Something I forgot to mention in my previous reply... To make sure it's clear what code is actually being run in the browser, never rely on looking at your JSP source to understand it. That's what threw you off here. The browser never sees your JSP source, only the HTML/JS/CSS/whatever files that your JSP generates. Do you have Fiddler? If not, go get it right now and get familiar with it: http://www.fiddler2.com/ It looks like you're using Windows 2000; Fiddler is supposed to run OK there if you have the .NET Framework 2.0. Fiddler's inspectors are great for examining all of the actual data downloaded to your browser. You can of course use other tools such as the Web Developer Toolbar and even a View Source for the .html file. But Fiddler is terrific. The main thing is that when you're debugging anything in the browser, you have to forget about the JSP source and think only in terms of what the browser actually receives. -Mike From: kali this works in JSP: % for (int i = 1; i 5; i++) { % $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); % } % but the same thing, in JavaScript, doesn't work: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); }
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } The 'i' you've called here is a global variable, in a for loop always put a var in front of it to have local scope (to the function, not block) for (var i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } but... more importantly, reframe your thoughts on javascript/jquery programming to let the selectors do the iteration for you. $('img[class=thumb]).mouseover(function () { $(this).addClass('dim'); }); To your second question: var elem%=i% = 'foo'; works because jsp is compiled server side and outputs the value of i onto the page, so that if i is 1, then what the browser sees is var elem1 = 'foo'; which is valid javascript. But javascript is all done client side so var elem + i = 'foo'; is not valid. There are several ways to do what you want, none of them good. Use implicit iteration from the jquery selectors instead. Stop using id's when you have an unknown or changing number of items you are iterating through to do things. IDs should only be used for unique items. When you have a list of similiar items doing the same thing, give them all the same class or custom attribute and let jQuery do the iterating for you. Josh Powell On Aug 30, 12:37 am, Michael Geary m...@mg.to wrote: Something I forgot to mention in my previous reply... To make sure it's clear what code is actually being run in the browser, never rely on looking at your JSP source to understand it. That's what threw you off here. The browser never sees your JSP source, only the HTML/JS/CSS/whatever files that your JSP generates. Do you have Fiddler? If not, go get it right now and get familiar with it: http://www.fiddler2.com/ It looks like you're using Windows 2000; Fiddler is supposed to run OK there if you have the .NET Framework 2.0. Fiddler's inspectors are great for examining all of the actual data downloaded to your browser. You can of course use other tools such as the Web Developer Toolbar and even a View Source for the .html file. But Fiddler is terrific. The main thing is that when you're debugging anything in the browser, you have to forget about the JSP source and think only in terms of what the browser actually receives. -Mike From: kali this works in JSP: % for (int i = 1; i 5; i++) { % $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); % } % but the same thing, in JavaScript, doesn't work: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); }
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
Good points by Josh. However this selector example... $('img[class=thumb]).mouseover ...can be written simpler as $(img.thumb).mouseover It's faster in most browsers to select-by-class than to iterate elements and 'read attributes'. jQuery may process both syntaxes the same (?), but using the img.thumb syntax *guarantees* the most optimized handling. This is a strange code sample. Why 'add' a class on mouseover, but not remove it on mouseout? If you want to add/remove the 'dim' class, then use jQuery's hover method to combine both events... $(img.thumb).hover( function () { $(this).addClass('dim'); , function () { $(this).removeClass('dim'); ); If you *don't* want to remove the class, then this function only needs to run 'once', because the class only needs to be added on the FIRST mouseover event. In this case, use jQuery's .one() (one-time) method... $(img.thumb).one(mouseover, function () { $(this).addClass('dim'); ); /Kevin On Aug 30, 1:02 am, Josh Powell seas...@gmail.com wrote: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } The 'i' you've called here is a global variable, in a for loop always put a var in front of it to have local scope (to the function, not block) for (var i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } but... more importantly, reframe your thoughts on javascript/jquery programming to let the selectors do the iteration for you. $('img[class=thumb]).mouseover(function () { $(this).addClass('dim'); }); snip / Josh Powell
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
actually got solution in another forum (http://www.manning-sandbox.com/ thread.jspa?threadID=34108tstart=0) works like a charm!! :) namely: $('#image' + i).bind('mouseover', i, function(event) { $('#image' + event.data).addClass('dim'); }); as to other problem (var elem1 = 'foo'; ) tried various things, like var thumbnails = [4]; // this is supposed to create an array of four elements; // thought I'd create an empty array of four elements, then put the elements inside it, but didn't work either.. for (i = 1; i thumbnails.length; i++) { thumbnails.push($('a id=link' + i + 'img id=thumb' + i + ' / /a')); // thumbnails[i] = $('a id=link' + i + 'img id=thumb' + i + ' / /a'); but it turns out this was not source of the problem.. it's weird, actually that it works in HTML (client-side) with just 'elem' in that declaration;) full working example here: http://www.mayacove.com/dev/jquery/events/test_event_dyn.html thank you very much... On Aug 30, 4:02 am, Josh Powell seas...@gmail.com wrote: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } The 'i' you've called here is a global variable, in a for loop always put a var in front of it to have local scope (to the function, not block) for (var i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } but... more importantly, reframe your thoughts on javascript/jquery programming to let the selectors do the iteration for you. $('img[class=thumb]).mouseover(function () { $(this).addClass('dim'); }); To your second question: var elem%=i% = 'foo'; works becausejspis compiled server side and outputs the value of i onto the page, so that if i is 1, then what the browser sees is var elem1 = 'foo'; which is valid javascript. But javascript is all done client side so var elem + i = 'foo'; is not valid. There are several ways to do what you want, none of them good. Use implicit iteration from the jquery selectors instead. Stop using id's when you have an unknown or changing number of items you are iterating through to do things. IDs should only be used for unique items. When you have a list of similiar items doing the same thing, give them all the same class or custom attribute and let jQuery do the iterating for you. Josh Powell On Aug 30, 12:37 am, Michael Geary m...@mg.to wrote: Something I forgot to mention in my previous reply... To make sure it's clear what code is actually being run in the browser, never rely on looking at yourJSPsource to understand it. That's what threw you off here. The browser never sees yourJSPsource, only the HTML/JS/CSS/whatever files that yourJSPgenerates. Do you have Fiddler? If not, go get it right now and get familiar with it: http://www.fiddler2.com/ It looks like you're using Windows 2000; Fiddler is supposed to run OK there if you have the .NET Framework 2.0. Fiddler's inspectors are great for examining all of the actual data downloaded to your browser. You can of course use other tools such as the Web Developer Toolbar and even a View Source for the .html file. But Fiddler is terrific. The main thing is that when you're debugging anything in the browser, you have to forget about theJSPsource and think only in terms of what the browser actually receives. -Mike From: kali this works inJSP: % for (int i = 1; i 5; i++) { % $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); % } % but the same thing, in JavaScript, doesn't work: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); }
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
Even simpler: $('img.thumb').click(function () { $(this).toggleClass('dim'); });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
kali - here is a way to accomplish the same thing in less code, and lets you call the images anything you want instead of having to use numbers. This is untested so there may be some slight errors, but the logic should be sound: $(function() { var imageArray = ['foo', 'bar', 'baz']; $(imageArray).each(function (item, i) { $('#wrapper').append('a href=photos.jsp?pn=' + item + 'img class=thumbsBorder src=images/' + item + '.jpg alt=thumbnail' + i + ' width=80 height=80//a'); }); $('img.thumbsBorder').hover(function () { $(this).toggleClass('dim').up().toggleClass('roll'); }); });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
sorry .up() is prototype... should be .parent() instead. On Aug 30, 1:20 pm, Josh Powell seas...@gmail.com wrote: kali - here is a way to accomplish the same thing in less code, and lets you call the images anything you want instead of having to use numbers. This is untested so there may be some slight errors, but the logic should be sound: $(function() { var imageArray = ['foo', 'bar', 'baz']; $(imageArray).each(function (item, i) { $('#wrapper').append('a href=photos.jsp?pn=' + item + 'img class=thumbsBorder src=images/' + item + '.jpg alt=thumbnail' + i + ' width=80 height=80//a'); }); $('img.thumbsBorder').hover(function () { $(this).toggleClass('dim').up().toggleClass('roll'); }); });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
yes I know they are two different things, I do know both JSP and JavaScript, so I do know the difference; I would like to know why what works in JSP doesn't work in JavaScript.. again: this works in JSP: % for (int i = 1; i 5; i++) { % $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); % } % but the same thing, in JavaScript, doesn't work: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } in JavaScript this code is applied ONLY when i=5, in JSP it applies to all four elements processed in the array and works as expected ok, to make it easier, forget the comparison to JSP... why does above JavaScript code not work?? I create four elements dynamically, but event-binding does not work for any of the four elements... thank you... On Aug 28, 6:56 pm, James james.gp@gmail.com wrote: I have difficulties understanding what you're trying to achieve. As someone mentioned, Java is to Javascript as Ham is to Hamster. They're two different beasts. For the 'elem+1' situation, you can do: this['elem'+1] = '...'; to dynamically create variables. But usually you don't have to resort to doing something like that if you code things properly. On Aug 28, 12:44 pm, kali maya778...@yahoo.com wrote: hi, I have a problem with binding events to dynamically-generated elements; specif. problem is something I'm trying to do with JavaScript doesn't work but it works if I do it inJSP: (and can we PLEASE get ability to display CODE in this forum in NON-PROPORTIONAL FONT???) JSP, event-binding works: % for (int i = 1; i 5; i++) { % var elem%=i% = $('a id=link%=i%img id=image%=i % //a'); $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); } JavaScript, event-binding does not work: --- for (i = 1; i 5; i++) { var elem = $('a id=link%=i%img id=image%=i% / /a'); $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } (also: this declaration doesn't work in JS: var elem+i = $('a id=link%=i%img id=image%=i% //a'); ^^ 'elem+i' returns a syntax error; why does this declaration 'var elem %=i%' work inJSPbut equivalent does not in JS? urls (JSPand JS) are here: http://www.mayacove.com/dev/jquery/events/test_event_dyn.htmlhttp://w... thank you very much..
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
You can't call jQuery from JSP code, only from JavaScript. Your JSP code *generates* JavaScript code, which is what actually calls jQuery. In your JSP code, the loop is run in JSP, and it generates a separate block of JavaScript code each time through the loop. Here is the actual JavaScript code it generates: $('#image1').bind('mouseover',function(event) { $('#image1').addClass('dim'); }); $('#image2').bind('mouseover',function(event) { $('#image2').addClass('dim'); }); $('#image3').bind('mouseover',function(event) { $('#image3').addClass('dim'); }); $('#image4').bind('mouseover',function(event) { $('#image4').addClass('dim'); }); You can see why that code works as expected, since each of the four blocks is completely self-contained and references the element ID you want it to use. The JavaScript code is a different story: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } Now you're running the loop *in JavaScript*. When you call .bind() each time through the loop, the variable i has the value you expect, 1 through 4 as you go through the loop. When this loop terminates, i has the value 5. Much later, when you move the mouse over one of your elements, the event callback function is called. What is the value of i now? 5. There's only a single variable called i, and it only contains one value at a time, and when the loop is finished that value is 5. Here are a couple of ways to fix it. One is to use a closure: for (i = 1; i 5; i++) setThumbMouseover( i ); function setThumbMouseover( i ) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } This code is almost identical to the original, but by calling a function each time through the loop, those function calls each have their own local variable named i. The value of each of those variables is preserved when the event handler is called later. Note that the name i inside the function is unrelated to the name i outside it. The code would work the same like this: for (i = 1; i 5; i++) setThumbMouseover( i ); function setThumbMouseover( n ) { $('#thumb' + n).bind('mouseover',function(event) { $('#thumb' + n).addClass('dim'); }); } Either way, this is a great general purpose solution for a lot of similar problems. In this particular case, you also have the option of using a simpler approach. In the event callback, this is a reference to the specific element receiving the event. So you can code it like so: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } Now there is no longer a reference to the i variable in the event callback, so you avoid the problem completely. -Mike From: kali yes I know they are two different things, I do know both JSP and JavaScript, so I do know the difference; I would like to know why what works in JSP doesn't work in JavaScript.. again: this works in JSP: % for (int i = 1; i 5; i++) { % $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); % } % but the same thing, in JavaScript, doesn't work: for (i = 1; i 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } in JavaScript this code is applied ONLY when i=5, in JSP it applies to all four elements processed in the array and works as expected ok, to make it easier, forget the comparison to JSP... why does above JavaScript code not work?? I create four elements dynamically, but event-binding does not work for any of the four elements... thank you... On Aug 28, 6:56 pm, James james.gp@gmail.com wrote: I have difficulties understanding what you're trying to achieve. As someone mentioned, Java is to Javascript as Ham is to Hamster. They're two different beasts. For the 'elem+1' situation, you can do: this['elem'+1] = '...'; to dynamically create variables. But usually you don't have to resort to doing something like that if you code things properly. On Aug 28, 12:44 pm, kali maya778...@yahoo.com wrote: hi, I have a problem with binding events to dynamically-generated elements; specif. problem is something I'm trying to do with JavaScript doesn't work but it works if I do it inJSP: (and can we PLEASE get ability to display CODE in this forum in NON-PROPORTIONAL FONT???) JSP, event-binding works: % for (int i = 1; i 5; i++) { % var elem%=i% = $('a id=link%=i%img id=image%=i % //a'); $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); } JavaScript,
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
I have difficulties understanding what you're trying to achieve. As someone mentioned, Java is to Javascript as Ham is to Hamster. They're two different beasts. For the 'elem+1' situation, you can do: this['elem'+1] = '...'; to dynamically create variables. But usually you don't have to resort to doing something like that if you code things properly. On Aug 28, 12:44 pm, kali maya778...@yahoo.com wrote: hi, I have a problem with binding events to dynamically-generated elements; specif. problem is something I'm trying to do with JavaScript doesn't work but it works if I do it in JSP: (and can we PLEASE get ability to display CODE in this forum in NON-PROPORTIONAL FONT???) JSP, event-binding works: % for (int i = 1; i 5; i++) { % var elem%=i% = $('a id=link%=i%img id=image%=i % //a'); $('#image%=i%').bind('mouseover',function(event) { $('#image%=i%').addClass('dim'); }); } JavaScript, event-binding does not work: --- for (i = 1; i 5; i++) { var elem = $('a id=link%=i%img id=image%=i% / /a'); $('#thumb' + i).bind('mouseover',function(event) { $('#thumb' + i).addClass('dim'); }); } (also: this declaration doesn't work in JS: var elem+i = $('a id=link%=i%img id=image%=i% //a'); ^^ 'elem+i' returns a syntax error; why does this declaration 'var elem %=i%' work in JSP but equivalent does not in JS? urls (JSP and JS) are here: http://www.mayacove.com/dev/jquery/events/test_event_dyn.htmlhttp://www.mayacove.com/dev/jquery/events/test_event_dyn.jsp thank you very much..