JavaScript remoting reloading page

Question

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;
}

Answer 1

The problem is that you're trying to stop the action on keyup. This is too late in the browser's event model to try and do this (it has already decided to perform the default action, which is to submit the form).

Here's a proper Enter blocker function:

.on('keypress', function(e) {
    if(e.which === 13) {
        e.preventDefault();
        searchCountry("{!intContinent.Id}", $('#filterText').val())
    }
}

Note that you should simply call preventDefault instead of returning false, as that's the preferred way to cancel default actions, and you need to handle keypress in order to prevent the form from submitting.