Невозможно отключить кнопку до тех пор, пока функция AJAX не будет выполнена успешно

#php #jquery #ajax #codeigniter

Вопрос:

У меня есть 2 поля ввода, 1 отображается пользователю с выпадающим списком всех значений. Другое поле ввода скрыто. Моя функция AJAX выполняет поиск идентификатора, соответствующего параметру, выбранному пользователем в первом поле ввода, и помещает этот идентификатор во второе скрытое поле ввода. И поисковый запрос берет идентификатор из скрытого поля для фильтрации данных.

Теперь по какой-то причине я не могу получить фильтр по идентификатору, так как для поиска соответствующего значения идентификатору требуется время, и моя кнопка отправки к этому времени уже перемещает пользователя на новую страницу. Поэтому в основном мне нужен способ отключить мою кнопку, пока запрос не закончит поиск соответствующего идентификатора для поискового запроса.

Текущий класс представления:

 lt;?php if ($redirects): ?gt;  lt;form name="redirectform" action="admin/redirects" method="post"gt;  lt;divgt;   lt;input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/gt;  lt;datalist id="search-from-list"gt;  lt;?php foreach ($allredirects as $allredirect){ ?gt;  lt;option value="lt;?php echo $allredirect-gt;from; ?gt;" id="lt;?php echo $allredirect-gt;id; ?gt;" /gt;  lt;?php } ?gt;  lt;/datalistgt;  lt;/divgt;   lt;input type="hidden" name="linkid" id="linkid" /gt;  lt;input type="hidden" name="linkidto" id="linkidto" /gt;   lt;input type="hidden" name="lt;?php echo $this-gt;security-gt;get_csrf_token_name();?gt;" value="lt;?php echo $this-gt;security-gt;get_csrf_hash();?gt;"gt;  lt;/divgt;    lt;input list="search-to-list" id="search-to" name="search-to" style="width:100%;" /gt;  lt;datalist id="search-to-list"gt;  lt;?php foreach ($allredirects as $allredirect){ ?gt;  lt;option value="lt;?php echo $allredirect-gt;to; ?gt;" id="lt;?php echo $allredirect-gt;id; ?gt;" /gt;  lt;?php } ?gt;  lt;/datalistgt;  lt;/divgt;  lt;/formgt;  lt;tablegt;  lt;?php foreach ($redirects as $redirect): ?gt;  lt;trgt;  lt;tdgt;lt;?php echo $from=str_replace('%', '*', $redirect-gt;from);?gt;lt;/tdgt;  lt;tdgt;lt;?php echo $redirect-gt;to;?gt;lt;/tdgt;  lt;/trgt;  lt;?php endforeach ?gt;  lt;/tablegt;  lt;?php echo form_close() ?gt; lt;/divgt; lt;?php else: ?gt;  lt;div class="no_data"gt;No Datalt;/divgt; lt;?php endif ?gt;  //AJAX call  lt;script type="text/javascript"gt;  $("#search-from").select(function(e){  var g = $('#search-from').val();  var id = $('#search-from-list').find("option[value='" g "']").attr('id');  $('#linkid').val(id);  });  $("#search-to").select(function(e){  var g = $('#search-to').val();  var id = $('#search-to-list').find("option[value='" g "']").attr('id');  $('#linkidto').val(id);  }); lt;/scriptgt;  

Я попытался отключить кнопку и удалить отключено, как только значение было введено во 2-е скрытое поле, но это не сработало:

 $(document).ready(function(){  $("#search-from").select(function(e){   var g = $('#search-from').val();  var id = $('#search-from-list').find("option[value='" g "']").attr('id');  $('#linkid').val(id);  $.ajax({success: function(result){  $("#submit").removeAttr("disabled");  }});  }); });  

Класс Контроллера:

 public function index()  {    if(isset($_POST["search-from"]) amp;amp; !empty($_POST["search-from"])){   if(isset($_POST["linkid"]) amp;amp; !empty($_POST["linkid"])){  $from_id = $_POST["linkid"];  $this-gt;template-gt;redirects = $this-gt;redirect_m-gt;order_by('`from`')-gt;get_by_id($from_id);  }  }else if(isset($_POST["search-to"]) amp;amp; !empty($_POST["search-to"])){   if(isset($_POST["linkidto"]) amp;amp; !empty($_POST["linkidto"])){  $to_id = $_POST["linkidto"];  $this-gt;template-gt;redirects = $this-gt;redirect_m-gt;order_by('`to`')-gt;get_by_id($to_id);  }  }else{  $this-gt;template-gt;redirects = $this-gt;redirect_m-gt;order_by('`from`')-gt;limit($this-gt;template-gt;pagination['limit'], $this-gt;template-gt;pagination['offset'])-gt;get_all();  }  $this-gt;template-gt;allredirects = $this-gt;redirect_m-gt;order_by('`from`')-gt;get_all();  $this-gt;template-gt;build('admin/index');  }  

Ответ №1:

Когда вы используете AJAX, вы можете отключить его перед отправкой запроса, отключить его, а затем, когда запрос будет завершен, вы можете включить его.

 $.ajax({  beforeSend: function() {    $("#mybutton").prop('disabled', true);  },  statusCode: {},  success: function(res) {  //to Do  },  complete: function() {  $("#mybutton").prop('disabled', false);  } }