how to refresh a page on select using jquery... after a few seconds?

Question

Have been really struggling with this, I would appreciate any help or nudge in the right direction...

I have a dropdown bar with select that pulls results on a page with ajax... only trouble is that it duplicates the results being pulled in. However, this can be fixed if the page has a HARD refresh after the results are loaded, which is what I would like to emulate with jquery...

Basically, I would like it so that any time "selected" is loaded by a user, it then loads the results of the page and hard refreshes the window after a second or so.

This is the code I am trying to use but it's not working:

Edited attempt -

 <script type="text/javascript">
 jQuery(document).ready(function($) { 

   $('.filter').change(function(){
 setTimeout(function(){
  location.reload(true);
 },5000); // here 5000 is the delay of 5s
 });
 });                    
</script>

Can any kind soul please steer me in the right direction?

The html of the select tag's dropdown looks like this:

<select class="filter">
<option value="#">-- All --</option>
<option id="select-denver" value="denver" 
selected="selected">Denver</option>
<option id="select-laramie-wyoming" value="laramie-wyoming">Laramie, 
Wyoming</option>
</select>

Thank you so much for any help.

probably you should focus on solving duplicates issue instead of reloading the page. why they appear? — peresleguine, Dec 07 '18 at 17:56

score 1 · Accepted Answer · answered Dec 07 '18 at 18:19

1

Your opened scopes are not closed properly. Please close them first. And Try the code snippet below.

Note: This question is answered many times. Difference between setTimeout with and without quotes and parentheses

$(document).ready(function(){
  $('.filter').change(function(){
    setTimeout(function(){
      location.reload(true);
    },5000); // here 5000 is the delay of 5s
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="filter">
  <option value="#">-- All --</option>
  <option id="select-denver" value="denver" 
  selected="selected">Denver</option>
  <option id="select-laramie-wyoming" value="laramie-wyoming">Laramie, 
  Wyoming</option>
</select>

answered Dec 07 '18 at 18:19

Muznious

76
5

hmm thanks for the reply @munzious, I've edited my code on my original question to reflect that scope and what you suggested but I still can't seem to get anything to run ... I thought the "selected" tag would be what I would need to target originally? – Mixmastermiike Dec 07 '18 at 18:31
ah actually yes this indeed is how I fixed it... thanks so much for your answer. I am still not exactly sure why it wasn't working earlier but I've adjusted my question to what ended up working for me. – Mixmastermiike Dec 07 '18 at 18:47

score 0 · Answer 2 · answered Dec 07 '18 at 18:01

0

To trigger a page reload immediately, you’d use window.location.reload(true). If you want this to happen after a delay, specify it as the callback to window.setTimeout():

window.setTimeout(() => window.location.reload(true), delay);

Where delay is the length of time to wait before reloading. Note this function is non-blocking; code which comes after it will continue to execute until the timer runs out and the page reloads.

answered Dec 07 '18 at 18:01

MTCoster

5,868
3
28
49

Thanks for the reply MTCoster... hmm yeah I think that might be a good bet, but I can't seem to get anything to reload when I'm using it. I've edited my original code to emulate what I'm trying to do with it now.... if you have a sec later today can you maybe take a look and see if you notice any red flags? – Mixmastermiike Dec 07 '18 at 18:21

how to refresh a page on select using jquery... after a few seconds?

2 Answers2