I am trying to create a multi page listing form (using AJAX - jquery) for a real estate site. The basic premise is that a user should be able to create a listing in step 1 of the form. In step 2 of the form, the user should now be able to upload images/video. In step 3 of the form, the user would add any additional information related to the listing. The main reason for the steps is that I need to have the listing id (from the db) for association with the videos, images, and additional information. This all happens within 1 section of a page. Hence the need for AJAX. We are using uploadify for the uploads as it seems to work the best with our current system and styling. This also follows along with our AJAX premise.
The kicker comes in when I try to go back to step 1 and make some changes, and then return to step 2. The AJAX submit events seem to stop working up to this point. When I try to resubmit and return to the 2nd page, the ajax does not take. It's as if the events aren't being rebound? I have tried and tried but I'm up against a wall with this one.
Javascript:
var options = {
target: '#form_location',
type: 'post'
};
$('#new_listing_form').ajaxForm(options);
$('#edit_new_listing_form').ajaxForm(options);
$("#form_backbutton").live('click', function(eve){
eve.preventDefault();
$(this).parent().load(baseurl + "member/create_listing/1/TRUE", {'listing_id': l_id} );
});
Step 1:
<form action="post_to_step2">
</form>
Upon submission of the above form, a listing id is generated in our db. This listing id is passed to step 2.
STEP 2:
<div id="step2">// UPLOADIFY Form goes here ...</div>
<div id="form_backbutton">Go Back</div>
</div>
<script type="text/javascript">
var l_id = "<?php echo $listing_id; ?>";
</script>
Any advice would definitely help and it would certainly help with that whole happy thanksgiving thing :-)