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下拉选择框是：

$("#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'，null）;任何人都可以帮助我。提前谢谢。

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”吗？

2 个答案: