Force A Page Refresh

[Necuima]

Hi,

 

I am hoping that someone can advise me how to force a simple page refresh when a new script loads.

 

I have tried:

$(document).ready(function()

   {

   adjust_wrapper_size();  // to stop it from being too big!

   //adjust_sidebar_font_size();  // to simulate scalable text font

   window.location.href = window.location.href;
   });  // end document ready function

within <script type="text/JavaScript">

 

but it just goes into a loop.

 

Is there a way to force the window.location.href to fire only once?

 

Thanks in anticipation for any advice.

 

Cheers, Necuima

[HartleySan]

You could add a hash or URL parameter onto the end of the URL, which you can then test for in your JS script to avoid reloading the page more than once.

 

If you don't mind me asking though, why do you need to reload the page with JS in the first place?

[Necuima]

Hi HartleySan,

 

Thanks as always for getting back to me.

 

I have a script, let's call it script A which allows the user to select a database item for updating and then, once the user has selected an item for updating, A calls script B which enables the user to do the actual updating.  Once script B has done its stuff, it calls script A.  The problem is that when script B calls script A after the database update, script A still shows the data as it was before the update.

 

So I was trying to force script A to refresh thus showing the updated data.  If you manually force a screen refresh after A has loaded, all is well.

 

Your advice will be appreciated.

 

Thanks, and Cheers from Oz,

 

Necuima.

[HartleySan]

It sounds like what you're trying to do is Ajax.

Larry talks about Ajax in the book.

[Necuima]

Yes, I have used AJAX quite often and understand what to do to use it.

 

But even if I did use AJAX in this situation, after control is returned to script B after the file update, I want to go back to script A to re-list the (now updated) data which is pointed to from the database table.

 

There is a JavaScript method - window.location.reload(true) which would do what I want, but it seems that I cannot change the URL before I use it. (I tried your suggestion by adding a hash to the relocate in script B to relocate back to script A. After the document is ready in script A, I can remove the hash OK, but when I then use the window.location.reload(true) it uses the URL with the hash still in place which of course just causes a loop). 

 

It seems that I just have to press F5 after script A reloads!!

 

Script B does not do a database upload - it just loads an image file onto the server, replacing the image file already there and it does not change its name.

 

But thanks again for your suggestions - they are much appreciated.

 

Cheers from Oz.

[HartleySan]

Why not make an Ajax request, and after updating the data in the DB, return the updated data to the client-side script and use JS to change the appearance of the site accordingly?

 

I mean, that is essentially the entire point of Ajax to begin with. I'm still not sure why that's not an acceptable solution. To me, it sounds like Ajax is the solution.

[Necuima]

I fear that I have mis-led you and also that I am not understanding your advice.

 

Let me try and be a bit clearer - both script A and B are basically PHP scripts with JavaScript 'pieces'. Both use Larrys' PHP redux approach. Script A displays jpg images based on a database table. The data are jpg images, the file names of which are in the database. The jpg image files are on the server. A user can then select an image for changing. Once selected script A sends the key of the database record to script B.

 

Script B displays the image pointed to by that database table row and allows the user to select a replacement image. Larry's file move/upload logic is employed. The name of the jpg image is not changed thus there are no changes required to the database table itself.

 

Once the replacement jpg image has been uploaded to the server file system, control is returned to script A which again displays the images pointed to by the database table records allowing the user to select another image for changing, if they need to.

 

The problem that I have been having is that after control is returned to script A, the changed image does not display unless F5 refresh is pushed or the page is refreshed.

 

I do not understand how AJAX can overcome this - can you please help me understand?

 

If I was not clear in my earlier posts, please accept my apologies.

 

Many thanks in anticipation.

[HartleySan]

Oh, okay. I understand what you want now.

My general advice is to not use the same file name for a different pic, but if you insist upon that, the following will work:

http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url

 

In other words, if you have the following img element in your HTML:

<img src="a.jpg" id="a">

Then after script B finishes executing and returns control to script A, execute the following in your JS:

document.getElementById('a').src = 'a.jpg?' + new Date().getTime();

That help?

[Necuima]

Hi HartleySan,

 

Terrific - FYI I implemented the src filename extension in PHP rather than JavaScript and it works fine.  The extension was only needed for the image that had been changed so I did not apply the extension to the file names of the other images to avoid cluttering up the cache area.

 

Many thanks for the guidance.

 

Cheers from Oz, Necuima.

[HartleySan]

You can target specific images in both JS and PHP, so that's not an issue.

All the same, if you got it working, great!