<p>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):</p>

<pre><code>{% 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 %}
</code></pre>

CC BY-SA 3.0
2016-10-07T13:21:03.783Z
Thats it! I was really looking in the wrong way as I thought it was just a browser problem. Will keep this in mind for future projects!
Justin Dekkers
CC BY-SA 3.0
2016-10-07T09:42:28.867Z
2016-10-07T09:42:28.867Z
André Elvan
<p>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.</p>

<p>Here is my code:</p>

<pre><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 %}
</code></pre>

CC BY-SA 3.0
2017-08-08T08:04:00.490Z
I don't suppose you could share your full code please? Search form, template etc..? Would help me massively right now.
Mark
<search><ajax><javascript><request>
Ajax Function on a search form not working in Safari & IE
# Ajax Function on a search form not working in Safari & IE

(Asked by: username_0 on 2016-10-07)

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

**Tags:** search, ajax, javascript, request

> **Comments:**
> **username_1**: I don't suppose you could share your full code please? Search form, template etc..? Would help me massively right now.  

---

## 1 answers

### Answer by username_2 on 2016-10-07. Score: 3 | Accepted answer

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

> **Comments:**
> **username_0**: Thats it! I was really looking in the wrong way as I thought it was just a browser problem. Will keep this in mind for future projects!  

---

