[javascript/jQuery] callback genegeerd

[Hawtin]

Goedendag,

Ik zit met een probleem; namelijk dat mijn callbacks lijken te worden genegeerd door jQuery. Hoewel mijn oorspronkelijke code veel uitgebreider is heb ik het even vereenvoudigd tot hetvolgende:

HTML:

        <table id="leesplank">
            <tr id="1"><td>aap</td><td>noot</td><td>mies</td><td>wim</td><td>zus</td><td>jet</td></tr>
            <tr id="2"><td>teun</td><td>vuur</td><td>gijs</td><td>lam</td><td>kees</td><td>bok</td></tr>
            <tr id="3"><td>weide</td><td>does</td><td>hok</td><td>duif</td><td>schapen</td><td></td></tr>
        </table>
        
        <div id="info">
        
        </div>

Cascading Stylesheet:

        #leesplank table, th, td {
            border: 1px solid black;
        }
        
        #leesplank td {
            padding: 50px 25px;
        }
        
        #info {
            width: 50px;
            height: 100px;
            background-color:red;
            display:none;
            position:absolute;
        }

JavaScript:

    var currentexpand = "";
    var lastexpand = "";
    
    function klap_terug_in(callback) {
        
        if (lastexpand != "") {
            // verwijder currenexpanded class   
            $(lastexpand).removeClass("rowexpanded");
        }
        if (currentexpand != "") {
            // verwijder currenexpanded class
            $(currentexpand).removeClass("rowexpanded");
                
            
            var row_id = $(currentexpand).attr("id");
            if (row_id != undefined) { 
                $("#info").slideUp(1000); 
                $(this).text("laden...");
            }
        }
        
        if (callback && typeof(callback) === "function") {
            callback();
        } 
        
        
    }
    
    function klap_uit(target) {
    
        // laad de div met de gegevens uit de query
        $("#info").text($(target).attr('id'));

        // zet #info precies onder de row
        var rowposition = target.offset();
        var rowtop = rowposition.top;
        var rowleft = rowposition.left;
        var rowheight = target.height();

        // zet layer op zijn plek
        $("#info").css('top', rowtop + rowheight - 1);
        $("#info").slideDown(1000); 
                                        
        // row class toggle
        target.toggleClass("rowexpanded");
    
    }
    
    
    // table row klik
    $(document).on('click', '#leesplank tbody tr', function() {
                
        // zoek en define row waarop is geklikt
        lastexpand = currentexpand;
        currentexpand = $(this);
        
        // als de huidige row expanded is moet die nu worden ingeklapt en het algoritme worden afgekapt
        if($(this).hasClass('rowexpanded')) {
            klap_terug_in();
            return false;
        }
        
        // als er al een row is uitgeklapt moet die eerst terug worden ingeklapt alvorens de nieuwe kan worden uitgeklapt
        if($("#info").css('display') != "none") {
            klap_terug_in(
                function() {
                    klap_uit(currentexpand);
                }
            );
        } else {
            klap_uit(currentexpand);
        }
        
        // geef aan welke rij er nu uitgeklapt wordt
        $("#info").html($(this).attr('id'));
        
    });

Uiteraard gebruik ik hiervoor ook jQuery.

Ik gebruik in de volgende tekst het woord "uitklappen", hier bedoel ik mee dat er een divje onder de table row wordt geplaatst d.m.v. een slideDown-animation.

Mijn bedoeling is hetvolgende: wanneer bijv row 1 is "uitgeklapt" en je klikt vervolgens op row 3, dan moet row 1 eerst inklappen, alvorens row3 wordt geladen met tekst, waarna op zijn beurt weer row3 uitklapt.

Hiervoor heb ik callbacks op vele manieren ingebouwd, maar wat ik ook doe, hij lijkt ze op een of andere manier te negeren, hoewel ze wel worden aangeroepen.

Wat doe ik fout? Hulde aan degene die mij uit de brand zou kunnen helpen.

[Hawtin]

Terwijl ik deze case aan het vertalen was naar het engels en in een JSFiddle te zetten geloof ik dat ik het al heb: de callback moet in de SlideDown() zitten en niet aan het eind van de klap_terug_in() functie. Ik zal de werkende JSFiddle zodirect posten.

[Hawtin]

http://jsfiddle.net/Egidius/Mz3Lj/85/

voìla, 5 uur zoeken en bestuderen zonder resultaat, maar het zelf maken werkt toch altijd het beste.

Evt. een slotje.

[RobIII]

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde. Gebruik voortaan ook even de edit knop ( ) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig

Desalniettemin fijn dat je 't gevonden hebt en de oplossing ook even deelt

[ Voor 8% gewijzigd door RobIII op 29-08-2012 15:51 ]