Идентификация конкретной кнопки при отправке AjaxForm (s)

Question

Я использую Django и AjaxForm для отправки формы, которая добавляет элемент в «корзину» пользователя. У меня есть несколько элементов, перечисленных на странице, каждая из которых имеет собственную кнопку «Добавить в корзину». После нажатия на кнопку «добавить в корзину» я использую Ajax для добавления элемента в «корзину» пользователя и отображения его в «корзине» в верхней части экрана. Пользователи также могут удалить элемент из своей тележки, нажав на данный элемент в корзине.

Теперь я хочу изменить внешний вид кнопки «добавить в корзину», после того, как она была нажата, но у меня возникли проблемы с определением только выбранной кнопки (и не всех «добавить в корзину») кнопки). Как я могу определить, какая кнопка «добавить в корзину» была нажата. Я добавил поле «id» в мою кнопку html и пытался использовать это, но не увенчался успехом ... ??

Я пробовал много разных вещей, но либо они не работают, либо я помещаю их в неправильное место. Например, я пробовал:

$('.add-to-cart').on('click',function(){ 
    var id = $(this).attr("id"); 
    console.log("ID: "); 
    console.log(id); 
}); 

А также:

var addButtonID; 
    $(this).find('input[type=submit]').click(function() { 
     addButtonId = this.id; 
     console.log("ID: "); 
     console.log(addButtonId) 
    )}; 

Любые идеи о том, как я могу найти кнопку, которая, специфические щелкнул, так что я могу обновить вид кнопки ???

Мой HTML:

{% for item in item_list %}    
    <form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded"> 
    <ul> 
     <li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li> 
    </ul> 
    </form> 
{% endfor %} 

Моя JavaScript:

function remove_form_errors() { 
    $('.errorlist').remove(); 
} 
function show_hide_cart(){ 
    var cart = $('#cart'); 
    var message = $('#message'); 
    if (cart.find('li').length >= 1){ 
     cart.show(); 
     continueButton.show(); 
     message.hide(); 
    } 
    else { 
     cart.hide(); 
     continueButton.hide(); 
     message.show(); 
    } 
} 

function process_form_errors(json, form) 
{ 
    remove_form_errors(); 

    var prefix = form.data('prefix'), 
    errors = json.errors; 
    if (errors.__all__ !== undefined) { 
     form.append(errors.__all__); 
    } 
    prefix === undefined ? prefix = '' : prefix += '-'; 
    for (field in errors) 
    { 
     $('#id_' + prefix + field).after(errors[field]) 
     .parents('.control-group:first').addClass('error'); 
    } 
} 
function assign_remove_from_cart() { 
    var cart = $('#cart'); 
    $('.remove-from-cart').on('click', function(e) { 
     e.preventDefault(); 
     $.get(this.href, function(json) { 
      remove_form_errors(); 
      cart.find('a[href$="' + json.slug + '/"]').parent('li').remove(); 
      show_hide_cart(); 
     }); 
    }); 
} 
(function($){ 
    $(function() { 
     var cart = $('#cart'), 
      message = $('#message'); 
      continueButton = $('#continueButton'); 

     assign_remove_from_cart(); 
     // ajax-enable the "add to cart" form 
     $('.add-to-cart').ajaxForm({ 
      dataType: 'json', 
      url: this.action, 
      success: function(json, status, xhr, form) { 
       if (json.errors !== undefined) { 
        // display error message(s) 
        process_form_errors(json, form); 
       } 
       else if(json.id == -1){ 
        // duplicate, do nothing 
        console.log("json.id:%s:json.slug:%s", json.id, json.slug) 
       } 
       else { 
        // Hide any previously displayed errors 
        remove_form_errors(); 
        // compile cart item template and append to cart 
        var t = _.template($('#cart-item-template').html()); 
        $('#cart').append(t(json)); 
        show_hide_cart(); 
        assign_remove_from_cart(); 
       } 
      } 
     }); 
    }); 
})(jQuery); 

Answer 1

Основываясь на ваших комментариях, вы должны оставить свою функцию onClick в теге скрипта в конце своей HTML-страницы и настроить ее как предполагалось (хотя ваш javascript должен на самом деле быть в отдельном файле, который получает с помощью тега скрипта).

$(document).ready(function(){ 
    $('.add-to-cart :submit').on('click',function(){ 
     var id = this.id; 
     console.log("ID: ",id); 
     //do something with your ID here, such as calling a method to restyle your button 
     $('#' + id).css("attribute","new value"); 
     //or 
     $('#' + id).addClass("yourClassName"); 
    }); 
}); 

Answer 2

Изменение типа кнопки 'кнопки', а затем добавить OnClick = "addToCartFunction (это);"

, то в addToCarFunction это будет ваш идентификатор элемента вашего добавления ?, или вы можете использовать атрибуты данных, чтобы добавить дополнительные сведения о деталях для функции.

Если вам нужно отправить информацию на сервер для кэширования корзины, используйте вызов $ .ajax jQuery на сервер.