2013-03-26 3 views
0

Я работаю над отменой кнопок после того, как пользователь щелкнул их, чтобы предотвратить двойные представления или действия. У меня есть 2 типа кнопок. Кнопка php (или кнопка формы), которая выполняет отправку и перезагружает страницу. Я не получил этого. Потому что я просто отключу кнопку навсегда, а после перезагрузки снова нажимается. Вот пример:JQuery получить событие началось с нажатия кнопки

$(document).on('click', 'button', function() { 
    var $this = $(this); 
     htmls = $(this).html(); 
     $(this).prop("disabled", true); 
     setTimeout(function(){ 
      $this.prop("disabled", false); 
     }, 2000); 
}); 

это сейчас на 2 секунды, но я удалю часть setTimeout. Большие проблемы - это кнопки Javascript, эти кнопки не перезагружают страницу. Когда пользователь нажимает кнопку, он должен быть отключен до тех пор, пока процесс не завершится, и он не включится. Я могу проверить, действительно ли кнопка отправляет, или просто позволяет прояснить все поля в форме. Я думал, может быть, я смогу получить процесс, который был запущен нажатием кнопки, а затем, когда он закончится, я смогу работать. Возможно ли это? Или есть другой способ обхода?

ответ

1

Вы можете сделать это, как этот

<input type='button' value='Javascript button' id="btn" /> 
    <script> 
     $(document).ready(function() { 

      $("#btn").click(function() { 
       $(this).prop("disabled", true); 
       // long processing 
       $(this).prop("disabled", false); 
      }); 

      //OR with a jquery request 

      $("#btn").click(function() { 
       $(this).prop("disabled", true); 

       $.ajax({ 
        type: "POST", 
        url: "some url", 
        data: JSON.stringify(data), 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        sucess: function (data) { alert(data); } 
       }).always(function() { 
        $(this).prop("disabled", false); 
       }); 

      }); 


     }); 
    </script> 
+0

первое, что я хотел сделать, проблема, я хочу сделать глобальную функцию, это должно работать на каждой кнопке, и у меня уже есть много кнопок, вот почему я спросил, есть ли способ для завершения события, которое было начато с ума h a кнопка. –

+0

глобальная функция не имеет значения, если вы работаете с синхронным сценарием, если она асинхронна, чем вам потребуется дополнительная работа. – yogi

2

Вы можете использовать jQuery.ajax, чтобы сделать запрос на сервер и когда возвращается ответ от сервера затем продолжить работу по той же форме, или что-то другое. Что вы должны иметь в виду, что вам придется собирать все данные из вашей формы и отправлять их как json-объект на сервер.

Небольшой пример, основанный на коде:

$(document).on('click', 'button', function() { 
    var $this = $(this); 
     htmls = $(this).html(); 
     $(this).prop("disabled", true); 
     $.ajax({ 
      type: "POST", 
      url: "some.php", //url to make post to 
      data: JSON.stringify(formdata), //data collected from your form 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      }).done(function(result) { 
       //put here the code to process the result from server 
      }).fail(function() { 
       alert("error"); // if something went wrong on server 
      }) 
      .always(function() { 
       $(this).prop("disabled", false); //back enabling your button and maybe some other logic 
      });; 
}); 

подробнее о jQuery.ajax здесь http://api.jquery.com/jQuery.ajax/

если какие-либо другие вопросы, просто дайте мне знать;) Я надеюсь, что это поможет немного

Смежные вопросы