[jQuery] Re: Finding a parent list item.
In the interest of teaching a man to fish:
1. Install firebug from www.getfirebug.com
2. Turn it on by right clicking the small grey icon in the lower right
corner - status bar.
3. Download this and include it in your scripts:
http://jqueryjs.googlecode.com/svn/trunk/plugins/debug/
4. Switch to the console tab, which is where you will see debugging
output and use the jquery code below.
You can use console.log(any element or selector) (console.log($
('input')) for example) to see exactly what a selector is doing, but
debug() makes it easier. Just insert it anywhere in your chains.
What you're going to find is that jquery is picking up the file field
correctly. In firefox, though, the focus event does not get triggered
until you focus the browse button or click on the label. The text
field doesn't trigger it which I find very odd, but at least now you
can see what you're dealing with.
$(document).ready(function(){
$(ul.form).find(:input).debug()
.focus
(
function()
{
$(this).parents('li').debug().addClass('odd');
}
)
.blur
(
function()
{
$(this).parents('li').removeClass('odd');
}
);
});
On May 25, 9:31 pm, fambizzari [EMAIL PROTECTED] wrote:
Unfortunately, whilst i still don't understand how to use firefbug, i
can say for sure that none of the 3 ideas (i.e. input,
[EMAIL PROTECTED] or .pickme) work when it comes to the type=file
input.
As mentioned before, when i remove type=file from the input, then
the code works fine and the page validates 100 % as strict xhtml.
This is the exact html:
ul class=form
li
label for=title_newTitle/label
div class=input
input name=title_new id=title_new/
/div
/li
li
label for=message_newMessage/label
div class=input
textarea name=message_new
id=message_new/textarea
/div
/li
li
label for=attachment_newAttachment/label
div class=input
input type=file name=attachment_new
id=attachment_new/
/div
/li
/ul
And this is the exact script:
$(function()
{
$(ul.form).find(input,select,textarea,option)
.focus
(
function()
{
$(this).parents('li').addClass('odd');
}
)
.blur
(
function()
{
$(this).parents('li').removeClass('odd');
}
);
});
And i'm using FireFox 2.0.0.3 on a Windows XP
UPDATE: Having typed in the last line regarding my system, i thought
to try this out on other browsers:
- IE7 - works perfectly fine
- Opera 9.1 9.21 - works perfectly fine
- Netscape - it doesn't work as described above
- Firefox 2.0.0.3 - it doesn't work as described above
Any ideas?
[jQuery] Re: Finding a parent list item.
Thanks for getting back to me.
You're right - FireFox is triggering the focus event when focusing on
the browse button (although not the label).
Any solution to this? I've tried modifying the code to:
$(function()
{
$(ul.form li)
.focus
(
function()
{
$(this).addClass('odd');
}
)
.blur
(
function()
{
$(this).removeClass('odd');
}
);
});
But this doesn't work at all.
Thanks for your help.
Daemach wrote:
In the interest of teaching a man to fish:
1. Install firebug from www.getfirebug.com
2. Turn it on by right clicking the small grey icon in the lower right
corner - status bar.
3. Download this and include it in your scripts:
http://jqueryjs.googlecode.com/svn/trunk/plugins/debug/
4. Switch to the console tab, which is where you will see debugging
output and use the jquery code below.
You can use console.log(any element or selector) (console.log($
('input')) for example) to see exactly what a selector is doing, but
debug() makes it easier. Just insert it anywhere in your chains.
What you're going to find is that jquery is picking up the file field
correctly. In firefox, though, the focus event does not get triggered
until you focus the browse button or click on the label. The text
field doesn't trigger it which I find very odd, but at least now you
can see what you're dealing with.
$(document).ready(function(){
$(ul.form).find(:input).debug()
.focus
(
function()
{
$(this).parents('li').debug().addClass('odd');
}
)
.blur
(
function()
{
$(this).parents('li').removeClass('odd');
}
);
});
On May 25, 9:31 pm, fambizzari [EMAIL PROTECTED] wrote:
Unfortunately, whilst i still don't understand how to use firefbug, i
can say for sure that none of the 3 ideas (i.e. input,
[EMAIL PROTECTED] or .pickme) work when it comes to the type=file
input.
As mentioned before, when i remove type=file from the input, then
the code works fine and the page validates 100 % as strict xhtml.
This is the exact html:
ul class=form
li
label for=title_newTitle/label
div class=input
input name=title_new id=title_new/
/div
/li
li
label for=message_newMessage/label
div class=input
textarea name=message_new
id=message_new/textarea
/div
/li
li
label for=attachment_newAttachment/label
div class=input
input type=file name=attachment_new
id=attachment_new/
/div
/li
/ul
And this is the exact script:
$(function()
{
$(ul.form).find(input,select,textarea,option)
.focus
(
function()
{
$(this).parents('li').addClass('odd');
}
)
.blur
(
function()
{
$(this).parents('li').removeClass('odd');
}
);
});
And i'm using FireFox 2.0.0.3 on a Windows XP
UPDATE: Having typed in the last line regarding my system, i thought
to try this out on other browsers:
- IE7 - works perfectly fine
- Opera 9.1 9.21 - works perfectly fine
- Netscape - it doesn't work as described above
- Firefox 2.0.0.3 - it doesn't work as described above
Any ideas?
[jQuery] Re: Finding a parent list item.
i think is that
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parent().addClass(on);
}
)
.blur
(function()
{
this.parent().removeClass();
}
);
});
On 5/25/07, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
[]´s Jean
www.suissa.info
Ethereal Agency
www.etherealagency.com
[jQuery] Re: Finding a parent list item.
Daemach2's solustion would do it, and if your li elements are nested
inside other li elements, you may wish to restrict the parents() method to
match only the first li up the tree by using
$(this).parents('li:first').addClass('on'); instead, that way you won't set
addClass('on') for more than one li
George
Daemach2 wrote:
You should be able to do:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
$(this).parents('li').addClass('on');
}
)
.blur
(function()
{
$(this).parents('li').removeClass('on');
}
);
});
On May 24, 9:48 pm, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
View this message in context:
http://www.nabble.com/Finding-a-parent-list-item.-tf3814215s15494.html#a10798868
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Finding a parent list item.
Thanks Guys.
Most helpful
On May 25, 11:32 am, George Adamson [EMAIL PROTECTED]
wrote:
Daemach2's solustion would do it, and if your li elements are nested
inside other li elements, you may wish to restrict the parents() method to
match only the first li up the tree by using
$(this).parents('li:first').addClass('on'); instead, that way you won't set
addClass('on') for more than one li
George
Daemach2 wrote:
You should be able to do:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
$(this).parents('li').addClass('on');
}
)
.blur
(function()
{
$(this).parents('li').removeClass('on');
}
);
});
On May 24, 9:48 pm, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
View this message in
context:http://www.nabble.com/Finding-a-parent-list-item.-tf3814215s15494.htm...
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Finding a parent list item.
Try $(fieldset).find(:input) to grab all form fields. (http://
docs.jquery.com/DOM/Traversing/Selectors)
If that doesn't work, [EMAIL PROTECTED] should pick it up.
On May 25, 9:08 am, fambizzari [EMAIL PROTECTED] wrote:
Unfortunately, whilst your suggestions work excellently, the following
piece of code:
$(fieldset).find(input,select,textarea,option)
does not work with
input type=file/
Any idea what i should do to fix it?
On May 25, 3:50 pm, fambizzari [EMAIL PROTECTED] wrote:
Thanks Guys.
Most helpful
On May 25, 11:32 am, George Adamson [EMAIL PROTECTED]
wrote:
Daemach2's solustion would do it, and if your li elements are nested
inside other li elements, you may wish to restrict the parents() method
to
match only the first li up the tree by using
$(this).parents('li:first').addClass('on'); instead, that way you won't
set
addClass('on') for more than one li
George
Daemach2 wrote:
You should be able to do:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
$(this).parents('li').addClass('on');
}
)
.blur
(function()
{
$(this).parents('li').removeClass('on');
}
);
});
On May 24, 9:48 pm, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new
id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
View this message in
context:http://www.nabble.com/Finding-a-parent-list-item.-tf3814215s15494.htm...
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Finding a parent list item.
I've tried
- $(ul.form).find(input,select,textarea,option,[EMAIL PROTECTED])
and
- $(ul.form).find(:input)
And neither of those work!!!
I've removed file=type from the input just to make sure that is the
problem and everything works fine if its gone.
Any more ideas?
On May 25, 7:14 pm, Daemach [EMAIL PROTECTED] wrote:
Try $(fieldset).find(:input) to grab all form fields. (http://
docs.jquery.com/DOM/Traversing/Selectors)
If that doesn't work, [EMAIL PROTECTED] should pick it up.
On May 25, 9:08 am, fambizzari [EMAIL PROTECTED] wrote:
Unfortunately, whilst your suggestions work excellently, the following
piece of code:
$(fieldset).find(input,select,textarea,option)
does not work with
input type=file/
Any idea what i should do to fix it?
On May 25, 3:50 pm, fambizzari [EMAIL PROTECTED] wrote:
Thanks Guys.
Most helpful
On May 25, 11:32 am, George Adamson [EMAIL PROTECTED]
wrote:
Daemach2's solustion would do it, and if your li elements are nested
inside other li elements, you may wish to restrict the parents()
method to
match only the first li up the tree by using
$(this).parents('li:first').addClass('on'); instead, that way you won't
set
addClass('on') for more than one li
George
Daemach2 wrote:
You should be able to do:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
$(this).parents('li').addClass('on');
}
)
.blur
(function()
{
$(this).parents('li').removeClass('on');
}
);
});
On May 24, 9:48 pm, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new
id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
View this message in
context:http://www.nabble.com/Finding-a-parent-list-item.-tf3814215s15494.htm...
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Finding a parent list item.
Hmm - input should get it by itself I would think. Are you certain
it's not picking up the file field? Use firebug and console.log($
('input'));
The fastest solution may be to add a class to all of the elements you
want to select and use that instead. ('input.pickme'). When I get
back in I'll have to test a file field.
On May 25, 9:24 am, fambizzari [EMAIL PROTECTED] wrote:
I've tried
- $(ul.form).find(input,select,textarea,option,[EMAIL PROTECTED])
and
- $(ul.form).find(:input)
And neither of those work!!!
I've removed file=type from the input just to make sure that is the
problem and everything works fine if its gone.
Any more ideas?
On May 25, 7:14 pm, Daemach [EMAIL PROTECTED] wrote:
Try $(fieldset).find(:input) to grab all form fields. (http://
docs.jquery.com/DOM/Traversing/Selectors)
If that doesn't work, [EMAIL PROTECTED] should pick it up.
On May 25, 9:08 am, fambizzari [EMAIL PROTECTED] wrote:
Unfortunately, whilst your suggestions work excellently, the following
piece of code:
$(fieldset).find(input,select,textarea,option)
does not work with
input type=file/
Any idea what i should do to fix it?
On May 25, 3:50 pm, fambizzari [EMAIL PROTECTED] wrote:
Thanks Guys.
Most helpful
On May 25, 11:32 am, George Adamson [EMAIL PROTECTED]
wrote:
Daemach2's solustion would do it, and if your li elements are nested
inside other li elements, you may wish to restrict the parents()
method to
match only the first li up the tree by using
$(this).parents('li:first').addClass('on'); instead, that way you
won't set
addClass('on') for more than one li
George
Daemach2 wrote:
You should be able to do:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
$(this).parents('li').addClass('on');
}
)
.blur
(function()
{
$(this).parents('li').removeClass('on');
}
);
});
On May 24, 9:48 pm, fambizzari [EMAIL PROTECTED] wrote:
Hi everyone,
Imagine the following HTML scenario:
li
label for=title_newTitle/label
div class=inputinput name=title_new
id=title_new//div
/li
li
label for=message_newMessage/label
div class=input
div
div
div
input name=message_new
id=message_new/
/div
/div
/div
/div
/li
How could i modify the following jquery code so that it effects the
parent li and and not the parent node:
$(function()
{
$(fieldset).find(input,select,textarea,option).focus
(function()
{
this.parentNode.className = on;
}
)
.blur
(function()
{
this.parentNode.className = ;
}
);
});
I hope that makes sense.
--
View this message in
context:http://www.nabble.com/Finding-a-parent-list-item.-tf3814215s15494.htm...
Sent from the JQuery mailing list archive at Nabble.com.
