Hi, I think I'm missing something obvious. I'm trying to save screen
real-estate and have a search-form do an ajax-swap on a submit with
the results page that it creates. The results page is also a form
(simply because it has a submit buttom at the bottom at this point),
which likewise is supposed to swap itself out on a submit and return
to the initial search form.
Something is going awry however. Pressing the first submit button just
brings the initial form back again. Maybe somebody else can see the
dumb thing I'm obviously doing here -- I can't!
The container for the initial search form is '#panel-1' and gets
loaded up with the contents of 'form-1.html'. This is then supposed to
get swapped out for '#panel-2', which gets loaded with 'form-2.html'.
At any rate, here's the jquery. I'll note that the alert() is never
triggered:
$(document).ready( function() {
$( '#panel-2' ).hide();
$( '#panel-1-1' ).load( "form-1.html", function() {
$( '#submit-button-1' ).submit( function() {
alert ( "You just pressed '#submit-button-1" );
$( 'panel-1' ).hide();
$( 'panel-2' ).load( "form-2.html", function() {
$( '#submit-button-2' ).submit( function() {
});
});
});
});
});
and here are the wrappers:
<div id="container">
<h1>I'm the overall div#container</h1>
<div id="panel-1"><h2>I'm a div#panel-1</h2>
<div id="panel-1-1"></div>
</div>
<div id="panel-2"><h2>I'm a div#panel-2</h2>
</div>
</div>
You can see the code running (or rather not running :-) at
http://www.fatdog.com/AjaxFormSwap/SwapTest.html. The two form pages
that get loaded are at .../AjaxFormSwap/form-1.html and .../
form-2.html.
Any help would be much appreciated! Thanks,
Howard
