Jquery Ajax-Aufruf Umleitungen an genannt url von derselben Vorlage insted

Question

Ich habe eine django Form wie:

<form class="myform" action="{% url "create" %}" method="post">{% csrf_token %} 
    <div class="results"></div> 
    <label class="input margin-bottom-10">{{form.name}} 
    <div class="name_error"></div> 
    </label> 
    <label class="input margin-bottom-10">{{form.age}} 
    <div class="age_error"></div> 
    </label> 
    <input class="margin-top-10 pull-right" type="submit" value="Confirm" > 
</form> 

und meine Jquery ist wie:

frm = $('.myform') 
frm.on('submit', function(event){ 
    create(frm); 
}); 



function create(frm) { 
    $.ajax({ 
     url : frm.attr('action'), // the endpoint 
     type : frm.attr('method'), // http method 
     data: frm.serialize(), // data sent with the post request 

     // handle a successful response 
     success : function(response) { 
      if(response.status == "success"){ 
       var success_message = "<div>some success message</div>) 
       $('#container_body').html(success_message); 
      }; 

      if(response.status == "error"){ 
       frm.find('.results').html("<div class='alert alert-mini alert-danger'>"+response.message+"</div>"); 
      }; 
     }, 
    }); 
}; 

Hier mein Ajax-Aufruf gut tut. Ich bekomme die richtige Antwort, aber DOM Manipulation ist falsch ..

Wenn ich auf die Schaltfläche absenden und es ist ein Fehler. Ich möchte die Fehlermeldung auf .results Klasse zeigen.

Wenn es einen Fehler gibt, wird das Formular mit Fehler für eine Weile angezeigt und verschwindet und meine URL-Seite mit JSON-Antwort wird angezeigt.

Mein Formular mit Fehlermeldung blieb nicht und leitet auf die URL-Seite mit JSON-Antwort um.

Was hier

Answer 1

Ihre Skripte hatte JS Fehler falsch ist und es eingereicht wird. Hier ist, was Sie tun müssen, um dies zu beheben. Lesen Sie Inline-Kommentare.

frm.on('submit', function(event){ 
    event.preventDefault(); //Prevents the default action from happening and Rayon mentioned 
    create(frm); 
}); 

Korrigieren Sie Ihre JS-Fehler in der Erfolgsfunktion. Denken Sie daran, JS-Fehler können Ihre gesamte App fehlschlagen.

success : function(response) { 
     if(response.status == "success"){ 
      var success_message = "<div>some success message</div>"; //This line had error in your code 
      $('#container_body').html(success_message); 
     } //You don't need a semicolon here 

     if(response.status == "error"){ 
      frm.find('.results').html("<div class='alert alert-mini alert-danger'>"+response.message+"</div>"); 
     } //You don't need a semicolon here 
    }// You dont need the redundant comma here which will error out in IE