JQuery загрузки анимации скрыть(), шоу() ошибка

Question

мой HTML-код:

<div id="success_message" style="display:none"> 
    <p>Good job!</p> 
</div> 
<div id="my-form"> 
    <form> 
     <input>....... (there's lots of inputs) 
      <input id="my-btn" type="submit" name="" value="Send" /> 
      <img id="loading-img" src="images/loading.gif" style="display:none"/> 
    </form> 
</div> 

Тогда у меня JavaScript в конце:

<script> 

    jQuery('#my-btn').click(function() { 
     jQuery('#my-btn').hide(); 
     jQuery('#loading-img').show(); 
    }); 


    jQuery("#my-btn").click(function (e) { 

     var str = ......... (there's a string) 
     jQuery.ajax({ 
      type: "post", 
      url: "/insert.php", 
      data: str, 
      dataType: "json", 
      success: function (result) { 
       if (result.success == 1) { 
        jQuery('#loading-img').hide(); 
        jQuery('#my-form').hide(); 
        jQuery('#success-message').show(); 
       } else { 
        jQuery('#my-btn').show(); 
       } 
      } 
     }); 
    }); 
</script> 

Проблема не в существе ул переданный или вызов ajax, потому что я тестировал свой код и данные, и все выполняется, и переходит к «if (result.success == 1)» часть кода.

Проблема заключается в том, что когда я облизываю «my-btn», он скрывает «my-btn», но изображение загрузки не появляется, а форма, в которой находится div, не скрывается, а затем сообщение об успешном завершении не отображается также ...

Что я делаю неправильно и как я могу сделать свой код лучше?

Answer 1

Вы используете кнопку (submit), которая перезагружает вашу страницу. Вы можете использовать либо e.preventDefault(); или вернуть false; во избежание перезагрузки. Смотрите пример here:

jQuery('#my-btn').click(function() { 
     jQuery('#my-btn').hide(); 
     jQuery('#loading-img').show(); 

     // put ajax call here.... 

     return false; 
    }); 

Кроме того, я бы поместить весь код в один метод. Нет причин иметь два обработчика кликов.

Answer 2

Как сказал Роман, вы можете добавить кнопку «удалить» кнопку отправки по умолчанию или просто превратить ее в кнопку. Кроме того, вы можете скрыть кнопку и отобразить сообщение загрузки в том же событии, нажмите:

jQuery("#my-btn").click(function (e) { 
     jQuery('#loading-img').show(); 
     jQuery('#my-btn').hide(); 
    . 
    . 
    . 

что-то вроде this