[jQuery] Vraag m.b.t. ajax refresh

[stategamer]

Hallo tweakers,

Ik heb een vraagje over het gebruik met Ajax en PHP.

Ik heb zelf nu een applicatie gemaakt die constant zichzelf herlaad door middel van een 'dirty fix'
te outputten aan het eind, namelijk : <META HTTP-EQUIV="refresh"> .

Deze pagina blijft zichzelf herladen totdat er verandering in het script komt (update gevonden). En dan gooit het script geen meta tag meer mee, maar gewoon een DIE() met het bericht dat er een update is.

Nu weet ik dat Ajax een hele mooie manier is om dit te kunnen doen, zodat het script niet de hele pagina dan hoeft te (her)laden.

Alleen heb ik geen idee hoe ik dit zou kunnen opvangen in een ajax applicatie.
Nu ben ik al aan de slag geweest en heb ik :

JavaScript:

$(document).ready(function() {
        $('#reload').load('herlaad.php');
            setInterval(function() {
                $('#reload').load('herlaad.php');
            }, 3000)
    });

Zoals je misschien al ziet roept het script een extern script aan wat deze dan in de pagina laad, maar zodra er een update is gevonden blijft dit script natuurlijk alleen maar doorgaan (vanwege de interval).

Hebben jullie misschien tips, of hoe/wat ik misschien zou kunnen bekijken om dit op te kunnen lossen?

Bedankt!

[NMe]

...en waar precies zit je probleem in PHP? Dit is puur een javascript-probleem, of je nu AJAX gebruikt of niet. Dus: Waar hoort mijn topic?

PRG>>WEB

Ik ken geen jQuery maar je zal vast wel een functie hebben die een timer kan resetten of uitschakelen? Gewoon een kwestie van checken welke (JSON-)output je krijgt van je PHP-pagina en als die voldoet aan je verwachtingen de timer stoppen en je actie verder uitvoeren. Lijkt me niet echt rocket science.

[R4gnax]

stategamer schreef op zondag 26 september 2010 @ 15:44:
Hebben jullie misschien tips, of hoe/wat ik misschien zou kunnen bekijken om dit op te kunnen lossen?

Kijk eens naar jQuery's $.ajax() functie en de success, error en complete handlers. $.load() injecteert HTML, wat hier niet is wat je wilt hebben. Zoals NMe al zegt:waarschijnlijk wil je dit oplossen met JSON.

Verder kun je vanuit één van de drie handlers een nieuwe $.ajax() call starten wanneer dat nodig is. Zo hoef je ook niet met setInterval / setTimeout te lopen modderen.

[JaFFoG]

Misschien iets in de trend van:

JavaScript:

$(function(){
    // Execute function every 3000 ms (3 s).
    window.reloadInterval = setInterval('checkForChange()', 3000);
});

function checkForChange () {
    $.get('herlaad.php', function(data){
        // Pass 'reload' to keep reloading, or something else to stop?
        if (data != 'reload') {
            // Hold yer horses!
            clearInterval(window.reloadInterval);
        }
    }, 'text');
    // ^^^^^^ Use something appropriate here:
    // 'text', 'json', 'jsonp', 'html', 'xml', or 'script'.
}

Wat is precies de bedoeling van de code-check? Wat moet er gebeuren als er een wijziging is gevonden?
Het klinkt raar dat er juist niks moet gebeuren als er een wijziging is gevonden. Of begrijp ik je verkeerd?

[Voor 2% gewijzigd door JaFFoG op 27-09-2010 17:40. Reden: Typo :9]

[R4gnax]

JaFFoG schreef op maandag 27 september 2010 @ 17:36:
Misschien iets in de trend van:

Meer zoiets als het volgende, wat alles net wat netter gestructureerd doet en alleen van timers gebruik maakt die intern door de jQuery library gebruikt worden, aangezien timers een schaarse resource zijn. Gelijk ook maar even alles losgekoppeld met behulp van custom event triggering zodat je e.e.a. met minimale extra moeite nog eens zou kunnen hergebruiken.

JavaScript:

(function($){

var RETRY_RATE = 3000;
var UPDATE_URL = "reload.php";

/**
 * Checks whether an update is available.
 */
function checkForUpdate()
{
    // Cache a jQuery-selector for the notifier element.
    var $elem = $(this);

    // Stores update information.
    var update = null;

    /**
     * Called when an AJAX request has succeeded.
     * @param data   The JSON object.
     * @param status The text status of the AJAX request.
     * @param xhr    The original XmlHttpRequest object.
     */
    function onSuccess(data, status, xhr)
    {
        // Keep a reference to the update data for further processing.
        update = data;
    }

    /**
     * Called after any AJAX request, succesful or otherwise,
     * has completed.
     * @param xhr    The original XmlHttpRequest object.
     * @param status The text status of the AJAX request.
     */
    function onComplete(xhr, status)
    {
        if (update === null || update.available !== true)
        {
            // If no update information was available, or the
            // information returned indicates that no update is
            // available, delay for a given number of milliseconds
            // and retry.
            $elem
                .delay(RETRY_RATE, "update-polling")
                .queue("update-polling", checkForUpdate);
        }
        else
        {
            // Trigger a custom event handler on the notifier and
            // pass along the update's data.
            $elem.triggerHandler("updateReady", [update]);
        }

        // Always make sure to pump the notifier element's queue.
        $elem.dequeue("update-polling");
    }

    // Start an uncached request to the update notification page
    // at the given URL, expecting back a JSON-serialized object.
    $.ajax({
        url     : UPDATE_URL,
        cache   : false,
        dataType: "json",
        success : onSuccess,
        complete: onComplete
    });
}

/**
 * Triggered when an update is ready.
 * @param event  The event object.
 * @param update The update object.
 */
function onUpdateReady(event, update)
{
    event.preventDefault();
    event.stopPropagation();

    $(this).text(update.message);
}

$(document).ready(function() {

  // Listen for the 'updateReady' event and schedule an
  // update check in a custom queue that is subsequently
  // started up.
  $("#notifier")
    .bind("updateReady", onUpdateReady)
    .queue("update-polling", checkForUpdate)
    .dequeue("update-polling");
});

})(jQuery);

