Ajax Function on a search form not working in Safari & IE

Question

I made an ajax function so my page wont refresh and my search window wont disappear on form submit. It works fine in all browsers but it keeps refreshing on Safari.

Here is my code:

{% if not craft.request.isAjax %}
    {% set pagingJs %}
        $(function () {             
            $('#searchBtn').click(function (e) {
                $( ".searchResult" ).remove();
                $( ".noResult" ).remove();
                e.preventDefault();
                var search = $('#searchField').val();

                $('#loading').show();
                $.get( "/?q="+search, function( data ) {
                    data = $('#searchQuery', data).html();
                    $( "#searchQuery" ).append(data);
                });
            });
        });
        $( document ).ajaxStop(function() {
           $('#loading').hide();
        });
    {% endset %}
{% includeJs pagingJs %}
{% endif %}

Answer 1

Try attaching the listener on the forms submit event instead, and prevent that instead of just the click on the button. Something like this (make sure you change the selector for your form):

{% if not craft.request.isAjax %}
    {% set pagingJs %}
        $(function () {             
            $('#myForm').on('submit', function (e) {
                e.preventDefault();

                $( ".searchResult" ).remove();
                $( ".noResult" ).remove();

                var search = $('#searchField').val();

                $('#loading').show();
                $.get( "/?q="+search, function( data ) {
                    data = $('#searchQuery', data).html();
                    $( "#searchQuery" ).append(data);
                });
            });
        });
        $( document ).ajaxStop(function() {
           $('#loading').hide();
        });
    {% endset %}
{% includeJs pagingJs %}
{% endif %}