AJAX / jQuery | IE doet niet hetzelfde als alle andere

[Verwijderd]

'Lo

Ik heb weer eens iets gebroddeld in Ajax en jQuery. Ik vind het raar, maar FF en Safari doen het prima, maar Internet Explorer werkt niet mee.

Het idee is dit:

Op de homepage moet een jQuery Cycle script komen dat een aantal fototjes laat 'rollen', en na verloop van tijd zichzelf update. Deze fototjes worden door PHP uit de autotelegraaf gesloopt. Vraag me niet waarom, maar dit wil men graag. U vraagt, wij draaien.

Het uit de auto telegraaf slopen van de juiste fotos gaat goed. PHP maakt hier een pakketje JSON van, en jQuery haalt die op en inject het in de cycle div. Vervolgens wordt er een mooie slideshow van gemaakt. In Safari en Firefox werkt dit prima. Zie hier een voorbeeld.

De quick n dirty:

JavaScript:

//tekst om te displayen tijdens het laden
var toLoad = '<p class="ajaxLoad"><img src="img/load.gif" alt="laden..." /> Een moment geduld alstublieft, de gegevens worden opgehaald.</p>';

//de breedte van de pictures in de occasion_box
var occasionPicWidth = 323;
//de hoogte van de pictures in de occasion_box
var occasionPicHeight = 242;

function loader (selector) {
    $(selector).html(toLoad);
}

function animateBar (selector, milisecs, maxwidth, callback) {
    $(selector).animate({width: maxwidth}, milisecs, "linear", callback );
}


function checkEmail(inputobj) 
{
    var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(inputobj.value)) 
    {
        alert('Uw E-mailadres is ongeldig.\nEen geldig e-mailadres heeft als formaat:\[e-mail]');
        return false;
    }
    else return true;
}

$(document).ready(function() {
    
    //lightboxen
    $(function() {
        $('.contentplaatje').lightBox({fixedNavigation:true});
    });
    
    loader("#occasion_layer"); //laten zien dat we aan het laden zijn
    
    $.getJSON ('ajax/loadOccasion.php',function(data)
    {
        var bla = '<h2>Onze occasions</h2><div class="occasion_box"><div class="occasion_pics">';
        
        for(i in data.images)
        {
            bla += '<img src="'+data.images[i];
            bla +='" alt="occasion plaatje" width="'+occasionPicWidth+'" height="'+occasionPicHeight+'" />';
        }
        
        bla+='</div><p><strong>'+data.naam+'</strong><br/>Prijs: '+data.prijs+' Bouwjaar: '+data.bouwjaar+'</p>';
        bla+='<a href="'+data.link+'">klik hier voor meer info</a><br/>Tijd tot auto-update:<br/><div class="occasion_status"></div></div>';

        $("#occasion_layer").html(bla); //occasionbox sluiten
        
        $('.occasion_pics').cycle({ 
            fx:    'fade', 
            speed: 2500
        });

        var aantal = data.images.length+2;
        var timeUpdate = aantal*2500;

        animateBar(".occasion_status",timeUpdate,"100%", function(){
            newOccasionTPL();
        });

    });
    

    function newOccasionTPL () 
    {
        loader("#occasion_layer"); //laten zien dat we aan het laden zijn
        
        $.getJSON ('ajax/loadOccasion.php',function(data)
        {
            var bla = '<h2>Onze occasions</h2><div class="occasion_box"><div class="occasion_pics">';
    
            for(i in data.images)
            {
                bla += '<img src="'+data.images[i];
                bla +='" alt="occasion plaatje" width="'+occasionPicWidth+'" height="'+occasionPicHeight+'" />';
            }
            
            bla+='</div><p><strong>'+data.naam+'</strong><br/>Prijs: '+data.prijs+' Bouwjaar: '+data.bouwjaar+'</p>';
            bla+='<a href="'+data.link+'">klik hier voor meer info</a><br/>Tijd tot auto-update:<br/><div class="occasion_status"></div></div>';
    
            $("#occasion_layer").html(bla); //occasionbox sluiten
            
            $('.occasion_pics').cycle({ 
                fx:    'fade', 
                speed:  2500
            });
            
            var aantal = data.images.length+2;
            var timeUpdate = aantal*2500;
            
            animateBar(".occasion_status",timeUpdate,"100%", function(){
                newOccasionTPL();
            });
        });
    }
});

Wat er in IE (7, 8 niet getest) mis gaat is dit: hij laadt geen nieuwe (random) gegevens in, en blijft bij de oude data. Hij ververst dus niet. Hij kiest bij het laden van de pagina een occasion uit, en blijft erbij.

Ik heb al verschillende dingetjes geprobeerd, maar debuggen voor IE is niet mijn specialiteit (blijkt). Iemand enig idee want ik zeg maar.

[Arjan A]

Mijn eerste 'fix' bij het niet updaten is dat ik achter de bestandsnaam die automatisch opgehaald moet worden een random iets erachter zet, bijv: 'bestand.php?rnd=' + Math.random();

[RobIII]

Verwijderd schreef op donderdag 12 november 2009 @ 23:40:
Ik heb al verschillende dingetjes geprobeerd

Zoals? Laat dat nou eens terugkomen in je topics, want ik zie hier niet veel meer dan een vraag, een lap code en...that's it. En je weet dat dat hier niet de bedoeling is. Daarbij: als je code post; hou 't dan bij relevante delen. Strip alles waar 't niet aan ligt/kan liggen eruit. Wat (bijv.) de checkEmail in bovenstaande code doet mag Joost weten.

Verder: Debuggen is geen rocket science. Met een welgeplaatste alert op strategische plekken kan iedereen simpel debuggen. Lees ook Debuggen: Hoe doe ik dat? eens door.

Overigens: je beseft dat 't waarschijnlijk niet toegestaan is autotelegraaf te gebruiken zoals je dat nu doet? Ik kan 't zo snel niet vinden daar maar feitelijk doen we hier niet aan "hulp" bij illegale (of duistere) zaken.

[ Voor 31% gewijzigd door RobIII op 12-11-2009 23:51 ]

[Patriot]

Is het niet de caching van IE? Probeer eens een random string aan ajax/loadOccasion.php toe te voegen, bijv. zo:

JavaScript:

$.getJSON("ajax/loadOccasion.php?r=" + Math.random(), function(data) { /* De rest hier */ });

[Verwijderd]

Bedankt Arjan A en Patriot, het zat inderdaad in de cache van IE. De random waarde meesturen loste het probleem op.

@Robin: bedankt voor de tip met betrekking tot de autotelegraaf. Ik zal dit de opdrachtgever even melden. Wat betreft je opmerkingen over mijn topic start, ik had inderdaad wat duidelijker kunnen zijn over wat ik al had geprobeerd (namelijk wat alerts op strategische plekken). Ik poste mijn vraag hier niet met het verzoek om mijn script te verbeteren, of te vervangen oid (dat doe ik namelijk nooit), maar om een schop in de goede richting. In dit geval de IE cache.

[ Voor 67% gewijzigd door Verwijderd op 13-11-2009 10:16 ]

[wackmaniac]

Even een tip tussendoor; nu loopt die timer af en dan wordt er pas nieuwe content opgehaald. Ik zou direct nieuwe content ophalen en als de timer verloopt de nieuwe foto's tonen en weer de volgende content ophalen. Dan krijgt de gebruiker niet steeds die loading-gif te zien.