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

Question

I am writing code for page reload after getting response from button click event in javascript. But its not working page is not getting reload after button click event.

My form

<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>

My Select2 dropdown select box is:

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

My Ajax call is:

$('#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)   
        }
    }

 });    
})

My requirement here is I just want to reset the select2 box, for this I am following 2 ways that is I have to either reset select2 box which is not getting reset or reload the page so that select2 also will be reset. It is neither refreshed by window.setTimeout(function(){location.reload()},1000) nor the select2 box is getting reset by $("#my_select2_id").select2('data', null); Can anyone please help me in this. Thanks in advance.

Answer 1

As mentioned in the comments to your question there is no obvious syntactical error in your code but you lack to check for errors on your AJAX call by only checking the success() portion of the code. I would recommend to either add the complete() or error() functions to make sure you are also able to react to errors that may occur while submitting the data.

$.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);
    }
});

On a page refresh all form elements will be reset to their original values, you therefor don't have to clear the SELECT field prior to reloading the data.