Submit ajax form in jQuery-UI Dialog with Enter Key
This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…
$('<div id="myDialog"></div>').appendTo('body').dialog({
autoOpen: false,
modal: true,
closeOnEscape: true,
buttons: {
OK: function() {
$.ajax({
type: 'POST',
url: 'save.php',
data: $('#myDialog :input').serialize(),
error: function(xml, status, error) {
$('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
}
});
},
Cancel: function() {
$(this).dialog('close');
}
},
open: function() {
$(this).html('').load('form.php');
},
focus: function() {
$(':input', this).keyup(function(event) {
if (event.keyCode == 13) {
$('.ui-dialog-buttonpane button:first').click();
}
});
}
});
Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.
That’s it, enjoy 
Reset fields to default values using jQuery
Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?
Here is how you can achieve this with jQuery
$('#reset_address').click(function (event) {
event.preventDefault();
$('#address_details :input').each(function() {
if ($(this).is('select')) {
$(this).val($(this).find('option[selected]').val());
} else {
$(this).val(this.defaultValue);
}
});
});
#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.
Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.
IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)
This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic
$(document).ready(function() {
//preload images
var preloadedImages = new Array();
$('#container img').each(function(i) {
preloadedImages[i] = new Image();
var ext = $(this).attr('src').split('.').pop();
preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
});
//rollover effect
$('#container a').hover(function() {
var ext = $(this).find('img').attr('src').split('.').pop();
$(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
}, function() {
var ext = $(this).find('img').attr('src').split('.').pop();
$(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
});
});
The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Read more
Use location.hash to pre-select a jQuery UI tab
I have noticed quite a few people asking how to set a default tab during page load using the jQuery UI Tabs Widget. My method is as follows…
<script>
$(function(){
$('#tabs').tabs({
selected: (location.hash && parseInt(location.hash.substr(1)) != 'NaN') ? parseInt(location.hash.substr(1)) : 0
});
});
</script>
I am checking the url for a hash value (eg: mypage.htm#3). If one is found and it can be parsed to an integer, it will use that number for the selected tab, otherwise it defaults to zero.
jQuery UI Tabs Widget documentation
…
If you are not familiar with the short-hand if/else syntax above, here is an example…
variable = (condition) ? true : false;
Written long-hand it would be…
if (condition) {
variable = true;
} else {
variable = false;
}
Adding mouse events to table rows using jQuery
In my example I will only be modifying the row’s css classes. The behavior would be very similar to what you may already be familiar with in phpMyAdmin’s interface.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr').hover(function() {
$(this).toggleClass('highlight');
});
$('tr').click(function() {
$(this).toggleClass('selected');
});
$('tr:even').addClass('odd');
$('tr:odd').addClass('even');
});
</script>
Everything should be pretty easy to understand except for the last 2 addClass commands. jQuery’s “:odd” and “:even” selectors behave differently than you may expect. You could assume the “odd” selector to start at the “first” row but that is not the case (an array’s first element zero-index unless otherwise defined). Unless I included a heading row, my “first” row is actually an even row since it is referenced as an array and has an index of zero. That’s why it looks like I am doing it backwards 