[Answered ]-Django Ajax: response renders in another page not same page

by

1👍

✅

You are not preventing the form from being submitted in your function. You do write return false; but that won’t work here as that needs to be done in a fashion like below where somefunction will return false:

<form onsubmit="return somefunction()">

Instead you need to use the event passed to your handler and call preventDefault:

var saveForm = function (event) {
    event.preventDefault(); // prevent form submission
    var form = $(this);
    // Rest of your function
}

Also looking at your javascript you have only attached the on submit handler if your form has one of the classes js-instance-create-form, js-instance-update-form or js-instance-delete-form. But your forms have none of these classes. Add one them to your form:

<form method="POST" action="{% url handle_url %}" class="js-instance-create-form">

Also you attach the event to the forms in this manner:

$("#modal_form form").on("submit", ".js-instance-create-form", saveForm);

But the problem is that the form referred to here doesn’t exist yet! Hence your handler never gets attached to anything. Instead simply attach the handler to #modal_form (a parent which already exists) and it should work:

// Create instance
$(".js-add-inst-btn").on("click", loadForm);
$("#modal_form").on("submit", ".js-instance-create-form", saveForm);
  
// Update instance
$(".js-edit-inst-btn").on("click", loadForm);
$("#modal_form").on("submit", ".js-instance-update-form", saveForm);
  
// Delete instance
$(".js-del-inst-btn").on("click", loadForm);
$("#modal_form").on("submit", ".js-instance-delete-form", saveForm);
👤Abdul Aziz Barkat

Leave a comment