[jQuery] Attaching events to dynamic DOM IDs
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the jqmShow method
work? It appears as though the code that gets executed is dynamic.
In other words, when the click event occurs JavaScript looks up the
code as it was at the end of its execution, when variable i is 30,
instead of remembering that at one point it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30 click events?
[jQuery] Re: Attaching events to dynamic DOM IDs
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
jQuery('#' + this.id+ '_modal').jqmShow();
});
}
maybe it works this way
2007/12/22, Rabbit [EMAIL PROTECTED]:
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the jqmShow method
work? It appears as though the code that gets executed is dynamic.
In other words, when the click event occurs JavaScript looks up the
code as it was at the end of its execution, when variable i is 30,
instead of remembering that at one point it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30 click events?
[jQuery] Re: Attaching events to dynamic DOM IDs
As an alternative to the other solution you posted, here is how you can do
it with code more like the code below:
for(var i = 0; i 30; i++)
clicker( i );
function clicker( i ) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
As you can see, all I changed was to put your code inside a function and
call that function 30 times.
Why did your original code show i is 30 for each element? Because there is
only a single variable i, and when you call console.log it's using the
current value of i - not the value that i had at the time you added the
click event.
By moving this code into a function, a new variable i is created each time
the function is called. You no longer have all the code sharing a single
variable - each instance of the function gets its own.
-Mike
From: Rabbit
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the
jqmShow method work? It appears as though the code that gets
executed is dynamic.
In other words, when the click event occurs JavaScript looks
up the code as it was at the end of its execution, when
variable i is 30, instead of remembering that at one point
it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30
click events?
[jQuery] Re: Attaching events to dynamic DOM IDs
On Dec 22, 12:55 am, Michael Geary [EMAIL PROTECTED] wrote:
By moving this code into a function, a new variable i is created each time
the function is called. You no longer have all the code sharing a single
variable - each instance of the function gets its own.
Ah, brilliant. I see that distinction/technique used a lot in jQuery.
The fact that methods are first-class objects is incredibly powerful;
I have yet to fully utilize it. Thanks for the help, Michael. :)
---
On Dec 22, 12:55 am, Michael Geary [EMAIL PROTECTED] wrote:
As an alternative to the other solution you posted, here is how you can do
it with code more like the code below:
for(var i = 0; i 30; i++)
clicker( i );
function clicker( i ) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
As you can see, all I changed was to put your code inside a function and
call that function 30 times.
Why did your original code show i is 30 for each element? Because there is
only a single variable i, and when you call console.log it's using the
current value of i - not the value that i had at the time you added the
click event.
By moving this code into a function, a new variable i is created each time
the function is called. You no longer have all the code sharing a single
variable - each instance of the function gets its own.
-Mike
From: Rabbit
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the
jqmShow method work? It appears as though the code that gets
executed is dynamic.
In other words, when the click event occurs JavaScript looks
up the code as it was at the end of its execution, when
variable i is 30, instead of remembering that at one point
it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30
click events?
[jQuery] Re: clicking on row vs. clicking on link in that row
While returning false will stop the event from propagating, it will also
prevent the default action from occurring, which isn't necessarily
desirable. In this case it might not matter, but in general,
event.stopPropagation() is the right way to stop the event from
propagating. Returning false does both event.stopPropagation() and
event.preventDefault().
--Erik
On 12/21/07, Shawn [EMAIL PROTECTED] wrote:
You probably need to return false from your click handlers
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
return false;
});
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
return false;
});
That *should* take care of things for you...
Shawn
rolfsf wrote:
I've set up a simple action when a user clicks on a row in a table.
(highlight the row, load some details via ajax into a div)
However, in one column of the table I've got a link/button that, when
clicked, will hide that row. If clicked, I don't want to highlight the
row
or load it's details. How do I distinguish between the two?
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
});
// hide a row after acknowledgement
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
});
thanks,
r.
[jQuery] Re: jQueryish for Effect.CashRegister()
On Dec 19, 5:53 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Glen Lipka put together something that was similar (but way cooler) a while ago. Glen, do you still have that somewhere on your site? snip Thanks for the info, but I still don't find it anywhere in http://www.commadot.com/jquery/ -- ?php echo 'Just another PHP saint'; ? Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com
[jQuery] Re: clicking on row vs. clicking on link in that row
Understood.
I read the issue to be that when he clicked the link the row was
highlighting. Whereas he wants to do something specific when the on the
link click, but highlight the row when the row is clicked. In which
case both click events need to be independant (i.e. end). The
stopPropagation() will do the trick, but I find a simple return false
is easier for folks to understand. Especially those who do not really
understand or have experience with event bubbling.
But I think we are both right. :)
Shawn
Erik Beeson wrote:
While returning false will stop the event from propagating, it will also
prevent the default action from occurring, which isn't necessarily
desirable. In this case it might not matter, but in general,
event.stopPropagation () is the right way to stop the event from
propagating. Returning false does both event.stopPropagation() and
event.preventDefault().
--Erik
On 12/21/07, * Shawn* [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
You probably need to return false from your click handlers
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
return false;
});
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
return false;
});
That *should* take care of things for you...
Shawn
rolfsf wrote:
I've set up a simple action when a user clicks on a row in a table.
(highlight the row, load some details via ajax into a div)
However, in one column of the table I've got a link/button that, when
clicked, will hide that row. If clicked, I don't want to
highlight the row
or load it's details. How do I distinguish between the two?
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
});
// hide a row after acknowledgement
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
});
thanks,
r.
[jQuery] Re: clicking on row vs. clicking on link in that row
You could use the hover() method, instead of the separate mouseover()
and mouseout() methods. And you could also use the .toggleClass method
instead of the addClass() and removeClass() methods.
Larry
On Dec 21, 4:55 pm, rolfsf [EMAIL PROTECTED] wrote:
I've set up a simple action when a user clicks on a row in a table.
(highlight the row, load some details via ajax into a div)
However, in one column of the table I've got a link/button that, when
clicked, will hide that row. If clicked, I don't want to highlight the row
or load it's details. How do I distinguish between the two?
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
});
// hide a row after acknowledgement
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
});
thanks,
r.
--
View this message in
context:http://www.nabble.com/clicking-on-row-vs.-clicking-on-link-in-that-ro...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] MSIE 7.0 and slide() function...
Hi :)
I'm working on my website, just to practice a bit with jquery.
I have a problem here:
http://www.andreavarnier.com/temp
menu code is like this
ul id=menu
li id=herea href=index.htmlHome/a/li
li class=open_suba href=#Musica/a
ul class=sub
lia href=audio.htmlaudio/a/li
lia href=spartiti.htmlspartiti/a/li
lia href=lezioni.htmllezioni/a/li
/ul
/li
li class=open_suba href=#Andrea/a
ul class=sub
lia
href=curriculum.htmlcurriculum/a/li
lia href=foto.htmlfoto/a/li
lia href=video.htmlvideo/a/li
/ul
/li
lia href=guestbook/Guestbook/a/li
lia href=links.htmlLinks/a/li
lia href=contatti.htmlContatti/a/li
/ul
and the js I'm using is fairly simple:
$(document).ready(function(){
$(.sub).css(display, none);
$(.open_sub).click(function(){
var f = $(.open_sub).not(this);
f.children(ul.sub:visible).slideUp();
f.removeClass(active);
var t = $(this);
t.children(ul.sub).slideToggle();
t.toggleClass(active);
});
});
with Internet Explorer 7 the submenus do not disappear until the
slide() effect is over.
this means the li's are overlapping each other.
is there a known workaround? I searched this mailing list but I didn't
find anything...
thank you in advance :)
andrea
[jQuery] Re: Superfish menu extremely slow/clunky in IE6 with wordpress
The HTML is created from your PHP files on the server, but by the time the browser sees it it will just be regular static HTML, so you you can just copy and paste from View Source and save it as a HTML file. If you can do that then the file should just run from the file system (ie. without a server). You may need to make sure the paths to the CSS and JS files work relative to the HTML file. This will make it easy for me to have a look at your problem and change things I need to in order to debug what is going on. Cheers Joel Birch.
[jQuery] Re: form submission and error messages: what's your approach?
Hi jj, I think there are quite a number of reasonable approaches. Jörn's validation plugin can help quite a bit: http://jquery.com/plugins/project/validate Here is a simple contact form with some immediate feedback validation that Jonathan Chaffer and I put together for our book: http://book.learningjquery.com/bookstore/contact/ It has server-side validation for those occasions when JavaScript is not available, but uses jQuery to progressively enhance the user experience. Feel free to use any parts of the script you want. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Dec 21, 2007, at 8:34 PM, jjshell wrote: Hi, Initiating myself to Ajax, I cam to wonder one important thing: How do you guys handle error messages in the context of a form submission? So far, I have always proceded like this: The fields are treated server-side. If a problem is detected, I return the page to Client (with persistant content relying on session) with: 1. One general error message (ex:an error occured) 2. Next to each problematic field, a specific error message. Now that I am ajaxing my forms, what approaches would you recommand? How do you do that? What is the jQuery mentality? Regards, -jj.
[jQuery] Re: Announcing jQuery HowTo's
Hi Shawn, This sounds like it could be a terrific addition to the available jQuery resources. Thanks! --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Dec 21, 2007, at 2:50 AM, Shawn wrote: In a recent thread (http://groups.google.com/group/jquery-en/browse_thread/thread/acfe180142e9668a/0453acd9acf83754?lnk=gstq=New+jQuery+release#0453acd9acf83754 ) the need for volunteer help with the documentation was discussed. I posted a suggestion that maybe a how-to type of document may help those who do not like the reference style of the official docs. I took a look at adding to the wiki, but don't know the syntax/formatting needed (yet). But I wanted to do something about this idea while it was more or less fresh in my head. So, I slapped together a quick Drupal site under a sub-domain to my own domain, and started typing. Actually, I had started typing first, but quickly realized that an approach was needed to allow the community to offer feedback and/or help out. So, a Drupal site sounded perfect for this - for now at least. So, the site is at http://jquery.open2space.com I have some basic items in there right now, and am planning on extending the how-to's as I have time. But I'm only one person and the areas I think would be helpful may be only a small subset of what everyone else thinks is helpful. So feel free to create an account and help out. The actual how-to's are at http://jquery.open2space.com/howto. And if you'd like to contribute, I have some quick instructions and guidelines at http://jquery.open2space.com/node/2. Logged in users can also blog about their jQuery experiences if they'd like. This is a bit of an experiment for me (the community driven site that is). I'd like to see the community grow this idea, and even better - make it so popular that it makes sense to roll back into the official jQuery site. :) My thoughts right now is that this site become a jQuery learning center, with links to pertinent books and blogs, and other resources for learning jQuery. (Yep I have the Learning jQuery blog in the feeds.. any others that should be there? :) Any suggestions on making the site better are much appreciated. And thanks to everyone who helped me get as far in my own understanding of jQuery! Shawn Grover
[jQuery] Job offer - please ignore if not interested
Hi, I'm working for a London, UK based internet startup and we're looking for talented javascript developers, remote working is fine please contact me for more details if interested. Thanks, Paul.
[jQuery] Re: Problems with clueTip
Hello,
first: thanks :)
It doesn't work still ... it shows the tooltip without an title and
with [Object object] as content ... in IE7 and IE6 it doesnt show any
tooltip ... :(
On 21 Dez., 19:31, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi firstlor,
I think the problem in your situation might be that you're setting the
clueTip to use both the title attribute ( using splitTitle: '|' ) and
the local element ( using local: true ). I cleaned up your options
map, removing redundant or conflicting options. Please try this
version and let me know if you still experience the problem:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or 'slideDown' or
'fadeIn'
openSpeed: ''
},
local: true,
hideLocal: true,
});
/
Here are the options that I removed:
hoverIntent: false, // -- you later set hoverIntent with the
default settings
//sticky: true, // -- this is commented out anyway
//mouseOutClose: true, // -- this is commented out anyway
closePosition: 'title', // -- since sticky: true is
commented out,
this is no longer necessary
closeText: 'img src=\img/delete.gif\ alt=\Schließen\
/', //
-- since sticky: true is commented out, this is no longer necessary
splitTitle: '|', // -- ** this one is probably the
option that
is causing your problems
positionBy: 'auto', // -- this is 'auto' by default, so
unnecessary
hoverIntent: {, // -- these are the hoverIntent defaults, so
unnecessary
sensitivity: 3,
interval: 50,
timeout: 0
},
/
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 21, 2007, at 7:45 AM, firstlor wrote:
Hello,
I want to use cluetip for displaying tooltips :) If I do it like that,
everything works fine:
[code]
JS:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
//sticky: true,
//mouseOutClose: true,
closePosition: 'title',
closeText: 'img src=\img/delete.gif\ alt=\Schließen\ /',
splitTitle: '|',
positionBy: 'auto',
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or 'slideDown' or
'fadeIn'
openSpeed: ''
},
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
});
HTML:
a class=help title=Löschen|Diesen Bereich und alle darin
enthaltenen Beiträge löschen href=...img src=img/delete.gif
border=0 //a
[/code]
But if I want to use te same content quite often, I want to use the
content from a hidden p, so I used the following:
[code]
Js:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
//sticky: true,
//mouseOutClose: true,
closePosition: 'title',
closeText: 'img src=\img/delete.gif\ alt=\Schließen\ /',
splitTitle: '|',
positionBy: 'auto',
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or 'slideDown' or
'fadeIn'
openSpeed: ''
},
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
local: true,
hideLocal: true,
});
HTML:
a class=help rel=#loadme1 href=...img src=img/delete.gif
border=0 //a
p style=display: none id=loadme1Löschen|Diesen Bereich und alle
darin enthaltenen Beiträge löschen/p
[/code]
But that doesn't work :( Why, what's wrong with it??
Thanks!
[jQuery] Avoid double submit by disabling submit button causes problem in IE
Hello,
I want to avoid double submitting, so I have the following code:
$(function() {
$(input[type='submit']).click(function() {
$(input[type='submit']).attr('disabled', true);
});
});
In FF, it works pretty nice, but in IE 6 and IE 7, the submit buttons
gets disabled but the form is not submitted ... What's wrong with it? Do
you have any better solution?
Thanks!
[jQuery] Problem with Cluetip and Link to delete
Hello,
I have the following code:
JS:
$(document).ready(function() {
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
leftOffset: 20,
fx: {
open: 'fadeIn',
openSpeed: ''
},
local: true,
hideLocal: true,
});
});
HTML:
a class=help rel=#loadme1 href=?cmd=delete_beitragbid=150
onclick=return confirm('Diesen Beitrag wirklich löschen?');img
src=img/delete.gif border=0 //a
[...]
p style=display: none id=loadme1Löschen|Diesen Bereich löschen/p
If I click the link, a message prompt comes up and if I click abort,
the link is executed anyway even though it should not be executed ;)
What's the problem?
Thanks!
[jQuery] Re: Announcing jQuery HowTo's
The tips triicks I was thinking of would be of the short and sweet varietiy, where they could all be printed out on a page or two. For example, easier ways to select elements. The longer, more complicated stuff would be more suited to a blog, of course, like what Learning jQuery does. Larry Shawn wrote: Thanks Larry. My thought on the Tips/Tricks section was that this would likely be handled in the user Blogs. A Tip/Trick might be something very simple, but could also be a detailed description of doing something more complex. I personally have some techniques I've worked out that I want to blog about, but they don't fit in the HowTo class... I'm not against creating a Tips/Tricks section though. So if we get a few HowTo's or blogs that would fit there, we'll do so.. :) Shawn McLars wrote: So, again, I think you have a fantastic idea there. I really hope it takes off, and I, too, would love to see this added to the jQuery site. Don't worry about repeating information that may be available elsewhere. Just focus on keeping the tasks atomic and making it super fast and well organized to find what you you need at the moment. A sugggestion would be to add a Tips Tricks section. Larry
[jQuery] Question about the mailinglist
Hello, is it possible to receive only responds to questions that I asked in the mailinglist directly? thanks :)
[jQuery] jeditable - placeholder text insert when value is 0
Placeholder text insert, regular, when element value is empty, but it's happens also, if the value is 0. Is it a bug? thanks.
[jQuery] Re: Problems with clueTip
Do you have a page that I can look at? I'm not sure what the problem
could be at this point. Have you seen the example (#6) on the demo
page that uses local content?
http://plugins.learningjquery.com/cluetip/demo/
A comparison of your attempt and the demo might help. I'd be happy to
help further, but I think I'll need more information.
--Karl
On Dec 22, 2007, at 10:19 AM, firstlor wrote:
Hello,
first: thanks :)
It doesn't work still ... it shows the tooltip without an title and
with [Object object] as content ... in IE7 and IE6 it doesnt show any
tooltip ... :(
On 21 Dez., 19:31, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi firstlor,
I think the problem in your situation might be that you're setting
the
clueTip to use both the title attribute ( using splitTitle: '|' ) and
the local element ( using local: true ). I cleaned up your options
map, removing redundant or conflicting options. Please try this
version and let me know if you still experience the problem:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or
'slideDown' or 'fadeIn'
openSpeed: ''
},
local: true,
hideLocal: true,
});
/
Here are the options that I removed:
hoverIntent: false, // -- you later set hoverIntent
with the
default settings
//sticky: true, // -- this is commented out anyway
//mouseOutClose: true, // -- this is commented out
anyway
closePosition: 'title', // -- since sticky: true is
commented out,
this is no longer necessary
closeText: 'img src=\img/delete.gif\ alt=
\Schließen\ /', //
-- since sticky: true is commented out, this is no longer necessary
splitTitle: '|', // -- ** this one is probably
the option that
is causing your problems
positionBy: 'auto', // -- this is 'auto' by
default, so unnecessary
hoverIntent: {, // -- these are the hoverIntent
defaults, so
unnecessary
sensitivity: 3,
interval: 50,
timeout: 0
},
/
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 21, 2007, at 7:45 AM, firstlor wrote:
Hello,
I want to use cluetip for displaying tooltips :) If I do it like
that,
everything works fine:
[code]
JS:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
//sticky: true,
//mouseOutClose: true,
closePosition: 'title',
closeText: 'img src=\img/delete.gif\ alt=\Schließen
\ /',
splitTitle: '|',
positionBy: 'auto',
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or 'slideDown'
or 'fadeIn'
openSpeed: ''
},
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
});
HTML:
a class=help title=Löschen|Diesen Bereich und alle darin
enthaltenen Beiträge löschen href=...img src=img/delete.gif
border=0 //a
[/code]
But if I want to use te same content quite often, I want to use the
content from a hidden p, so I used the following:
[code]
Js:
// Tipps für die Hilfen auf Icons:
$('a.help').cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
//sticky: true,
//mouseOutClose: true,
closePosition: 'title',
closeText: 'img src=\img/delete.gif\ alt=\Schließen
\ /',
splitTitle: '|',
positionBy: 'auto',
leftOffset: 20,
fx: {
open: 'fadeIn', // can be 'show' or 'slideDown'
or 'fadeIn'
openSpeed: ''
},
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
local: true,
hideLocal: true,
});
HTML:
a class=help rel=#loadme1 href=...img src=img/delete.gif
border=0 //a
p style=display: none id=loadme1Löschen|Diesen Bereich und
alle
darin enthaltenen Beiträge löschen/p
[/code]
But that doesn't work :( Why, what's wrong with it??
Thanks!
[jQuery] Re: Attaching events to dynamic DOM IDs
Hmm... I didn't realize this until I was falling asleep last night,
but what you've demonstrated is similar to a closure in Ruby, except
not. My understanding of what you said is something along the lines
of...
An argument to a method becomes a local variable in that method and is
_retained_. But, how? I get the feeling that when you pass an argument
to a method the argument gets stashed away for later, but how is it
that the correct value is recalled?
In other words, the code you presented works (I tested it), and I
understand that it does, but I don't understand how or why.
Can anyone shed some light on this?
- Daniel
---
On Dec 22, 12:55 am, Michael Geary [EMAIL PROTECTED] wrote:
As an alternative to the other solution you posted, here is how you can do
it with code more like the code below:
for(var i = 0; i 30; i++)
clicker( i );
function clicker( i ) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
As you can see, all I changed was to put your code inside a function and
call that function 30 times.
Why did your original code show i is 30 for each element? Because there is
only a single variable i, and when you call console.log it's using the
current value of i - not the value that i had at the time you added the
click event.
By moving this code into a function, a new variable i is created each time
the function is called. You no longer have all the code sharing a single
variable - each instance of the function gets its own.
-Mike
From: Rabbit
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the
jqmShow method work? It appears as though the code that gets
executed is dynamic.
In other words, when the click event occurs JavaScript looks
up the code as it was at the end of its execution, when
variable i is 30, instead of remembering that at one point
it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30
click events?
[jQuery] Re: Avoid double submit by disabling submit button causes problem in IE
You could change the submit to a button and use one() ...
For example...
jQuery(function($){
$('input.submitbutton').one('click', function(){
$(this).parents('form')[0].submit();
return false;
});
});
form
input type='button' class='submitbutton' /
/form
On Dec 22, 4:35 pm, psy* [EMAIL PROTECTED] wrote:
Hello,
I want to avoid double submitting, so I have the following code:
$(function() {
$(input[type='submit']).click(function() {
$(input[type='submit']).attr('disabled', true);
});
});
In FF, it works pretty nice, but in IE 6 and IE 7, the submit buttons
gets disabled but the form is not submitted ... What's wrong with it? Do
you have any better solution?
Thanks!
[jQuery] Re: Jquery Lightbox or Thickbox and Flickr?
ok so i just dropped the code into a site template and it seems to work fine in IE but in firefox, it displays the gallery over and over again with weird layout. can youplease take a look? the url is http://beta.asset-guardians.com/portfolio.html http://beta.asset-guardians.com/portfolio.html you can see all the code by just doign a view source. any help would be greatly appreciated! -- View this message in context: http://www.nabble.com/Jquery-Lightbox-or-Thickbox-and-Flickr--tp14418944s27240p14474371.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Just can't seem to figure way...
Nothing wrong with the code in its own right ... BUT you have the
exact same script included on your page twice so there are 2 click
handlers bound to each 'dt a', which results in the double bounce!
On Dec 22, 2:55 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Can someone look at this code.. for some reason the top expanable menu
runs Smoothly and the one below it are Choppy when they expand?
Now remember Im not really good at this... When you click on a main,
it expands and opens twice..
You can look at the issue here, the left hand sidebar is the
problem:http://www.oaklandregionalhospital.com/tests/new/index.html
Here is the code:
!--webbot bot=HTMLMarkup startspan --?xml version=1.0
encoding=utf-8?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en-us
head
STYLE type=text/css
!--
A { text-decoration:none }
--
/STYLE
titleDL Demo/title
script src=http://jquery.com/src/jquery.js;/script
script
$(document).ready(function(){
$(dd:not(:first)).hide();
$(dt a).click(function(){
$(dd:visible).slideUp(slow);
$(this).parent().next().slideDown(slow);
return false;
});
});
/script
style
body { font-family: Tahoma; font-size: 4px; }
dl { width: 200px; }
dl,dd { margin: 0; }
dt { background: #EBEBEB; font-size: 14px; padding: 5px; margin:
2px; }
dt a { color: #b2; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
/style
/head
body
dl
dta href=/Surgical Services/a/dt
dd
ul
abOrthopedic Services:/b/a/li
lia href=/docs/Reconstructive Surgery/a/li
lia href=/blog/Hand - Elbow Injuries
Conditions/a/li
lia href=/blog/Shoulder Injuries Conditions/a/li
lia href=/blog/Arthroscopic Surgery/a/li
lia href=/blog/Total Joint Replacement/a/li
lia href=/blog/Foot - Ankle Injuries
Conditions/a/li
lia href=/blog/Sports Medicine/a
liabCardiovascular Services:/b/a/li
lia href=/blog/Peripheral Angiogram/a
lia href=/blog/Endovascular Atherectomy/a
/ul
/dd
dta href=/Podiatry Wound Services/a/dt
dd
ul
lia href=/dev/Podiatry and Wound Services/a/li
/ul
dta href=/dev/Gynecological Services/a/dt
dd
ul
lia href=/src/Gynecological Services/a/li
/ul
/dd
dta href=/Imaging Services/a/dt
dd
ul
lia href=/docs/Radiology/a/li
lia href=/blog/Magnetic Resonance Imaging (MRI)/a/li
lia href=/blog/Computerized Tomography (CT)/a/li
/ul
/dd
dta href=/Rehabilitation Services/a/dt
dd
ul
lia href=/docs/Physical Therapy/a/li
lia href=/blog/Occupational Therapy/a/li
lia href=/blog/Speech Therapy/a/li
/dl
/body
/html
!--webbot bot=HTMLMarkup endspan --
[jQuery] Re: Attaching events to dynamic DOM IDs
In fact, it is a closure, and it works very much like closures in Ruby and
other languages.
Keep in mind that a JavaScript object is reference counted and remains in
existence as long as there are any references to the object. Once there are
no more references to an object, it becomes available for garbage
collection.
When you call a function, JavaScript creates a private object for that
particular call of the function. This object has properties for the
function's local variables and arguments. The object is not directly
accessible from JavaScript code, but it obeys the same garbage collection
rules as any other JavaScript object.
The function call object has one reference added when the function is
entered, and that reference is removed when the function exits. So, in the
typical case where there are no other references to the function call
object, it becomes available for garbage collection at that point.
However, if any other code holds onto a reference to the function call
object, then the object cannot be garbage collected until all of those
references are removed. Similarly, if you hold a reference to any of the
function's arguments or variables, that is also a reference to the function
call object. So as long as there are any references to the function call
object, all of that function's arguments and local variables are kept
around.
In the code I posted, the $(...).click(...) call creates a reference to the
inner anonymous function. That function in turn contains a reference to the
i variable in the outer function (the clicker function). So as long as
the click handler exists that reference to the outer function's function
call object will also exist. Therefore, all of the arguments and local
variables for that function call remain in existence.
Someone may be able to explain this better, but that's the general idea.
For more info, here are a couple of articles on JavaScript closures:
http://www.jibbering.com/faq/faq_notes/closures.html
http://blog.morrisjohns.com/javascript_closures_for_dummies
-Mike
From: Rabbit
Hmm... I didn't realize this until I was falling asleep last
night, but what you've demonstrated is similar to a closure
in Ruby, except not. My understanding of what you said is
something along the lines of...
An argument to a method becomes a local variable in that
method and is _retained_. But, how? I get the feeling that
when you pass an argument to a method the argument gets
stashed away for later, but how is it that the correct value
is recalled?
In other words, the code you presented works (I tested it),
and I understand that it does, but I don't understand how or why.
Can anyone shed some light on this?
- Daniel
---
On Dec 22, 12:55 am, Michael Geary [EMAIL PROTECTED] wrote:
As an alternative to the other solution you posted, here is how you
can do it with code more like the code below:
for(var i = 0; i 30; i++)
clicker( i );
function clicker( i ) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
As you can see, all I changed was to put your code inside a
function
and call that function 30 times.
Why did your original code show i is 30 for each element? Because
there is only a single variable i, and when you call console.log
it's using the current value of i - not the value that i had at
the time you added the click event.
By moving this code into a function, a new variable i is created
each time the function is called. You no longer have all the code
sharing a single variable - each instance of the function
gets its own.
-Mike
From: Rabbit
The following code:
for(var i = 0; i 30; i++) {
jQuery('#day_' + i).click(function() {
console.log('i is ' + i);
jQuery('#day_' + i + '_modal').jqmShow();
});
}
Runs, but always reports i is 30.
Now, I understand why it does that, but why doesn't the jqmShow
method work? It appears as though the code that gets
executed is
dynamic.
In other words, when the click event occurs JavaScript
looks up the
code as it was at the end of its execution, when variable
i is 30,
instead of remembering that at one point it was something else.
Did that make sense?
Any ideas how to get around this without typing in all 30 click
events?
[jQuery] Re: clicking on row vs. clicking on link in that row
Thanks to both of you... when I get back at this later in the week I'm going
to play with the various ideas and read up. I don't understand event
bubbling, but have heard the term enough times that I should dig in a bit.
The good (and bad) side of jquery is that I haven't had to really learn
javascript - I just jumped in. Little by little, with a little help from my
jquery friends :)
r.
Shawn-53 wrote:
Understood.
I read the issue to be that when he clicked the link the row was
highlighting. Whereas he wants to do something specific when the on the
link click, but highlight the row when the row is clicked. In which
case both click events need to be independant (i.e. end). The
stopPropagation() will do the trick, but I find a simple return false
is easier for folks to understand. Especially those who do not really
understand or have experience with event bubbling.
But I think we are both right. :)
Shawn
Erik Beeson wrote:
While returning false will stop the event from propagating, it will also
prevent the default action from occurring, which isn't necessarily
desirable. In this case it might not matter, but in general,
event.stopPropagation () is the right way to stop the event from
propagating. Returning false does both event.stopPropagation() and
event.preventDefault().
--Erik
On 12/21/07, * Shawn* [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
You probably need to return false from your click handlers
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
return false;
});
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
return false;
});
That *should* take care of things for you...
Shawn
rolfsf wrote:
I've set up a simple action when a user clicks on a row in a
table.
(highlight the row, load some details via ajax into a div)
However, in one column of the table I've got a link/button that,
when
clicked, will hide that row. If clicked, I don't want to
highlight the row
or load it's details. How do I distinguish between the two?
// highlight rows, load details
$(#myTable tr).mouseover(function() {
$(this).addClass(over);}).mouseout(function() {
$(this).removeClass(over);
}).click(function(){
$(this).addClass(thisRow).siblings().removeClass(thisRow);
var job = $(this).attr('id')
var details = (job + '.htm')
$(#console).load(details);
});
// hide a row after acknowledgement
$(#myTable a.ackn).click( function(){
$(this).parents('tr').hide();
});
thanks,
r.
--
View this message in context:
http://www.nabble.com/clicking-on-row-vs.-clicking-on-link-in-that-row-tp14464501s27240p14475498.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Filter out innerhtml of div #id
Hello,
I have a full html code in in a var:
str = 'full html code here starting with html';
and now I want to get the innerHTML of a div with an certain id. I tried
that:
$(var_name).filter('div#content').get(0).html()
but that doesn't work. What's the right way??
thanks!
[jQuery] replace missing image (onerror)
I used to add an onerror even handler to img src tags to prevent images which do not show up. Is there a way to do this in Jquery?
[jQuery] Re: Avoid double submit by disabling submit button causes problem in IE
yeah that would probably work but it would be much nicer if I wouldn't
have to do any changes in the html directly because there are really
really many forms, any advise??
shall I first replace the submit button with such a button and than
use your code or is this a rather dirty way to do it and is there a
better one?
On 23 Dez., 00:31, Wizzud [EMAIL PROTECTED] wrote:
You could change the submit to a button and use one() ...
For example...
jQuery(function($){
$('input.submitbutton').one('click', function(){
$(this).parents('form')[0].submit();
return false;
});
});
form
input type='button' class='submitbutton' /
/form
On Dec 22, 4:35 pm, psy* [EMAIL PROTECTED] wrote:
Hello,
I want to avoid double submitting, so I have the following code:
$(function() {
$(input[type='submit']).click(function() {
$(input[type='submit']).attr('disabled', true);
});
});
In FF, it works pretty nice, but in IE 6 and IE 7, the submit buttons
gets disabled but the form is not submitted ... What's wrong with it? Do
you have any better solution?
Thanks!
[jQuery] Re: MSIE 7.0 and slide() function...
Have you tried the Acordian control? It seems like that does what you
want.
On Dec 22, 1:52 am, andrea varnier [EMAIL PROTECTED] wrote:
Hi :)
I'm working on my website, just to practice a bit with jquery.
I have a problem here:http://www.andreavarnier.com/temp
menu code is like this
ul id=menu
li id=herea href=index.htmlHome/a/li
li class=open_suba href=#Musica/a
ul class=sub
lia href=audio.htmlaudio/a/li
lia href=spartiti.htmlspartiti/a/li
lia href=lezioni.htmllezioni/a/li
/ul
/li
li class=open_suba href=#Andrea/a
ul class=sub
lia
href=curriculum.htmlcurriculum/a/li
lia href=foto.htmlfoto/a/li
lia href=video.htmlvideo/a/li
/ul
/li
lia href=guestbook/Guestbook/a/li
lia href=links.htmlLinks/a/li
lia href=contatti.htmlContatti/a/li
/ul
and the js I'm using is fairly simple:
$(document).ready(function(){
$(.sub).css(display, none);
$(.open_sub).click(function(){
var f = $(.open_sub).not(this);
f.children(ul.sub:visible).slideUp();
f.removeClass(active);
var t = $(this);
t.children(ul.sub).slideToggle();
t.toggleClass(active);
});
});
with Internet Explorer 7 the submenus do not disappear until the
slide() effect is over.
this means the li's are overlapping each other.
is there a known workaround? I searched this mailing list but I didn't
find anything...
thank you in advance :)
andrea
[jQuery] $_POST variables not passed to PHP script processing form
Ultimately I want this form to upload a file to a server location
based on the additional form fields on the server. I started with
sample code that I found querying jquery file upload. Originally
echo.php contained two var_dump statements - one for $_POST and the
other for $_FILES. That works fine and echos the data back in the
output div on the form page.
Once I got the form working as intended I replaced the var_dump
statements with explicit references to the $_POST variables. The
problem now is that I cannot reference the $_POST variables explicitly
(e.g. $_POST['clientID']).
Can someone please tell me what is wrong?
Thank you!
Tim
Test URL using echo.php shown below is -
http://projects.missioninternet.com/proweb/admin/test.php.
Test URL using echo1.php with var_dump statements -
http://projects.missioninternet.com/proweb/admin/test1.php.
My current echo.php is copied below the form code.
form page code excerpt:
script type=text/javascript src=../scripts/jquery/
jquery-1.2.1.js/script
script type=text/javascript src=../scripts/jquery/
jquery.blockUI.js/script
script type=text/javascript src=../scripts/firebug/firebug.js/
script
script type=text/javascript src=../scripts/jquery/
jquery.form.js/script
script type=text/javascript
$(function() {
$('form').ajaxForm({
beforeSubmit: clearOutput,
success: writeOutput
});
});
$().ajaxError(function(ev, opts, xhr, msg, ex) {
//window.console.error(msg + ': ' + ex);
alert(msg + ': ' + ex);
});
// blockUI activity indicator
$.extend($.blockUI.defaults.overlayCSS, { backgroundColor:
'#E6E6E6' });
$.blockUI.defaults.pageMessage = 'img src=../images/loading.gif /
Running...';
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);
// pre-submit callback
function clearOutput(a, f, o) {
$('#output').empty();
}
// success callback
function writeOutput(data) {
var $out = $('#output');
$out.append('divpre'+ data +'/pre/div');
}
/script
/head
body
form id=test1 action=echo.php method=POST enctype=multipart/
form-data
?php
echo select name='targetClient' tabindex='1';
echo option value=''Select client/option;
$sql = SELECT `clientID`, `companyName` FROM . $clientsTable
. WHERE `clientID` 1 ORDER BY `companyName`;
$result = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
echo option value='
. $row['clientID']
. '
. $row['companyName']
. /option;
}
echo /selectbr;
?
select name=docType tabindex=2
option value=Select Type of Document/option
option value=invoicesInvoice/option
option value=reportsReport/option
/select
input type=hidden name=MAX_FILE_SIZE value=10 /
input type=file name=fileName tabindex=3br
input name=upload type=submit value=Upload File
tabindex=4br
/form
div id=output/div
echo.php:
?php
$clientID = $_REQUEST['clientID'];
require_once('../Connections/prowebDB.php');
$sql = SELECT `companyName` FROM . $clientsTable
. WHERE `clientID` = . $clientID;
echo sql = . $sql . br;
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_assoc($result);
echo basename($_FILES['userfile']['name']) . was copied to .
$row['companyName'] . . $_POST['docType'];
mysql_free_result($result);
?
[jQuery] Re: Question about the mailinglist
I mean, I don't want to get only one mail a day or always, when somebody writes something but always, when somebody writes an answer to one of my topics :) On 22 Dez., 17:48, psy* [EMAIL PROTECTED] wrote: Hello, is it possible to receive only responds to questions that I asked in the mailinglist directly? thanks :)
[jQuery] bind and unbind click event
I'm trying to add functionality that toggles an image on click event,
inserts row into db and binds a new event which removes the row on
click event.
this works but i was wonder if there is a more elegant method:
add_imgoing = function() {
$(\'.add_imgoing\').click(function () {
var show_id = $(this).attr(\'id\');
var user_id = '.PA::$login_uid.';
$(this).attr({ src: \'Themes/Beta/images/button-remove.jpg\' });
$(this).removeClass(\'imgoing\').addClass(\'remove_imgoing\');
$(this).unbind(\'click\');
$.get(\'ajax/add_user_show.php\',{ user_id: user_id, show_id:
show_id },remove_imgoing);
});
}
remove_imgoing = function() {
$(\'.remove_imgoing\').click(function () {
var show_id = $(this).attr(\'id\');
var user_id = '.PA::$login_uid.'
$(this).attr({ src: \'Themes/Beta/images/button-imgoing.jpg\' });
$(this).removeClass(\'remove_imgoing\').addClass(\'imgoing\');
$(this).unbind(\'click\');
$.get(\'ajax/remove_user_show.php\', { user_id: user_id, show_id:
show_id },add_imgoing);
});
}
[jQuery] general unique id for new append element
hello everyone i want to know a way to general unique id for new append element. like EXT's .id(); thanks~~
