[jQuery] Re: Getting Parent Element using this
If there is as little control over the markup as is implied then a
more generic solution might be applicable (untested!)?
function updateQuote(el){
//$('form') could be cached, and may not need to store parentForm...
var parentForm = $('form').filter(function(){
var i = this.elements.length;
while((i--) this.elements[i] !== el){}
return (i = 0);
});
parentForm.attr('action', ''); //whatever...
}
select onchange='updateQuote(this);'
Since there seems to be concern over HTML changing (without due care
and attention?) then it's possible that the structure could be changed
to place the select within one (or more) tables within the form, or
even just to make the markup valid!, which would nullify one or other
function call in parents('table:first').children('form:first').
One can only go so far, to protect other people from themselves.
On May 9, 1:54 am, Michael Geary [EMAIL PROTECTED] wrote:
With markup as invalid as that, it's no surprise that elements are not where
you expect them in to be in the DOM. A FORM element can't be sandwiched in
between a TABLE and TR like that. So the browser tries to turn this into
something it can work with. It may shuffle things around, or just put up
with the incorrect structure, or whatever. And yeah, it may be different
from one browser to another.
But I think you mentioned that you're stuck with working with the HTML as it
is, so lucky you, you get to deal with the aftermath. :-(
-Mike
ok, i'm not sure if this is the easiest way, however, this is
how I got the form action in the following HTML:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0
cellpadding=0 cellspacing=0
tr
td valign=top colspan=2
table
border=0 cellspacing=1 cellpadding=3 width=100%
form
Method=Post Action=phoenix.zhtml?c=69181p=IROL-
irhomet=SwitchQuote
tr class=modBgQuoteShrtTicker
td colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1
SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I used:
var formAction = $
(elm).parents('table:first').children(form:first).attr(action);
For some reason, it misses the form object on the way back
using parents so i move forward after hitting the FORM's
parent to get the form. Not sure if this is browser
specific, but definitely a headache. (and the terrible HTML
syntax doesn't help either)
[jQuery] Re: Getting Parent Element using this
Could you possibly just give your form an id attribute? Then onchange you
could just return $(#myformid).attr(action) and not have to mess with
any traversing.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 1:58 PM
Subject: [jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
There's no need for any of this; elements of a form (input, select,
textarea) has a form property, so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
function changeAction(elm){
var formAction = elm.form.action;
...
}
And, as others have suggested, it's a better practice to do this all
in JavaScript, so that becomes:
form action=something
select id=some_select name=some_name
!-- some options --
/select
/form
jQuery(document).ready(function() {
jQuery('select#some_select').change(function() {
var formAction = this.form.action;
...
});
});
--
hj
[jQuery] Re: Getting Parent Element using this
Thanks for the tip hj. Is that a cross-browser solution? I tested it
in FF and got the absolute URL, but in IE it returns the relative
URL.
I used
var formAction = $(elm.form).attr(action);
and that will return the same in both browsers, however I'd still like
to know how reliable that is. Thanks.
Brian.
On May 9, 10:37 am, hj [EMAIL PROTECTED] wrote:
Could you possibly just give your form an id attribute? Then onchange you
could just return $(#myformid).attr(action) and not have to mess with
any traversing.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 1:58 PM
Subject: [jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
There's no need for any of this; elements of a form (input, select,
textarea) has a form property, so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
function changeAction(elm){
var formAction = elm.form.action;
...
}
And, as others have suggested, it's a better practice to do this all
in JavaScript, so that becomes:
form action=something
select id=some_select name=some_name
!-- some options --
/select
/form
jQuery(document).ready(function() {
jQuery('select#some_select').change(function() {
var formAction = this.form.action;
...
});
});
--
hj
[jQuery] Re: Getting Parent Element using this
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
what if the parent element is not a form. like:
form
label
select
/select
/label
/form
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
Also, i'd rather not commit anything i.e. using name=blah in case
the name gets changed. without me knowing.
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a label or
div)? and also, I would like to avoid using the name=something just
because the name could change without me knowing it.
Thanks for the help.
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a
label or div)? and also, I would like to avoid using the
name=something just because the name could change without
me knowing it.
Assuming you have a DOM element in 'this', you can get its parent form with:
$(this).parents('form:first')
Since forms can't be nested, you don't actually need the :first part, but
it's a good habit to get into if you use this technique for other element
types that can be nested.
BTW, nesting a select element inside a label element only works in some
browsers (IIRC, it doesn't work in IE). Use the for=id attribute in your
label for cross-browser compatibility.
-Mike
[jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0 cellpadding=0
cellspacing=0
tr
td valign=top colspan=2
table border=0
cellspacing=1 cellpadding=3 width=100%
form Method=Post
Action=phoenix.zhtml?c=69181p=OL-
homet=SwitchQuote
tr
class=modBgQuoteShrtTicker
td
colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1 SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I won't be able to alter the source, for it is nothing i have much
control over. So, how would i get the ACTION from the FORM above on
the SELECT menu's ONCHANGE event using jQuery?
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
ok, i'm not sure if this is the easiest way, however, this is how I
got the form action in the following HTML:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0 cellpadding=0
cellspacing=0
tr
td valign=top colspan=2
table border=0
cellspacing=1 cellpadding=3 width=100%
form Method=Post
Action=phoenix.zhtml?c=69181p=IROL-
irhomet=SwitchQuote
tr
class=modBgQuoteShrtTicker
td
colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1 SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I used:
var formAction = $
(elm).parents('table:first').children(form:first).attr(action);
For some reason, it misses the form object on the way back using
parents so i move forward after hitting the FORM's parent to get the
form. Not sure if this is browser specific, but definitely a
headache. (and the terrible HTML syntax doesn't help either)
Thanks
On May 8, 4:20 pm, Michael Geary [EMAIL PROTECTED] wrote:
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a
label or div)? and also, I would like to avoid using the
name=something just because the name could change without
me knowing it.
Assuming you have a DOM element in 'this', you can get its parent form with:
$(this).parents('form:first')
Since forms can't be nested, you don't actually need the :first part, but
it's a good habit to get into if you use this technique for other element
types that can be nested.
BTW, nesting a select element inside a label element only works in some
browsers (IIRC, it doesn't work in IE). Use the for=id attribute in your
label for cross-browser compatibility.
-Mike
[jQuery] Re: Getting Parent Element using this
Could you possibly just give your form an id attribute? Then onchange you
could just return $(#myformid).attr(action) and not have to mess with
any traversing.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 1:58 PM
Subject: [jQuery] Re: Getting Parent Element using this
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0 cellpadding=0 cellspacing=0
tr
td valign=top colspan=2
table border=0 cellspacing=1 cellpadding=3 width=100%
form Method=Post Action=phoenix.zhtml?c=69181p=OL-
homet=SwitchQuote
tr class=modBgQuoteShrtTicker
td colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1 SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I won't be able to alter the source, for it is nothing i have much
control over. So, how would i get the ACTION from the FORM above on
the SELECT menu's ONCHANGE event using jQuery?
On May 8, 2:30 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$(select[name=some_name]).change(function() {
formAction = $(this).parent().attr(action);
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: briandichiara [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using this
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
form action=something
select name=some_name onchange=changeAction(this);
!-- some options --
/select
/form
I can't figure out how to use this + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(:parent form).attr(action);
}
I really have no clue how to do effectively use this + a selector.
[jQuery] Re: Getting Parent Element using this
With markup as invalid as that, it's no surprise that elements are not where
you expect them in to be in the DOM. A FORM element can't be sandwiched in
between a TABLE and TR like that. So the browser tries to turn this into
something it can work with. It may shuffle things around, or just put up
with the incorrect structure, or whatever. And yeah, it may be different
from one browser to another.
But I think you mentioned that you're stuck with working with the HTML as it
is, so lucky you, you get to deal with the aftermath. :-(
-Mike
ok, i'm not sure if this is the easiest way, however, this is
how I got the form action in the following HTML:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0
cellpadding=0 cellspacing=0
tr
td valign=top colspan=2
table
border=0 cellspacing=1 cellpadding=3 width=100%
form
Method=Post Action=phoenix.zhtml?c=69181p=IROL-
irhomet=SwitchQuote
tr class=modBgQuoteShrtTicker
td colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1
SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I used:
var formAction = $
(elm).parents('table:first').children(form:first).attr(action);
For some reason, it misses the form object on the way back
using parents so i move forward after hitting the FORM's
parent to get the form. Not sure if this is browser
specific, but definitely a headache. (and the terrible HTML
syntax doesn't help either)
