Admin Life Errors, Fixes, and Encounters

jquery ajaxform validation preview save and edit buttons

My goal was to have a page where a user can edit, save, and preview whatever he's working on using jquery and ajaxForm.

The problem is that after after you preview, the save doesn't work anymore because the validation submit handler can't be reinialized.

Original Code

<code>
HTML code....
<form action="ajax/check.php" method="post" enctype="multipart/form-data" name="signup" id="signup">
<div id="edit_company">
<input name="name" type="text" id="name" value="" />
<textarea name="description" cols="45" rows="6" id="description"></textarea>
</div>
<div id="preview_company" style="display:none;" >
<center>
<img src='images/loading.gif' alt='loading...' /> <br />
Loding Please Wait...
</center>
</div>
<div id="preview_company_buttons" style="display:none; text-align:center; padding-top:10px;" >
<input type="submit" name="save" id="save" value="Save" />
<input type="submit" name="edit" id="edit" value="Edit" />
</div>
</form>
HTML code....
<script type="text/javascript">
$(document).ready(function() {

$.ajaxSetup ({
cache: false
});

var options = {
target: '#company_upgrade'   // target element(s) to be updated with server response
};

$("#save").validate({
rules: {
name: "required",    // simple rule, converted to {required: true}
description: {
required: true
}
},
messages: {
name: "&nbsp;&nbsp;<strong>Required</strong>",
description: "&nbsp;&nbsp;<strong>Required</strong>"
},
submitHandler: function() {
$('#preview_company').hide('fast');
$('#edit_company').hide('fast');
setTimeout("$('#company_upgrade').show('slow')", 500);
$('#signup').ajaxForm({target: '#company_upgrade'});
}
});

$("#preview").validate({
rules: {
name: "required",    // simple rule, converted to {required: true}
description: {
required: true
}
},
messages: {
name: "&nbsp;&nbsp;<strong>Required</strong>",
description: "&nbsp;&nbsp;<strong>Required</strong>"
},
submitHandler: function() {
$('#edit_company').hide('fast');
setTimeout("$('#preview_company').show('slow')", 500);
setTimeout("$('#preview_company_buttons').show('slow')", 1000);
$('#signup').ajaxForm({target: '#preview_company'});  // bind form using 'ajaxForm'
}
});

// hides the slickbox on clicking the noted link
$('#edit').click(function() {
$('#preview_company').hide('fast');
$('#preview_company_buttons').hide('fast');
setTimeout("$('#edit_company').show('slow')", 500);
return false;
});

});
</script>
HTML code....
</code>

The new code fixes the the issue by putting the validation in an if condition.

<code>
HTML code....
<form action="ajax/check.php" method="post" enctype="multipart/form-data" name="signup" id="signup">
<div id="edit_company">
<input name="name" type="text" id="name" value="" />
<textarea name="description" cols="45" rows="6" id="description"></textarea>
</div>
<div id="preview_company" style="display:none;" >
<center>
<img src='images/loading.gif' alt='loading...' /> <br />
Loding Please Wait...
</center>
</div>
<div id="preview_company_buttons" style="display:none; text-align:center; padding-top:10px;" >
<input type="submit" name="save" id="save" value="Save" />
<input type="submit" name="edit" id="edit" value="Edit" />
</div>
</form>
HTML code....
<script type="text/javascript">
$(document).ready(function() {

$.ajaxSetup ({
cache: false
});

var options = {
target: '#company_upgrade'   // target element(s) to be updated with server response
};

var val_save = {
rules: {
name: "required",    // simple rule, converted to {required: true}
description: {
required: true
}
},
messages: {
name: "&nbsp;&nbsp;<strong>Required</strong>",
description: "&nbsp;&nbsp;<strong>Required</strong>"
}
};

// hides the slickbox on clicking the noted link
$('#save').click(function() {
if ( $("#signup").validate(val_save).form() ) {
$('#preview_company').hide('fast');
$('#edit_company').hide('fast');
setTimeout("$('#company_upgrade').show('slow')", 500);
$('#signup').ajaxForm({target: '#company_upgrade'});
}

});

// hides the slickbox on clicking the noted link
$('#preview').click(function() {
if ( $("#signup").validate(val_save).form() ) {
$('#edit_company').hide('fast');
setTimeout("$('#preview_company').show('slow')", 500);
setTimeout("$('#preview_company_buttons').show('slow')", 1000);
$('#signup').ajaxForm({target: '#preview_company'});  // bind form using 'ajaxForm'
}
});

// hides the slickbox on clicking the noted link
$('#edit').click(function() {
$('#preview_company').hide('fast');
$('#preview_company_buttons').hide('fast');
setTimeout("$('#edit_company').show('slow')", 500);
return false;
});
});
</script>
HTML code....
</code>