[JQquery][PHP] Ajax functie wordt maar éénmaal aangeroepen.

[Afvalzak]

Ik probeer een 'progressbar' te maken in JQuery welke bij houd hoelang een bepaalde PHP functie uitgevoerd wordt (en hoever hij is natuurlijk).


Om dit te realiseren heb ik één Ajax request die de complexe functie uitvoert(roept een PHP functie aan die 20 plaatjes wegschrijft een aanpast) en een 'updateStatus' functie waarin een ajax request zit die kijkt hoever de PHP functie is en de progressbar update.

De code in JQuery is hieronder te zien:

JavaScript:

function updateStatus() {

    var pbValue = 0;
    console.dir("Update init!");
    $.ajax({
        cache : false,
            
        url : '../../getCurrentProcessStatus/',
    
        success : function(data) {

            console.dir("Start!");
            var data = jQuery.parseJSON(data);

            var current = data.current;
            var max = data.max;

            console.dir(current);

            var stepBy = 100 / max;

            pbValue = current * stepBy;

            $('#orderprogress').progressbar({
                value : pbValue
            });

            if (pbValue < 100) {
                console.dir("try again!");

                setInterval(updateStatus, 1000);
            }

        }
    });

}

PHP stukje:

PHP:

    public function getCurrentProcessStatus() {
        $this -> autoRender = false;

        $status['current'] = 10;
        $status['max'] = 20;

    

        echo json_encode($status);

    }

Het probleem is nu dat het de eerste keer goed, maar de 2e keer komt hij niet verder dan 'Update init!".

Dit is de log vanuit Javascript:

code:

1) Update init!

2) Start!

3) 10

4) try again!

5) Update init!

Hierna blijft hij alleen nog maar 'try again' en 'Update init' loggen maar komt hij nooit meer bij Start.
Op internet las ik vooral dat dit aan de cache property lag, maar die heb ik op false gezet.


ALs iemand een antwoord heeft krijgt hij een virtueel bosje bloemen Alvast bedankt.

[Verwijderd]

Je moet sowieso setTimeout gebruiken i.p.v. setInterval.

[Afvalzak]

Die heb ik ook gebruikt, maar maakte geen verschil, vandaar dat ik setInterval geprobeerd heb.

[R4gnax]

Kan sowieso een stuk compacter:

JavaScript:

function updateStatus() {
    
  console.log( "Update started..." );
  
  (function updateStatus_impl() {
  
    $
      .ajax({
        cache    : false,            
        dataType : "json",
        url      : "../../getCurrentProcessStatus/"
      })
      .done( function( data ) {
        var pct = 100 * ( data.current / data.max );
        
        console.log("Update running: " + pct + "%");
        
        $('#orderprogress').progressbar({
            value : pct
        });

        if ( data.current !== data.max ) {
          setTimeout( updateStatus_impl, 1000 );
        } else {
          console.log( "Update complete" );
        }
        
      });
  })();

}

[Merethil]

R4gnax schreef op zondag 04 november 2012 @ 14:39:
Kan sowieso een stuk compacter:

JavaScript:

function updateStatus() {
    
  console.log( "Update started..." );
  
  (function updateStatus_impl() {
  
    $
      .ajax({
        cache    : false,            
        dataType : "json",
        url      : "../../getCurrentProcessStatus/"
      })
      .done( function( data ) {
        var pct = 100 * ( data.current / data.max );
        
        console.log("Update running: " + pct + "%");
        
        $('#orderprogress').progressbar({
            value : pct
        });

        if ( data.current !== data.max ) {
          setTimeout( updateStatus_impl, 1000 );
        } else {
          console.log( "Update complete" );
        }
        
      });
  })();

}

Kan nog een stuk korter door jQuery.getJSON te gebruiken

[R4gnax]

Merethil schreef op zondag 04 november 2012 @ 19:30:
[...]


Kan nog een stuk korter door jQuery.getJSON te gebruiken

De getJSON method doet standaard een GET request zonder een cache breaker. Dat gaat niet hetzelfde resultaat geven...

[Naranya]

R4gnax schreef op zondag 04 november 2012 @ 20:45:
[...]


De getJSON method doet standaard een GET request zonder een cache breaker. Dat gaat niet hetzelfde resultaat geven...

JavaScript:

url: "../../getCurrentProcessStatus/?" + Math.random()

[R4gnax]

Naranya schreef op zondag 04 november 2012 @ 21:05:
[...]

JavaScript:

url: "../../getCurrentProcessStatus/?" + Math.random()

Math.random geeft wegens zwaktes in javascript random number generators die tot hogere collision rates kunnen leiden, ook niet een bevredigend resultaat. jQuery gebruikt om die reden een timestamp ipv een random number. Het idee om zelf een random token er achter te hangen is an sich wel OK, natuurlijk.

[Afvalzak]

Bedankt voor de suggesties, maar geen van deze dingen lijkt te helpen. Ik heb daarom een testproject aangemaakt en daarin van scratch begonnen daarin heb ik een php functie die een for loop van 40 sec. doorloopt:

PHP:

public function longOperation(){
        
        $this->autoRender = false;
        
        for($i =0; $i < 20;  $i++){
            
            sleep(2);
            
            
        }
        
        return true;                
    }

In php heb ik ook deze functie (die ik gewoon overgenomen heb):

PHP:

public function getCurrentProcessStatus() {
        $this -> autoRender = false;
    
        echo json_encode(array('current' =>  10, 'max' => 20));

    }

Het JQuery gedeelte is nu als volgt:

JavaScript:

    updateStatus();

    $.ajax({
        cache : false,
        dataType : "json",
        url : '../../longOperation/',
async: true

    }).done(function(data) {
        console.dir("PHP is done!");
    });

JavaScript:

}
function updateStatus() {

    console.dir("First updatecall");

    (function updateStatus_impl() {

        console.dir("update that thing!");
        $.ajax({
            cache : false,
            dataType : "json",
            url : '../../getCurrentProcessStatus/',
                       async: true
            complete : function(data) {

                console.dir("run update");

                                setTimeout(updateStatus_impl, 1000);


            }
        })

    })();

}

Het lijkt erop dat nu het volgende gebeurt:

de updateStatus wordt 1 keer aangeroepen en doorlopen, vervolgens roept de laatste call : updateStatus_impl()) de methode nog een keer aan maar stopt hij met de AJAX call, tot (en dat is wel vreemd volgens mij) de longOperation() klaar is.

Het lijkt dus haast alsof de PHP maar 1 methode tegelijk kan runnen en dus de andere call op wachten zet?


Even een update!

Het probleem zit hem in het feit dat PHP de sessie moet vrijgeven waarin de plaatjes worden weggeschreven. Ik heb dit gedaan door de sessie aan het begin van de for loop te starten en aan het eind te sluiten.

dus:

for(blaat){

session_start();

*magic*

session_write_close();

[ Voor 9% gewijzigd door Afvalzak op 05-11-2012 16:48 ]