0

Bear with me, and I will try and explain the issue that I am sure others have faced but can find nothing on the web that points to a work around.

Page 1 (A PHP page with Ajax) Purpose to collect data and the redirect to the next page to display the updating page, i.e. 

window.location.replace("Updating.php"); <-- This is Page 2

Page 2 (A PHP page with minor html and PHP scripts that updates the server databases) The problem is that this page will not fully render until after the PHP scripts have completed. Because the process can take say 10 or so seconds the user is left wondering what is happening and essentially the Updating Page (Page 2) does not render until it the scripts are finished which of course defeats the purpose.

Question

Is there a similar function to the javascript onload <body onload="myFunction()"> that can render the page before the scripts begin running. I don't think there is but would appreciate and insight how I might overcome this problem.

Thanks

EDIT TO ADD REQUESTED AJAX CODE

function handleDataCallback(result) {
    var json = eval('(' + result + ')');
    if (json['msg'] != "") {
  //         alert(json['dirID']);
       processUpload(json['dirID']);
 }
};
/*
 * This is called when uploadFile.js is finished.
 * We many need to add an AJAX WaitforID here in case the processUpload takes too long. 
 */

function processUpload(data){
    var dir_name = data;
    $.ajax({
          url: 'processUpload.php',
          type: 'POST',
          data:  {'folderKey' : dir_name },
          success: function(data) {
                '<%Session["dir_id"] = "'+ dir_name + '"; %>';
             //Takes us back to the index file with the directory
            //  window.location.replace("../../index.php?dir_id="+dir_name); 
            window.location.replace("Updating.php"); 
          }
        });
};

/*
 * Obtains the dirID
 */
    function waitForDataID (handleDataCallback) {
    $.ajax({
        type: "GET",
        url: "extractArchives.php",  
        async: true,
        cache : false,
        timeout: 10000, // sets timeout to 30 seconds
        success : handleDataCallback,
        erorr : function  (XMLHttpRequest,textStatus, erorrThrown) {
            alert("erorr :" + textStatus + "(" + erorrThrown + ")");
            }
      });
   };
  • 1
    You mean that page 2 takes 10 seconds to respond? Use AJAX for this purpose. Return HTML code for a specific `
    `, and replace the div with the data received only when the server is ready. This is done in the background, so it won't affect the display.
     – SOFe Sep 12 '16 at 12:18
  • You could use the Output Control Functions to send feedback to the user meanwhile http://nl3.php.net/manual/en/ref.outcontrol.php – Vicente Gallur Valero Sep 12 '16 at 12:21
  • @TrueBlue if a webpage takes more than 10 seconds to load, it is not recommended that you make it a _single_ HTTP request, much less a frontend webpage displayed to the user. I think you should instead make it run in the background, and then the webpage keeps sending requests to see if the output is ready. – SOFe Sep 12 '16 at 12:22
  • I suppose that would mean kicking of a service of some sort? –  Sep 12 '16 at 12:24
  • Please show your ajax code and the error message that causes PHP to not fully run your scripts. – Daniel W. Sep 12 '16 at 12:32
  • I have just edited the original question to add the Ajax code as requested. Just to clarify - there is no error message. The page works it is just blocked. That is the issue –  Sep 12 '16 at 12:44
  • @POMapModer: "it is not recommended" - by whom? The approach you suggest is somewhat dangerous and could easily cause all sorts of process management problems on the server. – symcbean Sep 12 '16 at 12:53
  • @PEMapModder Well I thought I had tried that, but after restructuring my code and moving and consolidating all the jQuery/Ajax declarations and ensuring my function calls were placed after all the session variables were available, I finally got it working the way I wanted. So now I use Ajax to work its magic in the background. –  Sep 12 '16 at 15:11

2 Answers2

0

You can use the window.onload javascript feature. Put all your functionality inside. This way, your code will only be executed if the page has fully finished loading.

window.onload = function () {
    // Your code here ...
}
Peter
  • 8,776
  • 6
  • 62
  • 95
0

this page will not fully render until after the PHP scripts have completed

Your options are:

  • outputting the HTML before you do the slow PHP stuff. The problem with this is that you don't know the result of the PHP processing before displaying the page. Also you need to ensure that you flush all buffers before starting the slow stuff. There is no special function required (there is a register_shutdown() function which could be used - but its intended for other things and entirely unnecessary here). Make sure ignore_user_abort() is set.
  • speed up the PHP stuff (10 seconds suggests there's a lot of scope for improvement here - but you've not shown us any of the code being run.
  • show a holding page which redirects to the final page via javascript on completion or after a set delay.
  • remove the slow PHP code from the second page and invoke it as a subsequent request from that page (make sure ignore_user_abort() is set)

Do beware that all the options above, except for actually fixing the performance issue, expose a DOS vulnerability on your server.

Community
  • 1
  • 1
symcbean
  • 47,736
  • 6
  • 59
  • 94
  • Thanks - I think the answer lies embedded here. The 10 seconds is not avoidable because the user has probably upload a 100MB file. How would you suggest I go about issuing a "holding page" That is essentially what I was trying to do. –  Sep 12 '16 at 13:02
  • The network delay while a file is transferred is completely avoidable (and is not a delay in PHP, nor would it produce the symptoms you describe) - have you ever used gmail? https://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/ If the delay is in the time taken to process the data after it has arrived serverside, then it probably should not be handled synchronously with the UI processing - http://symcbean.blogspot.co.uk/2010/02/php-and-long-running-processes.html – symcbean Sep 12 '16 at 13:45
  • Okay, I might have to develop a way around this. Just a couple of points, I use plupload to upload the files and it produces a javascript progress page, which works well. The problem is that when I hit the "window.location.replace("Updating.php"); page the plupload dialogue box should go away. This is the confusing part. –  Sep 12 '16 at 13:59
  • No. When you trigger a navigation event, the screen is not redrawn until such time as the browser sees fit. Usually partial rendering indicates blocking content, but not always.You might consider modifying the current screen before applying the redirect (the latter would probably need to be done on a short timeout invoked from the former rather than synchronously to ensure the redraw occurs before the navigation). – symcbean Sep 12 '16 at 15:54
  • @symcbeam Yes, this finally dawned on me and through all the useful comments I managed to sort it out. They key factor was early declaration of all the scripts and introducing Ajax call so I could decouple that page to some extent and finally ensuring all the session variables were set before using a javascript call to the ajax routines. Works nicely now. –  Sep 12 '16 at 16:21