Wie kann die Ajax-Seitenaktualisierung innerhalb eines Schaltflächenklickereignisses verhindert werden?

Question

Übersicht:

Ich habe eine AJAX POST-Methode in einem JQuery Button Click Event eingerichtet. Diese Implementierung funktionierte einwandfrei und aktualisierte die Seite nicht durch Angabe von evt.preventDefault();. Aber jetzt habe ich einen Anruf auf das Formular submit $createForm.submit(); innerhalb der Schaltfläche Click-Ereignis hinzugefügt. (Um die Validierung auf der Seite auszulösen, bevor sie über Ajax einreichen.)

Ausgabe:

Das Problem mit dem Hinzufügen von diesem Aufruf ist, dass die Seite nun wieder aktualisiert, nachdem die Seite überprüft wird und ich den Absenden-Button klicken.

Ich habe eine Suche nach dem Problem und return false; am Ende der Schaltfläche klicken Ereignis as suggested here nicht verhindert die Seite aktualisieren.

Frage: Wie kann ich Ajax-Seitenaktualisierung innerhalb eines Knopfklickereignisses verhindern?

Html für die Schaltflächen in einem Drop-Down-Taste enthalten:

           <div class="btn-group dropup"> 
                <button type="submit" class="btn btn-success dropdown-toggle" style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                 SUBMIT <span class="caret"></span> 
                </button> 
                <ul class="dropdown-menu"> 
                 <li id="submitAndEmailBtn"><a>Submit + Email</a></li> 
                 <li role="separator" class="divider"></li> 
                 <li id="submitBtn"><a>Submit Only</a></li> 
                </ul> 
               </div> 

Der Ajax-Aufruf im submitAndEmailBtn Click-Ereignis:

//Ajax POST method fired on submitAndEmailBtn li button click 
    $('#submitAndEmailBtn').click(function(evt) 
    { 
     //call to prevent default refresh 
     evt.preventDefault(); 

     //call submit on the form to run validation 
     //before running the Ajax call. 
     $createForm.submit(); 

     //swal dialog to confirm or cancel Ajax call 
     swal({ 
      title: "Submit & Email", 
      text: "Are you sure?", 
      type: "warning", 
      showCancelButton: true, 
      closeOnConfirm: false, 
      showLoaderOnConfirm: true, 
     }, function() { 
      $.ajax({ 
       url: "@(Url.Action("EmailAndSubmit", "CreateEsc"))", 
       type: 'POST', 
      traditional: true, 
      data: $("#createForm").serialize(), 
      dataType: "json", 
      success: function (result) { 
       if (result.Success) { 
        swal("Emailed and Submitted!"); 
        window.location.href = result.redirectUrl; 
       } 
       else { 
        $('#submitStatus').text("Error occurred while processing your request"); 
        $(this).addClass('alert alert-danger fade in'); 
        $('#submitStatus').show(); 

       } 
      }, 
      //catches any HTTP error after AJAX method return 
      error: function (jqXHR, exception) { 
       var msg = ''; 
       if (jqXHR.status === 0) { 
        msg = 'Not connect.\n Verify Network.'; 
       } else if (jqXHR.status == 404) { 
        msg = 'Requested page not found. [404]'; 
       } else if (jqXHR.status == 500) { 
        msg = 'Internal Server Error [500].'; 
       } else if (exception === 'parsererror') { 
        msg = 'Requested JSON parse failed.'; 
       } else if (exception === 'timeout') { 
        msg = 'Time out error.'; 
       } else if (exception === 'abort') { 
        msg = 'Ajax request aborted.'; 
       } else { 
        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
       } 
       $('#submitStatus').text("Error occurred while processing your request. Detail: " + msg); 
       $(this).addClass('alert alert-danger fade in'); 
       $('#submitStatus').show(); 
      }, 
      }); 
     }); 

     return false; 

    }); 

Answer 1

Versuchen $ myForm.submit() mit $ myForm ersetzen .find (': submit'). klicken()

Gegeben von @Abraham auf this thread