Обновление Ajaxing в div, как только добавили «Предмет»

Question

Я получил возможность успешно добавить свой товар в корзину. Тем не менее, я просто хочу, чтобы он обновлял (своего рода) div '#cart', оставаясь на исходной странице. Другими словами, товар добавляется в корзину, но отображается только при обновлении вручную. Я просто хочу, чтобы он выглядел гладко и ajax-y.

Views.py:

@login_required
def add(request, profile):
    if request.method != 'POST':
        return HttpResponseNotAllowed('POST')
    try:
        item = Item.objects.get(slug=slugify(request.POST['itemname']))
    except ObjectDoesNotExist:
        item = Item(name=request.POST['itemname'])
        item.save()
    profile = Profile.objects.get(user=request.user)
    profile.items.add(item)
    response = simplejson.dumps(
                {"status": "Successfully added."}
            )
    return HttpResponse (response, mimetype='application/json')

Шаблон:

<form id="addItemForm" class="form-style" method="POST" action="/item/add/{{ profile }}/"> 
     {% csrf_token %}
     <input id="item-input" class="input-text inline required" name="itemname" type="text" />
     <button class="blue" type="submit" id="additem">
         Add Item 
     </button> 
</form>

Сценарий:

$('#addItemForm').submit(function(e){
     e.preventDefault();
     var form = $("#additem").attr("action");
     var post_data = $.post($(this).attr('action'), $(this).serialize(), function(data, textStatus, jqXHR){
     $('.item-selection').html(data);

      result = $.ajax({
           url: form,
           data: post_data, 
           type: "POST",

            success: function(data) {
                  //alert("Successfully added");
          console.log()
          $("#item-selection").replaceWith($('#item-selection', $(html)));
                  //{[( THIS IS WHERE I'D LIKE IT TO REFRESH)]}
             }, 
             error: function(data) {
                  // return the user to the add item form
           $('#addItemForm').html(data);
         }
    });
});

Ошибка консоли:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

(прошу прощения за форматирование) Я новичок в Ajax. Это явно что-то не так с моим сценарием. Я просто не знаю, куда идти отсюда.

Заранее спасибо за помощь.

Answer 1

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

$('#cart').load('ajax/test.html #cart');