Question posted in
You can find the official documentation here.

Jquery async function with Ajax – Jquery ajax

I have a long executing PHP script, which generates some files. The total amount of files is known.
When clicking on a button i want to create a progress bar of the amount of files created.
The problem is, the bar only progresses once when the long execution finishes, and fills it completely rather than step by step based on the amount of files in a certain directory. I am not sure if either the JS async call is wrong or if there is some problem with async PHP executions. The scripts themselve work properly when executed one after another.
Any help is appreciated!

html:

<td class="Aktion">
  <div class="Aktion-Text">Generieren</div>
  <div class="Aktion-Ladebalken">
    <div class="Aktion-Ladebalken-filler"></div>
    <div class="Aktion-Ladebalken-Text"></div>
  </div>
  <input type="hidden" class="VSMon" value="1"/>
  <input type="hidden" class="VSJahr" value="21"/>
</td>

PHP code for counting files:

chdir("../pdfgenerierung/rechnungen");
$anz = (glob("Rechnung_".date("ym",strtotime($VerrechnungsMonat))."*"));
chdir("../../arbeitsplan");
echo count($anz);

this is my JS code:
Note that I´ve built in a total of 5 executions to not get stuck into an endless loop.

$(document).ready(function(){
    $(".Aktion").on("click",async function(){
        var vsmon = $(this).find(".VSMon").val();
        var vsjahr = $(this).find(".VSJahr").val();
        $(this).removeClass("Aktion"); //Prevent multiple execution
        element = $(this);


        $.ajax({
            //Gets the total amount of files, works properly
            url:"rgAnzahlBerechner.php?type=gesamt&VSMon="+vsmon+"&VSJahr="+vsjahr,
            dataType:"text",
            async:true,
            success:function(daten){
                var PatientenAnzahl = daten;
                $(element).find(".Aktion-Text").remove();
                $(element).find(".Aktion-Ladebalken").css({"height":"20px"});
                $(element).find(".Aktion-Ladebalken").css({"border-width":"2px"});
                $(element).find(".Aktion-Ladebalken-Text").html("0/"+PatientenAnzahl);

                //Call to the long executing script, works properly aswell
                $.ajax({
                    url:"../lfdverrechnung.php?VSMon="+vsmon+"&VSJahr="+vsjahr,
                    async:true,
                    success:function(){
                        console.log("Rechnungen erstellt");
                    }
                });

                temp(vsmon,vsjahr,element,PatientenAnzahl);
            }
        });
    });
});
async function temp(vsmon,vsjahr,element,PatientenAnzahl){
    
    var i=0;
    while(i<5)
    {
        setTimeout(function(){
            //PHP script which should return amount of files created
            $.ajax({
                url:"rgAnzahlBerechner.php?type=teil&VSMon="+vsmon+"&VSJahr="+vsjahr,
                dataType:"text",
                async:true,
                success:function(daten){
                    var new_width = (daten/PatientenAnzahl) * 200;
                    new_width = Math.round(new_width);
                    console.log(new_width);
                    $(element).find(".Aktion-Ladebalken-filler").css({"width":new_width+"px"});
                    $(element).find(".Aktion-Ladebalken-Text").html(daten+"/"+PatientenAnzahl);
                    if(daten == PatientenAnzahl)
                    {
                        $(element).find(".Aktion-Ladebalken-Text").html("Fertig!");
                        return;
                    }
                }
            });
        i++;
        },500);
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I´ve figured out the problem and found a solution. I have a DB-Connection file which i am using throughout my whole project, aswell here within those 2 files. It seems that there is a limit on how often a DBO Object can be used simultaneously within a PHP Session (or connection?).

    I was using the same database connection in my "rgAnzahlBerechner.php" and in my big script "lfdverrechnung.php", which meant that the script which was counting the generated files first wanted to establish a DB connection, which didn´t work until the big script was finished and released its DB connection for the other script to work. Another mistake was that i was including the DB-connection at top of the script (for all functions), rather than just the function i needed.

    I fixed the problem by seperating the two funtions within my "rgAnzahlBerechner.php" in two seperated files, one with db connection and one without. I could In conclusion "bad code" or "bad understanding of how things work" was the problem here.


  2. 0

    The xhr option of the $.ajax() method is used to track the upload progress.

    So you can do something like this:

    $.ajax({
        //Gets the total amount of files, works properly
        url:"rgAnzahlBerechner.php?type=gesamt&VSMon="+vsmon+"&VSJahr="+vsjahr,
        dataType:"text",
        async:true,
        success:function(daten){
            var PatientenAnzahl = daten;
            $(element).find(".Aktion-Text").remove();
            $(element).find(".Aktion-Ladebalken").css({"height":"20px"});
            $(element).find(".Aktion-Ladebalken").css({"border-width":"2px"});
            $(element).find(".Aktion-Ladebalken-Text").html("0/"+PatientenAnzahl);
    
            //Call to the long executing script, works properly aswell
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100);
                            //UPLOAD PROGESS
                        }
                    }, false);

                    xhr.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            //DOWNLOAD PROGRESS
                        }
                    }, false);

                    return xhr;
                    
                },
                url:"../lfdverrechnung.php?VSMon="+vsmon+"&VSJahr="+vsjahr,
                async:true,
                success:function(){
                    console.log("Rechnungen erstellt");
                }
            });
            temp(vsmon,vsjahr,element,PatientenAnzahl);
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search