JQueryUI Dialog causing page reload
Html:
<button id="filter_launch">Filter</button>
<div id="search_box">
<form id="search_form" name="search_form">
etc.
</form></div>
Javascript:
$('#filter_launch')
.button({icons: {primary: 'ui-icon-search'}})
.click( function () {
$('#search_box').dialog({
modal: true,
title: "Filter",
width: 400,
close: function(event, ui) { $(this).dialog('destroy'); },
buttons: {
Filter: function() {
search();
},
ResetFilter: function() {
resetSearchForm();
},
Cancel: function() {
$(this).dialog('destroy');
}
}
});
});
Clicking the button "filter_launch" causes the page to reload. If I change "filter_launch" to an anchor it doesn't happen anymore. Is something about the button click causing this behavior?