我们可以在按钮点击事件中使用 "window.setTimeout" 吗？

Question

我正在为 javascript 中的按钮单击事件获得响应后重新加载页面编写代码。但是它的不工作页面在按钮单击事件后没有重新加载。

我的表格

<div class="form-group">
 <label>My Label Name</label>
 <select class="form-control my_select2_id" id="my_select2_id" name="my_select2_id" tabindex="-1">
  <option></option>
    <?php if($table_rows != '') {
            foreach($table_rows as $each_row) {?>
       <option value="<?=$each_row['id']; ?>"><?=$each_row['my_column']; ?></option>
    <?php } }?>
 </select>
</div>
<div class="form-group">
<input type="text" class="form-control second_field" id="second_field_id" name="second_field_id" placeholder="Enter second field ID">
</div>
<div class="form-group">
  <input type="text" class="form-control my_third_field" id="my_third_field" name="my_third_field" placeholder="Enter Third Field">
</div>
<button type="button" id="my-button-id" class="btn btn-success float_left">Add Test Case</button>

我的 Select2 下拉 select 框是：

$("#my_select2_id").select2({
      placeholder: "Select One ID",
      allowClear: true,
      initSelection: function(element, callback) { }
});

我的 Ajax 电话是：

$('#my-button-id').click(function(){
---------
---------
---------
var data = $('#my_form').serialize();
$.ajax({
        type:"POST",
        url:"ajax/my_ajax_file.php",
        data:data,
        success:function(response)
        {
           if(response == 'error')
           {
            $('.failure-msg').text('Some problem occurred, please try again.'); 
            $('.form_error').show();
           }
        else
        {
            $('.form_error').hide();
            $('#my_form')[0].reset();
            $("#my_select2_id").select2('data', null);
            //$("#my_select2_id").val('').trigger('change');
            $('.myData').html(response);
            $('.success-msg').text('Data has been added.'); 
            $('.my_form_success').show();
            window.setTimeout(function(){location.reload()},1000)   
        }
    }

 });    
})

我的要求是我只想重置 select2 框，为此我遵循 2 种方法，即我必须重置未重置的 select2 框或重新加载页面，以便 select2 也将被重置。它既没有被 window.setTimeout(function(){location.reload()},1000) 刷新，也没有被 $("#my_select2_id") 重置 select2 框.select2('data', 空);谁能帮我解决这个问题。提前致谢。

Answer 1

如您问题的评论中所述，您的代码中没有明显的语法错误，但您没有通过仅检查代码的 success() 部分来检查 AJAX 调用中的错误.我建议添加 complete() 或 error() 函数，以确保您也能够对提交数据时可能发生的错误做出反应。

$.ajax({
    type:"POST",
    url:"ajax/my_ajax_file.php",
    data:data,
    success:function(response) {

    }, 
    error: function (jqXHR, status, message)
    {
      alert ("Submitting data failed with message: " + message);
    }
});

在页面刷新时，所有表单元素都将重置为其原始值，因此您不必在重新加载数据之前清除 SELECT 字段。

Answer 2

您可以试试：

setTimeout(function(){ location.reload(); }, 1000);

我们可以在按钮点击事件中使用 "window.setTimeout" 吗？

can we use "window.setTimeout" on button click event?

javascript

jquery

reload

page-refresh

jquery-select2