Django JQuery AJAX формы представления в представлении и отображать результаты

Question

Есть много разных постов обо всех частях этого, я просто не могу понять, как все это сочетается.

У меня есть name, который отображается с update button следующимк этому.При нажатии update button отображается form для обновления name.В form это save changes button.Когда изменения сохранены, он должен перезагрузить name вверху, и если снова нажать update button, form должен показать new name info.

urls.py

path('profile/<int:pk>/', views.customer_profile, name='profile'),
path('update-profile/<int:pk>/', views.update_profile, name='update-profile'),

views.py

def customer_profile(request, pk):
    name = get_object_or_404(CEName, id=pk)
    name_form = NameForm(instance=name)
    return render(
        request,
        'customer/customer_profile.html',
        {'name':name, 'NameForm': name_form}
    )


def update_profile(request, pk):
    if request.POST:
        name_form = NameForm(request.POST)
        if name_form.is_valid():
            name_form.save()
    name = get_object_or_404(CEName, id=pk)
    context = {'name':name, 'NameForm': name_form}
    html = render_to_string('customer/customer_profile.html', context)
    return HttpResponse(html, content_type="application/json")

template.html

<div id="name" class="container d-flex justify-content-between pt-1">
    {{ name }}
    <button id="update_button" class="bold btn btn-main btn-sm button-main">UPDATE</button>
  </div>
  <div id="div_NameForm" class="container" style="display: none;">
    <hr size="3px">
    <form id="NameForm" method="POST" data-url-name="{% url 'customer:update-profile' name.id %}">
      {% csrf_token %}
      {{ NameForm.as_p }}
      <br>
    <button type="submit" id="save_changes" class="btn btn-main button-main btn-block">Save Changes</button>
    </form>
  </div>
<script src="{% static 'ce_profiles/ce_profiles_jquery.js' %}"></script>

jquery.js

$('#save_changes').click(function() {
  var NameForm = $('#NameForm');
  $.ajax({
      type: 'post',
      url: NameForm.attr('data-url-name'),
      data: NameForm.serialize(),
      dataType: 'json',
      success: function(data, textStatus, jqXHR) {
        $('#name').html(data); 
      }
    });
});

Код для update buttonпереключатель не отображается.

Answer 1

В вашем jQuery, для начала.
- Во-первых, вы могли бы (некоторые могут сказать должен ) поместить обработчик событий submit в форму вместо события click для кнопки .
- Во-вторых, вы выполняете вызов AJAX, поэтому вам следует запретить отправку формы, используя .preventDefault() для события submit , которое былосрабатывает при нажатии кнопки.Это предотвратит повторную загрузку страницы.
- В-третьих, при обратном вызове ajax success вы должны использовать text() вместо html(), поскольку name я представляю, что это текст, а не html, однако это всего лишь предположение.

$('#NameForm').on('submit', function(evt) {
  evt.preventDefault();
  var NameForm = $('#NameForm');
  $.ajax({
      ...
      success: function(response) {
          $(#name).text(response); // or response.name or whatever
      }
  });
})