[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..
