Bootstrap Ladda UI를 사용할 때 회 전자를 멈출 수 없음

Question

웹 개발에 익숙하지 않은 나는 이것을 설명하기 위해 최선을 다할 것이다. 나는 우리에게 양식을 보내려고 노력 중이며 아래 코드는 정보를 전달하고있다. 양식에서 PHP 파일 및 PHP 파일로 전송 결과를 반환합니다.

그래서 함수에서 Ladda UI를 추가하려고하는데 사람들이 메시지 보내기 버튼을 클릭하면 회전이 시작되고 PHP 파일이 결과를 반환 할 때 중지됩니다. 인덱스 페이지의 Ladda.bind('.ladda-button');이 회전하기 시작하지만 시간 제한을 두지 않으면이 작업을 중단하는 방법을 찾을 수 없습니다.

아래 코드를 읽는 것에 대한 지식이 부족합니다. 제발 도와주세요/코드 작동 방식 및 해결 방법을 설명하십시오. 고마워요 ..

https://github.com/msurguy/ladda-bootstrap

$(function() { 
$("input,textarea").jqBootstrapValidation({ 
    preventSubmit: true, 
    submitError: function($form, event, errors) { 
     // additional error messages or events 
    },  
    submitSuccess: function($form, event) {   
     event.preventDefault(); // prevent default submit behaviour  
     // get values from FORM 
     var name = $("input#name").val(); 
     var email = $("input#email").val(); 
     var phone = $("input#phone").val(); 
     var message = $("textarea#message").val(); 
     var firstName = name; // For Success/Failure Message 
     // Check for white space in name for Success/Fail message 
     if (firstName.indexOf(' ') >= 0) { 
      firstName = name.split(' ').slice(0, -1).join(' '); 
     }   
     $.ajax({ 
      url: "././mail/contact_me.php", 
      type: "POST", 
      data: { 
       name: name, 
       phone: phone, 
       email: email, 
       message: message 
      },  
      cache: false, 
      success: function() {     
       // Success message 
       $('#success').html("<div class='alert alert-success'>"); 
       $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
        .append("</button>"); 
       $('#success > .alert-success') 
        .append("<strong>Your message has been sent. </strong>"); 
       $('#success > .alert-success') 
        .append('</div>');     
       //clear all fields 
       $('#contactForm').trigger("reset"); 
       $('#contactForm').click() 
      }, 
      error: function() { 
       // Fail message 
       $('#success').html("<div class='alert alert-danger'>"); 
       $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
        .append("</button>"); 
       $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
       $('#success > .alert-danger').append('</div>'); 
       //clear all fields 
       $('#contactForm').trigger("reset"); 
      }, 
     }) 
    }, 
    filter: function() { 
     return $(this).is(":visible"); 
    }, 
}); 
$("a[data-toggle=\"tab\"]").click(function(e) { 
    e.preventDefault(); 
    $(this).tab("show"); 
}); 

});

HTML 코드를 추가 :

<form name="sentMessage" id="contactForm" novalidate> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name."> 
           <p class="help-block text-danger"></p> 
          </div> 
          <div class="form-group"> 
           <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address."> 
           <p class="help-block text-danger"></p> 
          </div> 
          <div class="form-group"> 
           <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number."> 
           <p class="help-block text-danger"></p> 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea> 
           <p class="help-block text-danger"></p> 
          </div> 
         </div> 
         <div class="clearfix"></div> 
         <div class="col-lg-12 text-center"> 
          <div id="success"></div> 
          <button type="submit" id="form-submit"class="btn btn-xl ladda-button" data-style="expand-right" data-color='blue' data-size="l" ><span class="ladda-label">Send Message</span></button> 

         </div> 
        </div> 
       </form> 

코드를

<script> 
     // Bind normal buttons 
     Ladda.bind('.ladda-button'); 
    </script> 

Answer 1

이 코드를 시도 애니메이션을로드하기 위해 :

$(function() { 
    var button; 
    $('.ladda-button').click(function(e){ 
     button = this; 
    }) 
    $("input,textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     },  
     submitSuccess: function($form, event) {   
      event.preventDefault(); // prevent default submit behaviour  
      var l = Ladda.create(button); 
      l.start(); // Starts the spinner 
      // get values from FORM 
      var name = $("input#name").val(); 
      var email = $("input#email").val(); 
      var phone = $("input#phone").val(); 
      var message = $("textarea#message").val(); 
      var firstName = name; // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
      if (firstName.indexOf(' ') >= 0) { 
       firstName = name.split(' ').slice(0, -1).join(' '); 
      }   
      $.ajax({ 
       url: "././mail/contact_me.php", 
       type: "POST", 
       data: { 
        name: name, 
        phone: phone, 
        email: email, 
        message: message 
       },  
       cache: false, 
       success: function() {     
        // Success message 
        $('#success').html("<div class='alert alert-success'>"); 
        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
        .append("</button>"); 
        $('#success > .alert-success') 
        .append("<strong>Your message has been sent. </strong>"); 
        $('#success > .alert-success') 
        .append('</div>'); 
        l.stop(); // Stops the spinner 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
        $('#contactForm').click() 
       }, 
       error: function() { 
        // Fail message 
        $('#success').html("<div class='alert alert-danger'>"); 
        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
        .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#success > .alert-danger').append('</div>'); 
        l.stop(); // Stops the spinner 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
      }) 
     }, 
     filter: function() { 
      return $(this).is(":visible"); 
     }, 
    }); 
    $("a[data-toggle=\"tab\"]").click(function(e) { 
     e.preventDefault(); 
     $(this).tab("show"); 
    }); 
}); 

을 그리고이 라인 1

을 제거

Ladda.bind('.ladda-button');