I'm trying to use JavaScript remoting and everytime I hit enter page refreshes. How do I stop it? Below code throws alert "enter" and reloads immediately even before I acknowledge alert. Please help
JS code:
<script type="text/javascript">
$(function () {
var qs = $('input#filterText').quicksearch('#a option')
.on('keyup', function(e)
{
if(e.which == 13)
{
alert('enter');
searchCountry("{!intContinent.Id}", $('#filterText').val());
return false;
}
else
{
if ($('#filterText').val() == '') {
alert('empty');
}
}
});
});
function searchCountry(acctId, searchString)
{
MyController.searchForCountries(acctId, searchString, function(result, event)
{
if (event.status)
{
//clear all existing options
$('#a option').each(function(index, option) {
$(option).remove();
});
$.each(result, function(index, item)
{
$('#a').append("<option value=\"" + item.value + "\">" + item.label + "</option>");
});
}
},{escape: true});
}
</script>
VF page code:
<form>
<table>
<tr>
<td>
<input id="filterText" type="text" value=""/>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<SELECT style="width: 150px;" id="a" size="10" multiple="multiple">
<OPTION value="a">Canada</OPTION>
<OPTION value="b">United States</OPTION>
<OPTION value="c">Mexico</OPTION>
<OPTION value="d">Cuba</OPTION>
<OPTION value="e">Jamaica</OPTION>
<OPTION value="f">Puerto Rico</OPTION>
<OPTION value="g">Bahamas</OPTION>
<OPTION value="h">Bermuda</OPTION>
</SELECT>
</td>
<td>
<SELECT style="width: 150px;" id="b" size="10" multiple="multiple">
<OPTION value="x">Costa Rica</OPTION>
<OPTION value="y">Panama</OPTION>
<OPTION value="z">Aruba</OPTION>
</SELECT>
</td>
</tr>
</table>
</form>
Controller code:
@RemoteAction
public static list<PickOption> searchForContacts(String searchContId, String countryName)
{
//do something
return options;
}