Zeer vreemd JQuery gedrag

[kinderpindakaas]

Ik heb hier een TODO list grotendeels met JQuery gemaakt.
Elk todo regel bevat "de tekst van de todo" en daarna 3 buttons "voldaan", "bewerken" en "verwijderen"

De hiërarchie van 1 todo regel is als volgt verpakt:

code:

<li id="todo-'.$this->data['id'].'" class="todo">
    <div class="text">$this->data['text'])</div>
        <div class="actions">
                <a href="#" class="done" title="Taak markeren als voldaan">Done</a>
                <a href="#" class="edit" title="Taak bewerken">Edit</a>
                <a href="#" class="delete" title="Taak verwijderen">Delete</a>
        </div>
</li>'

Als ik op "Voldaan" klik, wil ik dat hij eerst een streep door de tekst zet en daarna de database update voor die specifieke todo.

Met de volgende code kan ik wel de lijn door de tekst toggelen, maar wil hij de $.get en Alert regel niet uitvoeren.

code:

        // Listening for a click on a done button
    $('.todo a.done').live('click',function(){
        //done code//
        
        if ( $(this).closest('.todo').find('.text').hasClass('donetext') ) {
                  $(this).closest('.todo').find('.text').removeClass('donetext');
        } else {
                  $(this).closest('.todo').find('.text').addClass('donetext');
                      $.get("ajax.php",{'action':'done','id':currentTODO.data('id')});
              alert("done was clicked");
        }
    });

Als ik op edit klik, dan komt de todo tekst in een input veld te staan met daarachter een save/cancel button.
Het vreemde is dat de "Voldaan" toggle pas de $.get en alert regel uit voert als ik eerst een keer op edit heb geklikt.

De edit code is als volgt:

code:

// Listening for a click on a edit button
    $('.todo a.edit').live('click',function(){

        var container = currentTODO.find('.text');
        
        if(!currentTODO.data('origText'))
        {
            // Saving the current value of the ToDo so we can
            // restore it later if the user discards the changes:
            
            currentTODO.data('origText',container.text());
        }
        else
        {
            // This will block the edit button if the edit box is already open:
            return false;
        }
        
        if(container.text() != 'New Todo Item. Doubleclick to Edit.') 
        {
          $('<input type="text" style="width:90%" MAXLENGTH="350" id="inputedit">').val(container.text()).appendTo(container.empty());
        }
        else
        {
          $('<input type="text" style="width:90%" MAXLENGTH="350" id="inputedit">').val('').appendTo(container.empty());    
        }
        // Appending the save and cancel links:
        container.append(
            '<div class="editTodo">'+
                '<a class="saveChanges" href="#" id="savebutton">Save</a> or <a class="discardChanges" href="#">Cancel</a>'+
            '</div>'
        );
        
    });

Samengevat: met de voldaan button kan ik enkel een lijn door de tekst aan en uit zetten, maar als ik daarvoor een keer een edit heb gedaan, dan pas doet hij lijn togglen EN de $.get en alert regel uitvoeren.

Het lijkt alsof container.append in de edit code iets triggert waardoor hij ineens wel alle code van de Voldaan button wilt uitvoeren

[Verwijderd]

Krijg je een JavaScript error? Het enige dat ik kan verzinnen is dat currentTODO nog niet gedefinieerd is.

Overigens kan je code zwaar geoptimaliseerd worden in leesbaarheid maar misschien dat ik daar morgen iets over schrijf.

[Ventieldopje]

1e vraag bij debuggen, krijg je warnings / errors?

[Bosmonster]

Je gebruikt nu links (a), maar doet er verder niks mee. Als je toch geen fallback url gebruikt, gebruik dan ook geen loze links. Je cancelled nu namelijk ook de standaard actie van de link niet (event.preventDefault()). Ik zie wel ergens een return false, maar dat is er maar eentje en sowieso niet de juiste manier.

Ten tweede wil je niet eerst een streep zetten, en dan de request doen, maar eerst de request en pas de streep als je een positieve feedback krijgt natuurlijk.

Verder wat betreft je probleem, maak eens een jsFiddle-case, dat maakt het een stuk eenvoudiger om je te helpen.

[ Voor 10% gewijzigd door Bosmonster op 17-09-2011 21:47 ]

