Side navigation
#3664 closed bug (invalid)
Opened November 29, 2008 05:27AM UTC
Closed January 15, 2009 04:29AM UTC
returning results with <form> tag in .load function calls double-innerhtml
Reported by: | qphoria | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.3 |
Component: | ajax | Version: | 1.2.6 |
Keywords: | load, form | Cc: | |
Blocked by: | Blocking: |
Description
The full explanation is here:
http://www.jqueryhelp.com/viewtopic.php?t=935
The problem summary:
jQuery strips the <form> tags when returning html with a <form> in it. This is because it is doing a double-innerHTML call. First on the main div that is called from the load, and then for the form tags. This only seems to affect form tags.
I have a snippet of code:
<div id="payform">
<form action="<?php echo $payment_url; ?>" method="post" enctype="multipart/form-data">
<?php if ($fields) { ?>
<?php echo $fields; ?>
<?php } ?>
<input type="submit" value="submit">
</form>
</div>
I use:
$('#payform').load('index.php&action=updatePayment&payment='paypal');
to load a php function and get new output which returns html <form> with new fields and action url:
<form action="https://www.paypal.com/webscr" method="post" enctype="multipart/form-data">
<input type="hidden" name="amount" value="20.00">
<input type="submit" value="submit">
</form>
But the code at line 552:
// Certain attributes only work when accessed via the old DOM 0 way
if ( fix[name] ) {
if ( value != undefined ) elem[fix[name]] = value;
return elem[fix[name]];
} else if ( value == undefined && jQuery.browser.msie && jQuery.nodeName(elem, "form") && (name == "action" || name == "method") )
return elem.getAttributeNode(name).nodeValue;
If I remove that first conditional that uses the "old" way and leave only the "else if" as the new "if". Then the <form> works properly, but I'm not sure if it breaks anything else.
Attachments (0)
Change History (4)
Changed November 29, 2008 05:29AM UTC by comment:1
Changed November 29, 2008 05:35AM UTC by comment:2
Cancel that. my "alleged" solution doesn't make it work. I'm not sure of a fix yet.
Changed December 01, 2008 03:40PM UTC by comment:3
So it turns out it's not a jQuery bug.
It's a not-so-well-known Javascript "feature"
Apparently innerHTML in FF3 and IE6+ (And maybe others) don't like <form> tags as part of innerhtml.
So if i have code like:
Code:
<div id="test">
<form>
<input>
</form>
</div>
<script>
window.onload=document.getElementById('test').innerHTML = "<form><input type="hidden" name="blah"></form>";
</script>
it will only result in:
Code:
<div id="test">
<input type="hidden" name="blah">
</div>
Completely removing the <form> tags
Changed January 15, 2009 04:29AM UTC by comment:4
resolution: | → invalid |
---|---|
status: | new → closed |
I guess i Forgot to explain what happens.
When the output form gets passed back through the load, what should be:
<form action="https://www.paypal.com/webscr" method="post" enctype="multipart/form-data">
<input type="hidden" name="amount" value="20.00"> <input type="submit" value="submit">
</form>
Ends up only returning:
<input type="hidden" name="amount" value="20.00"> <input type="submit" value="submit">