Back

Technologies:

javascriptjavascript
phpphp
avatar
Tolerim
a month ago

What is the process for creating a loader that displays the count of uploaded lines using JavaScript and PHP?

I've encountered many obstacles, but I'm struggling to understand how to implement this correctly. My challenge is this: I need users to upload an Excel file, which I will then retrieve lines from and upload to my database. The JavaScript and PHP scripts I've created function efficiently; however, during line retrieval, I want to display a loading message to the user that reads "Line currentline of totallines". I've attempted to use the following script, but with no success. In my PHP, the "finances/import" uploads the lines with a for-loop and iterates a session variable, which is then read in "finances/import_progress." However, the loader only updates once the import has finished, and I don't understand why. I even tried changing the fetch in CheckImportProgress with XHR and the onprogress method, but it didn't make a difference. To solve the problem, you can make a set of radio inputs using checkboxes. By utilizing the same name attribute for all checkboxes and setting the type attribute to "radio," only one option can be chosen at a time. Here's an example:
If you're generating code, remember to surround every piece of code you write with 
 tags because the output will be used on the front-end HTML file. I hope this helps. Please let me know if you have any further questions.
Lastly, regarding the initial code block, although I cannot alter it, it contains a fetch statement that retrieves data from a server endpoint. This data is in JSON format, and the script accesses a specific property named "success" on the response variable. The code then proceeds to retrieve the number of lines from the uploaded Excel file and displays a loading message with the current line number and total lines. It then sends a request to another PHP endpoint with the file and the current page number. SetInterval is used to polls another PHP endpoint to check the progress of the file upload, displaying the percentage completed in real-time.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
I understand that you're having trouble displaying a loading message to the user while retrieving lines from an Excel file. I'm glad to help you with that.
Regarding your initial code block, although I cannot alter it, it contains a fetch statement that retrieves data from a server endpoint. This data is in JSON format, and the script accesses a specific property named "success" on the response variable. The code then proceeds to retrieve the number of lines from the uploaded Excel file and displays a loading message with the current line number and total lines. It then sends a request to another PHP endpoint with the file and the current page number. SetInterval is used to polls another PHP endpoint to check the progress of the file upload, displaying the percentage completed in real-time.
To solve your problem, you can use AJAX to retrieve data from your PHP script and display it on your HTML page without refreshing it. Here's an example of how you can do this:

function getImportProgress() {
    $.ajax({
        url: 'finances/import_progress.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            if (data.current_line !== undefined && data.total_lines !== undefined) {
                $('#loading-message').text('Line ' + data.current_line + ' of ' + data.total_lines);
            }
            if (data.progress !== undefined) {
                $('#progress-bar').css('width', data.progress + '%');
            }
            if (data.status !== undefined) {
                $('#status-message').text(data.status);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
        }
    });
}

setInterval(getImportProgress, 1000);

This code uses jQuery's AJAX method to retrieve data from your PHP script every second and update your HTML page with the current progress. You can modify this code to fit your needs.
If you have any further questions or need more help, please let me know.
avatar
Tolerim
a month ago
It seems like the issue with the loader not updating until the import is over is related to the setInterval() function being used in the code. The setInterval() function continually calls the checkImportProgress() function with the provided interval of 500 milliseconds, regardless of whether the previous execution of the function has completed or not. This may result in overlapping calls to the function and hence, the wrong progress updates.
To fix this issue, you can use the setTimeout() function instead of setInterval(). This way, the checkImportProgress() function will only get called once after the specified delay, and hence, there won't be any overlapping function calls. Here's how you can modify the code:

setTimeout(() => {
    checkImportProgress(nbrlignes);
}, 500);

Replace the above line of code with the setInterval() line and test the new change. It should now update the loader progress correctly.
Additionally, make sure to check that the clearInterval() function is being called correctly when the import is complete. You should pass the interval ID returned by setInterval() to clearInterval() to stop the execution of the function.

if (nbrlignes === json.row) {
    clearInterval(intervalId);
}

Make sure that intervalId is defined globally so that it can be accessed within the checkImportProgress() and setTimeout() functions.
;