[kinderpindakaas]

Verwijderd schreef op zaterdag 17 september 2011 @ 20:08:
Krijg je een JavaScript error? Het enige dat ik kan verzinnen is dat currentTODO nog niet gedefinieerd is.

Overigens kan je code zwaar geoptimaliseerd worden in leesbaarheid maar misschien dat ik daar morgen iets over schrijf.

Dit was inderdaad het probleem.
Wel erg vreemd dat de $.get dan ook alle code na hem niet uitvoert

In een 2e .click functie voor a.edit en a.delete werd currentTODO aangemaakt.
Daar ontbrak dus nog a.done
Vandaar ook dat het via een edit wel steeds werkte omdat dan currentTODO ineens wel bestond

[Verwijderd]

kinderpindakaas schreef op zaterdag 17 september 2011 @ 23:40:
Wel erg vreemd dat de $.get dan ook alle code na hem niet uitvoert

Nee, na een JS error wordt niks meer uitgevoerd.

[kinderpindakaas]

Ok maar in welke vorm word zo'n javascript error opbaar gebracht?
Ik kreeg namelijk verder geen melding in de browser, die slaat gewoon vrolijk de betreffende javascript code over en gaat verder waar hij gebleven was.

[Naranya]

Welke browser?

[C0rnelis]

kinderpindakaas schreef op zondag 18 september 2011 @ 14:06:
Ok maar in welke vorm word zo'n javascript error opbaar gebracht?
Ik kreeg namelijk verder geen melding in de browser, die slaat gewoon vrolijk de betreffende javascript code over en gaat verder waar hij gebleven was.

Browsers zoals Chrome/Firefox hebben een ingebakken javascript console. Internet Explorer laat vaak een icoontje links onderin zien wanneer er een javascript syntax error is. Hoe het zit met debuggen van runtime JS in IE weet ik zo niet.

[kinderpindakaas]

Naranya schreef op zondag 18 september 2011 @ 14:09:
Welke browser?

Firefox 6.0.2

Nooit geweten -> Ctrl + Shift + K
Handig!

[ Voor 13% gewijzigd door kinderpindakaas op 18-09-2011 15:14 ]

[Naranya]

kinderpindakaas schreef op zondag 18 september 2011 @ 15:11:
[...]


Firefox 6.0.2

Nooit geweten -> Ctrl + Shift + K
Handig!

Dan zou ik eerder Firebug aanraden.

[kinderpindakaas]

Naranya schreef op zondag 18 september 2011 @ 17:22:
[...]

Dan zou ik eerder Firebug aanraden.

Ja inderdaad.
Ik kwam hem al tegen in een JQuery boek.
Vergemakkelijkt een hele hoop

[CopyCatz]

Firebug installeren, een flinke zooi console.log() erin zetten en kijken waar het fout gaat. In firebug zie je meteen of de get gestart wordt, en ik zou ook de error event van de httprequest trappen om te kijken of ie daar in belandt.

En dit:

if ( $(this).closest('.todo').find('.text').hasClass('donetext') ) {

Gaat dat werken? Je zoekt naar class text, hoe kan het dan ooit donetext zijn? Kun je niet beter toggleclass doen?

[ Voor 30% gewijzigd door CopyCatz op 19-09-2011 21:53 ]

[kinderpindakaas]

CopyCatz schreef op maandag 19 september 2011 @ 21:41:

En dit:

if ( $(this).closest('.todo').find('.text').hasClass('donetext') ) {

Gaat dat werken? Je zoekt naar class text, hoe kan het dan ooit donetext zijn? Kun je niet beter toggleclass doen?

Je kan en mag officieel volgens mij meerdere classes toewijzen aan één div container.
In mijn geval heeft de todo een class .todo en als er op "voldaan" geklikt word, dan voeg ik daar een extra class aan toe die een streep door de tekst zet.

Ik had eerst inderdaad toggleclass, alleen ik moest kunnen detecteren of de streep er al stond (dan undo functie) of dat er streep er nog niet stond (dan todo als voldaan markeren)

Maar nu vertrouw ik volledig op JQuery zonder dat ik nog check of het wegschrijven van "done" of "undo" naar de database is aangekomen. Erg robuust is het nog niet.