[jQuery] Probleem combi $.ajax & ckeditor

[Xanland]

Geachte mede-GoT'ters,

Op dit moment ben ik mijn adminpanel van mijn CMS aan het ombouwen van frames naar een ajax-based omgeving. Dit heeft voornamelijk te maken met de makkelijkere designmogelijkheden die er dan komen.

Op dit moment heb ik een probleem met ckeditor die voor een loop zorgt. Als je nu op een tag met de pageloader-class klikt wordt de volgende code "uitgevoerd":

JavaScript:

$(function() {
    callBinds();
});
function onPageLoader() {
    //Binds voor javascripts op subpagina's
}
function loadPage(urll) {
    $.ajax({ 
        url: urll,
            success: function(page){
                    if (typeof CKEDITOR.instances.inhoud != 'undefined') CKEDITOR.instances.inhoud.destroy (true);
                    $('.page').html (page);
                    callBinds();
                    onPageLoader();
                }
    });
}

function callBinds() {
    $('.pageloader').click(function () {
        loadPage($(this).attr('href'));
        return false;
    });
    
    $('input[type="submit"]').click(function() {
        $.ajax({
        type: "POST",
        success: function(page){
                $('.steps').html (page);
                return false;
            },
        complete: function (){
                callBinds();
                onPageLoader();
             }
        });
        return false;
    });
}

callBinds() is er voor om te zorgen dat er steeds weer die javascript kan worden gebruikt die er in staat.

Wat is nou het probleem, zul je je nu afvragen?
Nou, op het moment dat je een pagina oproept die CKEditor bevat, gaat het fout. In zo'n pagina wordt:

JavaScript:

CKEDITOR.replace( 'inhoud' );

aangeroepen om de textarea met class ckeditor te vervangen. Dat gebeurt allemaal goed. Alleen wanneer ik dus op zo'n link klik wordt ie dus eerst gedestroyed, zoals je ziet, en dan weer op de pagina aangemaakt. Wat nu optreed is dat de ajax call in de loadPage-functie eerst 1 keer gebeurt, volgende paginaklik 2 keer, dan 4 keer, 8 keer enzovoort. Dus steeds dubbel.
Wat doe ik hier dus fout?

[_Thanatos_]

Ik begrijp nog niet helemaal waar/welke link kennelijk blijft staan en steeds dubbele event bindings krijgt, dus misschien kun je ergens een uitgeklede testcase neerzetten die het probleem illustreert?

Het is denk ik ook verstandig je te verdiepen in $.Deferred. Daarmee heb je geen gerommel meer met callback-functies en kun je beter overzicht daarin creëren.

[C0rnelis]

Blijkbaar stapelen de event-handlers zich op bij $('.pageloader'). Dit zou dus op te lossen moeten zijn met of het eerst destroyen van deze handlers of kijken of het gebruik van on() het oplost óf er moet zich een situatie voordoen waardoor de html dus niet wordt vervangen maar de event handlers toch opnieuw worden toegewezen..

Dit is waar je code op neer komt. Kijk maar eens in je browser console hoe vaak het wel niet wordt aangeroepen. Heb je zelf al geprobeerd te debuggen ?

[ Voor 41% gewijzigd door C0rnelis op 17-06-2012 21:58 ]