Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-07T13:21:03.783Z
Answers.Text: 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!
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-07T09:42:28.867Z
Answers.LastActivityDate: 2016-10-07T09:42:28.867Z
Answers.UserDisplayName: André Elvan
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-08T08:04:00.490Z
Comments.Text: I don't suppose you could share your full code please? Search form, template etc..? Would help me massively right now.
Comments.UserDisplayName: Mark
Tags: <search><ajax><javascript><request>
Title: Ajax Function on a search form not working in Safari & IE
ThreadText: # 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!  
  
  ---
  
  