2017-12-31 42 views
0
    <div class="tab-pane fade active in" id="actorDiv"> 
         <form role="form" id="addActorForm" action="http://localhost:5000/SearchActor" method="post" onsubmit="loading()"> 
          <div class="form-group"> 
           <label for="actor">Actor Name</label> 
           <input name="actor" class="form-control" 
             id="actor" placeholder="Enter actor name"/> 
          </div> 
          <input type="reset" class="btn btn-default"> 
          <button type="submit" class="btn btn-default" data-loading-text="Sending...">Submit</button> 
         </form> 
        </div> 

Also, wenn ich dieses Formular summit, wird ein Ajax-Aufruf gemacht.Data-Loading-Text funktioniert nicht für Formular

<script type="text/javascript"> 
    var frm = $('#addActorForm'); 
    frm.submit(function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: frm.attr('method'), 
      url: frm.attr('action'), 
      data: frm.serialize(), 
      success: function (data) { 
       console.log('Submission was successful.'); 
       document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" + 
        " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
        " <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" + 
        "</div>"; 
      }, 
      error: function (data) { 
       console.log('An error occurred.'); 
       // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" + 
       //  " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
       //  " <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" + 
       //  "</div>"; 
       console.log(data); 
      }, 
     }); 
    }); 
</script> 

Jetzt dauert dieser Anruf eine lange Zeit, um zurückzukehren. Ich möchte, dass der Submit-Button während dieser Zeit auf data-loading-text geändert wird. Funktioniert der Datenlade-Text? Wenn ja, warum würde es nicht funktionieren? Der Ajax-Aufruf selbst funktioniert und kehrt gut zurück. Weiß einfach nicht, warum data-loading-text nicht funktioniert.

Antwort

0

können Sie verwenden BeforeSend und Complete:

<script type="text/javascript"> 
var frm = $('#addActorForm'); 
frm.submit(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     beforeSend: function(){ 
      button = $("#addActorForm button[type=submit]"); 
      button.html(button.attr("data-loading-text")); 
     }, 
     complete: function(){ 
      $("#addActorForm button[type=submit]").html("Submit"); 
     }, 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      console.log('Submission was successful.'); 
      document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" + 
       " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
       " <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" + 
       "</div>"; 
     }, 
     error: function (data) { 
      console.log('An error occurred.'); 
      // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" + 
      //  " <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" + 
      //  " <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" + 
      //  "</div>"; 
      console.log(data); 
     }, 
    }); 
}); 

0

$ .ajax() hat eine Eigenschaft namens beforeSend, in der Sie eine Funktion eines Codes definieren können, der am Anfang ausgeführt wird. Sie können diese Funktion verwenden, um den Text der Schaltfläche auf "Laden" zu aktualisieren. Wenn der Ajax-Aufruf abgeschlossen ist, können Sie den Schaltflächentext erneut aktualisieren.

http://api.jquery.com/jquery.ajax/