[JaFFoG]

R4gnax schreef op maandag 27 september 2010 @ 19:16:
[...]


Meer zoiets als het volgende, wat alles net wat netter gestructureerd doet en alleen van timers gebruik maakt die intern door de jQuery library gebruikt worden, aangezien timers een schaarse resource zijn. Gelijk ook maar even alles losgekoppeld met behulp van custom event triggering zodat je e.e.a. met minimale extra moeite nog eens zou kunnen hergebruiken.

Eens, is inderdaad veel netter. Het is aan de OP om te bepalen of hij deze (uitgebreide, wellicht wat overdreven) oplossing wilt of mijn (sumiere, wellicht te kort door de bocht) oplossing.

Of natuurlijk deur nummer drie, dat dit toch niet helemaal is waar de OP naar zoekt.

Mooi scriptje btw.

[stategamer]

Heel erg bedankt voor al jullie reacties!

JaFFoG schreef op maandag 27 september 2010 @ 17:36:
Misschien iets in de trend van:

JavaScript:

$(function(){
    // Execute function every 3000 ms (3 s).
    window.reloadInterval = setInterval('checkForChange()', 3000);
});

function checkForChange () {
    $.get('herlaad.php', function(data){
        // Pass 'reload' to keep reloading, or something else to stop?
        if (data != 'reload') {
            // Hold yer horses!
            clearInterval(window.reloadInterval);
        }
    }, 'text');
    // ^^^^^^ Use something appropriate here:
    // 'text', 'json', 'jsonp', 'html', 'xml', or 'script'.
}

Wat is precies de bedoeling van de code-check? Wat moet er gebeuren als er een wijziging is gevonden?
Het klinkt raar dat er juist niks moet gebeuren als er een wijziging is gevonden. Of begrijp ik je verkeerd?

Heel erg leuk script!
Op het moment krijg je alleen een bliepje te horen en een popup met de melding dat er een update is gevonden.

R4gnax schreef op maandag 27 september 2010 @ 11:12:
[...]


Kijk eens naar jQuery's $.ajax() functie en de success, error en complete handlers. $.load() injecteert HTML, wat hier niet is wat je wilt hebben. Zoals NMe al zegt:waarschijnlijk wil je dit oplossen met JSON.

Verder kun je vanuit één van de drie handlers een nieuwe $.ajax() call starten wanneer dat nodig is. Zo hoef je ook niet met setInterval / setTimeout te lopen modderen.

Hier ga ik vandaag nog even naar kijken, bedankt!

R4gnax schreef op maandag 27 september 2010 @ 19:16:
[...]


Meer zoiets als het volgende, wat alles net wat netter gestructureerd doet en alleen van timers gebruik maakt die intern door de jQuery library gebruikt worden, aangezien timers een schaarse resource zijn. Gelijk ook maar even alles losgekoppeld met behulp van custom event triggering zodat je e.e.a. met minimale extra moeite nog eens zou kunnen hergebruiken.

JavaScript:

(function($){

var RETRY_RATE = 3000;
var UPDATE_URL = "reload.php";

/**
 * Checks whether an update is available.
 */
function checkForUpdate()
{
    // Cache a jQuery-selector for the notifier element.
    var $elem = $(this);

    // Stores update information.
    var update = null;

    /**
     * Called when an AJAX request has succeeded.
     * @param data   The JSON object.
     * @param status The text status of the AJAX request.
     * @param xhr    The original XmlHttpRequest object.
     */
    function onSuccess(data, status, xhr)
    {
        // Keep a reference to the update data for further processing.
        update = data;
    }

    /**
     * Called after any AJAX request, succesful or otherwise,
     * has completed.
     * @param xhr    The original XmlHttpRequest object.
     * @param status The text status of the AJAX request.
     */
    function onComplete(xhr, status)
    {
        if (update === null || update.available !== true)
        {
            // If no update information was available, or the
            // information returned indicates that no update is
            // available, delay for a given number of milliseconds
            // and retry.
            $elem
                .delay(RETRY_RATE, "update-polling")
                .queue("update-polling", checkForUpdate);
        }
        else
        {
            // Trigger a custom event handler on the notifier and
            // pass along the update's data.
            $elem.triggerHandler("updateReady", [update]);
        }

        // Always make sure to pump the notifier element's queue.
        $elem.dequeue("update-polling");
    }

    // Start an uncached request to the update notification page
    // at the given URL, expecting back a JSON-serialized object.
    $.ajax({
        url     : UPDATE_URL,
        cache   : false,
        dataType: "json",
        success : onSuccess,
        complete: onComplete
    });
}

/**
 * Triggered when an update is ready.
 * @param event  The event object.
 * @param update The update object.
 */
function onUpdateReady(event, update)
{
    event.preventDefault();
    event.stopPropagation();

    $(this).text(update.message);
}

$(document).ready(function() {

  // Listen for the 'updateReady' event and schedule an
  // update check in a custom queue that is subsequently
  // started up.
  $("#notifier")
    .bind("updateReady", onUpdateReady)
    .queue("update-polling", checkForUpdate)
    .dequeue("update-polling");
});

})(jQuery);

Ook dit is een heel erg mooi script.
Morgen in de middag ga ik dit ook beter bekijken!