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: " <strong>Required</strong>",
description: " <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: " <strong>Required</strong>",
description: " <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: " <strong>Required</strong>",
description: " <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>
css fixed background image
One interesting thing to do with websites it to have a fixed background image. Even if the user scrolls up and down the background stays in place. This can add a nice effect if the background has a fade effect.
How is this done? Easily with CSS.
All you need to do is 4 things, add the following to your CSS file.
body {
background-image:url(/images/background.jpg);
background-attachment: fixed;
background-repeat:repeat-x;
background-position:bottom;
}
"background-image" is the image you want to use.
"background-attachment" fixes the image to the screen.
"background-repeat" this makes the image repeat via the x-axis (left to right)
"background-position:" where should the image be? in our case, the bottom of the screen.
That's it.