Wierd Scenario for you ....
Take the following basic bit of code:
<script language='javascript'>
$(document).ready(function() {
var options = {
target: '#content', // target element(s) to be
updated with server response
beforeSubmit: function() { document.body.style.cursor =
'wait'; }, // pre-submit callback
success: function() { document.body.style.cursor =
'default'; } // post-submit callback
};
// bind to the form's submit event
$('form').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
</script>
<form id='testform' method='get' action='ajaxtest.php'>
<input type='hidden' name='value1' value='VAL 1' />
<input type='hidden' name='value2' value='VAL 2' />
<input type='hidden' name='value3' value='VAL 3' />
<input type='hidden' name='value4' value='VAL 4' />
<input type='hidden' name='value8' value='VAL 8' />
<input type='submit'>
</form>
<div id='content' style='border:1px solid black'></div>
--------------------------------------------------------
When you submit the form, just as you'd expect, the screen stays still, and
the "content" div is filled with the output from ajaxtest.php
("ajaxtest.php" just echo's "HELLO WORLD" in my test case)
However, if that ajaxtest.php's output is another form, the bind doesn't
work on that outputted form. The submit button on the form that ajax
retrieved from the server does what a normal form does, which is to have the
browser redraw the whole screen with the output of the form.
My first thought was "duh", you have 2 forms on the screen and maybe that
bind only works for the first one ... so I removed the first form from the
HTML page and made it a link that calls the ajaxtest.php using ajax, and had
the ajaxtest.php output that same form from above, and it still submits the
whole page like the old days.
I tried to remove that whole "ready" / "submit" stuff out of the HTML page
that I was testing with, and had ajaxtest.php output it before the form,
thinking that maybe it's a case of the document not knowing about the form
that ajax is loading on the fly ... so if the ajax loads the listener with
the form it would know about each other .... NOT.
What am I missing?
--
View this message in context:
http://www.nabble.com/jSQuery-Form-failure-to-bind-a-form-that-is-drawn-by-Ajax--tp19716923s27240p19716923.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
