Почему эта форма AJAX не будет вести себя?

Question

Независимо от того, что я делаю, эта форма вообще не будет работать через AJAX. Есть 4 (в данном случае 3) разных кнопки, которые пользователь нажимает, чтобы выбрать размер, и значение этой кнопки используется при обработке формы. Он также будет постепенно ухудшаться (когда он работает) с помощью скрытого поля #is_ajax.

HTML:

    <form action="../bin/func/actions/add.action.php" method="post" id="addToCart"> 
        <input type="hidden" name="is_ajax" value="false" id="is_ajax"> 
        <input type="hidden" name="action" value="add">   
        <button class="add-size" value="S">S</button> 
        <span class="no-stock">M</span>  
        <button class="add-size" value="L">L</button> 
        <button class="add-size" value="XL">XL</button> 
    </form> 
            <div id="cart-success"></div>

JQuery:

$(function() {  
$(".add-size").click(function() {
    // first off set hidden variable to TRUE so we know AJAX is playing ball
    $("#is_ajax").val(true);

    // serialise the form data
    var dataString = 'size=' + $(this).val() + '&is_ajax=' + $("#is_ajax").val();

    // slide down the small cart
    $("#cart-expand").slideDown(200); 
    $("#cart-thumb a").toggle();

    // let's do this..
    $.ajax({
      type: "POST",
      url: "../bin/func/actions/add.action.php",
      dataType: 'html',
      data: dataString,
      success: function(data){
        $("#cart-success").html(data);          
        return false;
      }
    }); 
});
});

PHP (готовьтесь)

<?php
if( $_POST['is_ajax'] == 'true' )
    echo 'true';
else
    echo 'false';
?>

Независимо от того, что я делаю, действие формы по умолчанию всегда срабатывает, и страница перенаправляется прямо на страницу PHP. Если я удаляю часть $ .ajax (), то все остальное работает, кажется, что-то не так.

Также я не думаю, что это потому, что я не делаю $ ("# form-ID"). Submit () ... так как я пробовал это более обычным способом, и он все еще не работает. Если я поставлю

alert( dataString );
return false;

После того, как я создаю строку данных, все ведет себя так, как должно, только после того, как мы добрались до бита ajax, все идет не так, как кажется, он выпадает из jQuery и просто выполняет обычную отправку сообщения на адрес в HTML .

Помощь! Спасибо.

Answer 1

return false;

Вы пытаетесь return false выполнить функцию щелчка внутри вашего обратного вызова ajax. Этот оператор возврата не возвращает функцию щелчка.

Вам нужно return false; в конце вашего заявления ajax.

$.ajax({ 
  ...
  success: function() {
    $("#cart-success").html(data); 
  }
});
return false;

Как указал @ClementHerreman, используя

$(obj).click(function(event) { // <- event param
  ...
  event.preventDefault();
});

Будет лучше.

Answer 2

На самом деле не отвечаю конкретно на ваш вопрос, но, если вы хотите узнать, была ли форма отправлена ​​с использованием AJAX, вы можете просто взглянуть на заголовки HTTP-запроса.

Пример:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
    //submitted via AJAX
}
else
{
    //not submitted via AJAX
}

Обратите внимание, что это не 100% точное предположение . См. Существует ли $ _SERVER ['HTTP_X_REQUESTED_WITH'] в PHP или нет? для дополнительных пояснений.

Answer 3

Вам нужен вызов события.stopPropagation ()

http://api.jquery.com/event.stopPropagation/

Answer 4

Попробуйте изменить это

$("#is_ajax").val('true');

РЕДАКТИРОВАТЬ:

Стоит true и false, попробуйте 0 и 1