AJAX работает в Chrome, но не в Safari, Firefox или Internet Explorer

Question

У меня есть одна страница с несколькими формами, отправляющая каждый из них с вызовом AJAX на тот же PHP-контроллер. В Chrome, когда я отправляю форму, я получаю сообщение beforeSend, а затем успешный вызов. В Safari, IE и Firefox он вместо этого обновляет страницу, что, похоже, идет прямо за призывом ajax, который не должен обновлять его.

Формы этого типа:

<form method="post" class = "multi-form teacher_account_form" id="personal_form" name="personal_form"> 
    <div class = "form-group"> 
     <label for="phone">What is your phone number?*</label> 
     <input type="text" class="form-control bfh-phone" data-format="+86 ddd dddd dddd" name="phone" id="phone" value="<?=$this_user[0]['phone']?>"> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button> 
    </div>     
</form> 

JS, как это:

var which_button; 
$('.account_submit').click(function() { 
    which_button = $(this).attr('id'); 

    // Create empty jQuery objects - 
    var $jsOutput = $([]); 
    var $jsForm = $([]); 

    // url to submit to 
    var ajaxURL = "https://stackoverflow.com/users/p_teacher_account_work"; 

    // Assign jQuery selector objects 
    switch (which_button) { 
     case "work_submit": 
      $jsOutput = $('#pay_output'); 
      $jsForm = $('#pay_form'); 
      break; 
     case "edu_submit": 
      $jsOutput = $('#edu_output'); 
      $jsForm = $('#edu_form'); 
      break; 
     case "image_submit": 
      $jsOutput = $('#image_output'); 
      $jsForm = $('#image_form'); 
      break; 
     case "personal_submit": 
      $jsOutput = $('#personal_output'); 
      $jsForm = $('#personal_form'); 
      break; 
    } 

    // Lock and load the ajax request - 
    var ajax_options = { 
     type: 'post', 
     url: ajaxURL, 
     beforeSend: function() { 
      //Display a loading message while waiting for the ajax call to complete 
      $jsOutput.html("Updating..."); 
     }, 
     success: function(response) { 
      $jsOutput.html(response); 
     } 
    }; 
    $jsForm.ajaxForm(ajax_options); 


}); 

Мой PHP файлов запросов в базу данных и отправить обратно информацию на вид, который вторит к тому же страницу, на которой сидят.

Answer 1

Он не работал из-за того, что выпадающее меню сборщика плагинов форвардера formhelpers http://bootstrapformhelpers.com/country/#jquery-plugins не правильно загружалось в проблемных браузерах. Для чего это стоит, вот код, который завелся работает (не включая удаление этого гнусного плагина):

var which_button; 
//$('.account_submit').click(function() { 
$('form.teacher_account_form').on('submit', function(e) { 
    e.preventDefault(); 
    which_button = $(this).attr('id'); 

    // Create empty jQuery objects - 
    var $jsOutput = $([]); 
    var $jsForm = $([]); 

    // url to submit to 
    var ajaxURL = "https://stackoverflow.com/users/p_teacher_account_work"; 

    // Assign jQuery selector objects 
    switch (which_button) { 
     case "pay_form": 
      $jsOutput = $('#pay_output'); 
      $jsForm = $('#pay_form'); 
      break; 
     case "edu_form": 
      $jsOutput = $('#edu_output'); 
      $jsForm = $('#edu_form'); 
      break; 
     case "image_form": 
      $jsOutput = $('#image_output'); 
      $jsForm = $('#image_form'); 
      break; 
     case "personal_form": 
      $jsOutput = $('#personal_output'); 
      $jsForm = $('#personal_form'); 
      break; 
    } 

    // empty data object 
    var form_data = {}; 

    // variables for data 
    $(this).find('[name]').each(function(index, value) { 
     var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 

     // load loaded variables into array 
     form_data[name] = value; 

    }); 

    $.ajax({ 
     type: 'post', 
     url: ajaxURL, 
     data: form_data, 
     beforeSend: function() { 
      //Display a loading message while waiting for the ajax call to complete 
      $jsOutput.html("Updating..."); 
     }, 
     success: function(response) { 
      $jsOutput.html(response); 
     } 

    }); 

    return false; 


}); 

Answer 2

Попробуйте использовать type = "button" вместо type = "submit".

Как и в:

<button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button> 

Это Hacky, но она работает в любом браузере, я пробовал. Тип = "submit" означает что-то особенное для большинства браузеров.

Редактировать: Подождите ... вы используете Malsup для «плагина формы jQuery»?

Answer 3

две вещи:

1.) Включите ваш тип кнопки для button а-ля:

<button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button> 

2.) Измените обработчик событий для вызова $jsForm.ajaxSubmit(ajax_options); вместо $jsForm.ajaxForm(ajax_options);

По их docs, $jsForm.ajaxForm(ajax_options); фактически не отправляет форму. Тот факт, что это работает, как вы ожидали в Chrome, предполагает, что он делает что-то странное за кулисами при отправке форм.

Answer 4

Попробуйте это решение для простой, вариант JQuery:

var which_button; 

$('.account_submit').click(function() { 
    which_button = $(this).attr('id'); 

    // Create empty jQuery objects - 
    var $jsOutput = $([]); 
    var $jsForm = $([]); 

    // url to submit to 
    var ajaxURL = "https://stackoverflow.com/users/p_teacher_account_work"; 

    // Assign jQuery selector objects 
    switch (which_button) { 
     case "work_submit": 
      $jsOutput = $('#pay_output'); 
      $jsForm = $('#pay_form'); 
      break; 
     case "edu_submit": 
      $jsOutput = $('#edu_output'); 
      $jsForm = $('#edu_form'); 
      break; 
     case "image_submit": 
      $jsOutput = $('#image_output'); 
      $jsForm = $('#image_form'); 
      break; 
     case "personal_submit": 
      $jsOutput = $('#personal_output'); 
      $jsForm = $('#personal_form'); 
      break; 
    } 

    // Get the form data 
    var formData = $jsForm.serializeArray(); 

    // Lock and load and fire the ajax request - 
    $.ajax({ 
     type: 'POST', 
     url: ajaxURL, 
     data: formData, 
     contentType: "application/x-www-form-urlencoded", 
     dataType: "html", 
     cache: false, // this will save you a bunch of IE headaches 
     beforeSend: function() { 
      //Display a loading message while waiting for the ajax call to complete 
      $jsOutput.html("Updating..."); 
     }, 
     error: function(jqHXR, textStatus, errorThrown) { 
      alert("Sorry, something went wrong.\nDetails: " + textStatus + ". " + errorThrown); 
     }, 
     success: function(response) { 
      $jsOutput.html(response); 
     } 
    }); 
}); 

Теперь вы можете сделать «кнопку» типа кнопки = или даже заменить его элементом с OnClick действия события не по умолчанию, такие как интервал ,