Добавить форму Django без обновления страницы с помощью AJAX

Question

Я пытаюсь реализовать django модель-форму, чтобы добавить новый элемент в таблицу категорий из формы добавления продукта, используя всплывающее окно html, и код работает нормально.Здесь я хочу, чтобы форма модели работала асинхронно, без обновления страницы с использованием javascript (ajax).

Данные заполняются в db_table после отправки ajax_form, но не отображаются в html-шаблоне, пока яобновите страницу. Как мне это сделать?

models.py

class Category(models.Model):
    title = models.CharField(max_length=250)

class Product(models.Model):
    name = models.CharField(max_length=250)
    category = models.ForeignKey(Category,on_delete=models.CASCADE)
    cost_price = models.FloatField()
    sell_price = models.FloatField()
    quantity = models.IntegerField()

forms.py

class AddProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'
class AddCategoryForm(forms.ModelForm):
    class Meta:
        model = Category
        fields = '__all__'

views.py

def add_product(request):
    categories = Category.objects.all()

    if request.method == 'POST':
        product_form = AddProductForm(request.POST or None)

        if product_form.is_valid():
            product = product_form.save(commit=False)
            product.save()

            return redirect('add_product')
        else:
            return HttpResponse(product_form.errors)
    else:
        product_form = AddProductForm()
    return render(request,'add_product.html',{'product_form':product_form, 'categories':categories})

def ajax_add_category(request):
    if request.method == 'POST':
        category_form = AddCategoryForm(request.POST or None)
        if category_form.is_valid():
            category = category_form.save(commit=False)
            category.save()
            return redirect('add_product')
    else:
        category_form = AddCategoryForm()
    return render(request,'add_product.html',{'form':category_form})

html template

    <label>Product Name</label>
    <input type="text" name="name" class="form-control" placeholder="Item Name..." maxlength="200" required id="id">
    <label>Category</label>
    <div class="form-group">
                 <select name="category" class="form-control mr-3" style="width:50%; display:inline;" required id="id_category">
{% for category in categories %}


<option value="{{category.id}}">{{category.title}}</option>
  {% endfor %}

Добавить новую категорию

html модальный

<div class="modal" id="item-category-modal">
 <div class="modal-body">
  <form method="POST" data-url="{% url 'add-category' %}" id="category-ajax-form">
    {% csrf_token %}
  <p><label for="id_title">Title:</label> <input type="text" name="title"></p>
 <button class="btn btn-primary mt-30">Add Category</button>
  </form>
 </div>
 </div>

javascript (ajax) код

<script type='text/javascript'>
  $(document).ready(function(){
    var $categoryForm = $('#category-ajax-form')
    $categoryForm.submit(function(event){
      event.preventDefault()
      event.stopPropagation()
      var $formData = $(this).serialize()
var $thisURL = $categoryForm.attr('data-url') 
$.ajax({
method: "POST",
url: $thisURL,
data: $formData,
success: handleFormSuccess,
});
});

    function handleFormSuccess(data, textStatus, jqXHR){
      $("#id_category").append(new Option(data.title, data.pk));

      $('#id_category').val(data.pk);
      $('#item-category-modal').modal('toggle');

// $categoryForm.reset(); // reset form data
}
});
</script>

urls.py

urlpatterns = [
path('add-category/', views.ajax_add_category, name='add-category'),
path('add/product/',views.add_product,name='add_product'),
    ]

Answer 1

Сначала вы создаете новый HTML-шаблон, скажем, ajaxCategories.html, и в этом вы добавляете этот код:

{% for category in categories %}
<option value="{{category.id}}">{{category.title}}</option>
  {% endfor %}

Теперь в вашем существующем HTML-шаблоне удалите этот код и включите его следующим образом:

<select name="category" class="form-control mr-3" style="width:50%; display:inline;" 
   required id="id_category">
 {% include "ajaxCategories.html" %}
</select>

Примечание: при включении используйте правильный путь, тогда будет включен только он.

Теперь в представлении ajax внесите некоторые изменения, подобные этому:

def ajax_add_category(request):
    if request.method == 'POST':
        category_form = AddCategoryForm(request.POST or None)
        if category_form.is_valid():
            category = category_form.save(commit=False)
            category.save()
            #return redirect('add_product')
            categories = Category.objects.all()
    else:
        category_form = AddCategoryForm()
    return render(request,'ajaxCategories.html',{'categories':categories})

Теперь в handleFormSuccess fn добавьте следующую строку кода:

$("#id_category").html(data)

С этой новой реализацией data, которую вы получаете в ответе ajax, представляет собой шаблон html intire, который вы поместите в тег select.