[jQuery] Next parent first child

[bindsa]

Ik heb een klein probleem met jQuery. Het gaat om een lijst met <input> fields in een tabel, als een user in een input field iets invult en op enter drukt wordt de data verzonden naar de server, dit werkt allemaal, maar nu wil ik dat na het drukken op enter het volgende <input> field de focus krijgt. Dit werkt niet. De lijst met invoervelden ziet er zo uit:

HTML:

<table>
<tr>
 <td><input type = 'text' id = 'cijfer1' class = 'cijfer' /></td>
</tr>
<tr>
 <td><input type = 'text' id = 'cijfer2' class = 'cijfer' /></td>
</tr>
<tr>
 <td><input type = 'text' id = 'cijfer3' class = 'cijfer' /></td>
</tr>
</table>

En de JavaScript code zo:

JavaScript:

$(document).ready(function(){ 
    $(".cijfer").keypress(function(event) {
        if(event.keyCode == 13) {
            //Data verzenden hier
            $(this).parent().next().find(':nth-child(1)').focus();
        }
    });
});

Mijns inziens moet ik om naar het volgende invoerveld te gaan eerst naar de parent navigeren, daar het volgende element van pakken en dan de eerste child en die de focus geven. Maar dit werkt niet. Ik heb het gedebugd met Firebug, de fout lijkt te zitten in het next() gedeelte. Maar hiervoor weet ik geen alternatief. Wie kan helpen?

[CodeCaster]

Moet je niet nog een aantal parents omhoog, omdat de parent van het input-element een <td> is die in z'n eentje in een <tr> zit (en dus geen next heeft)?

[ Voor 8% gewijzigd door CodeCaster op 09-03-2010 08:17 ]

[bindsa]

Oh. Das echt superdom van mij. Dat ga ik eens proberen. En jawel, nu werkt het perfect. Bedankt Codecaster.

[ Voor 32% gewijzigd door bindsa op 09-03-2010 08:16 ]

[Bosmonster]

Ik zou iets meer gebruik maken van de selector/traversing mogelijkheden van jQuery:

JavaScript:

$(this).closest('tr').next('tr').find('input').focus();

Leest ook een stuk makkelijker

[bindsa]

Bosmonster schreef op dinsdag 09 maart 2010 @ 10:00:
Ik zou iets meer gebruik maken van de selector/traversing mogelijkheden van jQuery:

JavaScript:

$(this).closest('tr').next('tr').find('input').focus();

Leest ook een stuk makkelijker

Het is inderdaad een stuk eleganter? Maar is het ook sneller? (Ik kan me voorstellen dat dit trager is, omdat jQuery nu ook daadwerkelijk moet zoeken op element namen)

[Bosmonster]

Performance verschil is redelijk te negeren voor dit soort selectors, zeker aangezien je hem maar 1x uitvoert bij enter. Het enige performance-verschil zou kunnen zitten in closest vs parent.parent.parent, maar daar is de closest method, zeker in de laatste jQuery, extreem voor geoptimaliseerd.

Een van de grote voordelen van jQuery is de leesbaarheid, daar zou ik dan ook dankbaar gebruik van maken

[_Thanatos_]

Niet om het een of ander, maar je moet wel een verdomd goeie reden hebben wil je dit soort nonstandaard gedrag inbouwen. Als je op enter drukt, *hoort* het formulier te submitten. Zo werkt het, zo is het gespecificeerd, en zo verwachten toetsenbord-gebruikers het ook. Het volgende element focus geven doet men met de tab-toets. Zo aan je (smerige ) html te zien, zal de tab-toets gewoon werken, en heb je m.i. geen geldige reden om raar gedrag in te bouwen.

Ja, ik klink een beetje streng, maar dingen expres kapot maken zou gewoon strafbaar moeten zijn.

[Verwijderd]

_Thanatos_ schreef op woensdag 10 maart 2010 @ 01:57:
Als je op enter drukt, *hoort* het formulier te submitten. Zo werkt het, zo is het gespecificeerd, en zo verwachten toetsenbord-gebruikers het ook.

Misschien even lezen:

L0calh0st schreef op dinsdag 09 maart 2010 @ 08:01:
als een user in een input field iets invult en op enter drukt wordt de data verzonden naar de server, dit werkt allemaal

_Thanatos_ schreef op woensdag 10 maart 2010 @ 01:57:
Het volgende element focus geven doet men met de tab-toets. Zo aan je (smerige ) html te zien, zal de tab-toets gewoon werken, en heb je m.i. geen geldige reden om raar gedrag in te bouwen.

Ja, ik klink een beetje streng, maar dingen expres kapot maken zou gewoon strafbaar moeten zijn.

Je klinkt niet streng, je klinkt een beetje overdreven fanatiek. Vraag de TS eerst eens waarom hij doet wat hij doet voordat je erover oordeelt.

Weleens excel of Google docs gebruikt? Misschien moet je daar ook even gaan klagen dat ze "dingen kapot maken".

[_Thanatos_]

Aha, dus de server moet gewoon een classname toevoegen aan het "volgende" veld. Server weet welke velden er gesubmit zijn en welke nog niet. Dus als velden 1 en 2 gesubmit zijn, geef je nummer 3 een class "setfocus" ofzo.
Dan kun je met een scriptje dat veld focussen:

JavaScript:

$(".setfocus").focus();

jQuery voobeeldje

[bindsa]

_Thanatos_ schreef op woensdag 10 maart 2010 @ 01:57:
Niet om het een of ander, maar je moet wel een verdomd goeie reden hebben wil je dit soort nonstandaard gedrag inbouwen. Als je op enter drukt, *hoort* het formulier te submitten. Zo werkt het, zo is het gespecificeerd, en zo verwachten toetsenbord-gebruikers het ook. Het volgende element focus geven doet men met de tab-toets. Zo aan je (smerige ) html te zien, zal de tab-toets gewoon werken, en heb je m.i. geen geldige reden om raar gedrag in te bouwen.

Ja, ik klink een beetje streng, maar dingen expres kapot maken zou gewoon strafbaar moeten zijn.

Er is voor die enter toets gekozen omdat het om een cijfer programma gaat dat binnen een schoolomgeving gaat draaien. Het huidige systeem werkt ook met de enter toets en om acceptatie problemen te voorkomen is in de requirements vastgesteld dat het nieuwe systeem ook met de enter toets moet werken en bovendien met AJAX moet werken en niet met een standaard 'submit' knop. Dit zijn niet door ons vastgestelde eisen en daar moeten wij ons aan houden.

Wat is er trouwens zo smerig aan de HTML? Hij valideert netjes, alleen die ID's zijn een beetje ranzig, alleen cijfers mogen om een of andere reden niet, dus moet ik er wel wat voorpoten.

Om een en ander op te helderen heb ik even een testversie online gezet:
http://teunlassche.netau.net/basisextra/modules/cijfers.php

Dit is een testversie, alles kan en moet nog beter worden. Maar de basis is er. (Lay-out is nog helemaal niks aangedaan, komt later nog)

Feedback is natuurlijk altijd welkom

[Bosmonster]

Wat is er trouwens zo smerig aan de HTML? Hij valideert netjes

Errors found while checking this document as XHTML 1.0 Strict!
Result: 52 Errors, 2 warning(s)

[ Voor 25% gewijzigd door Bosmonster op 10-03-2010 18:06 ]

[bindsa]

Bosmonster schreef op woensdag 10 maart 2010 @ 18:05:
[...]


[...]

Oh lol, da's een tag errortje dat er een uurtje geleden in is gekropen toen ik <span>'s toevoegde. Met een PHP loopje worden het dan al gauw veel errors. Zal het even fixen. Bedankt in ieder geval.

Update: Opgelost

[ Voor 12% gewijzigd door bindsa op 10-03-2010 19:03 ]

[_Thanatos_]

Wat is er trouwens zo smerig aan de HTML? Hij valideert netjes, alleen die ID's zijn een beetje ranzig, alleen cijfers mogen om een of andere reden niet, dus moet ik er wel wat voorpoten.

Dat je een table gebruikt waar je geen tabulaire data toont. Aan je opzetje te zien zou ik er gewoon divjes van maken, of hooguit een <ul>, maar zeker geen table. Ook van de "leerling x" tekstjes netjes labels maken, bijvoorbeeld...

HTML:

<div>
  <label for="leerling1">Leerling 1</label>
  <input type="text" id="leerling1" name="leerling1" maxlength="3"/>
</div>

En dan die label left floaten en een vaste breedte geven, en de divs clearen.

Toch blijf ik van mening dat de enter-toets hier niet op z'n plaats is. Als de gebruiker de enter-toets "gewend" is, wat natuurlijk goed zou kunnen, dan is dat zijn probleem, want dan gaat ie in andere applicaties wel de fout in.

In je opzet zou je de enter-toets kunnen/moeten gebruiken om alle velden in 1 keer te updaten dmv een normale formpost. Dit doe je dan alleen als javascript uitstaat of (en dat is echt netjes) als de browser om de eoa reden geen XHR heeft.

[bindsa]

_Thanatos_ schreef op woensdag 10 maart 2010 @ 21:44:
[...]

Dat je een table gebruikt waar je geen tabulaire data toont. Aan je opzetje te zien zou ik er gewoon divjes van maken, of hooguit een <ul>, maar zeker geen table. Ook van de "leerling x" tekstjes netjes labels maken, bijvoorbeeld...

HTML:

<div>
  <label for="leerling1">Leerling 1</label>
  <input type="text" id="leerling1" name="leerling1" maxlength="3"/>
</div>

En dan die label left floaten en een vaste breedte geven, en de divs clearen.

Toch blijf ik van mening dat de enter-toets hier niet op z'n plaats is. Als de gebruiker de enter-toets "gewend" is, wat natuurlijk goed zou kunnen, dan is dat zijn probleem, want dan gaat ie in andere applicaties wel de fout in.

In je opzet zou je de enter-toets kunnen/moeten gebruiken om alle velden in 1 keer te updaten dmv een normale formpost. Dit doe je dan alleen als javascript uitstaat of (en dat is echt netjes) als de browser om de eoa reden geen XHR heeft.

Ok, ik ben zeker met je eens dat de oplossing met de labels netter is. Blijft er wel 1 probleem over: Hoe doe ik dan de animated gif's net zoals ze nu zijn?

Ik was zelf ook al van plan om een submitknop te laten zien als de user geen ajax had, maar hoe kan ik op een gedegen manier checken of een user JavaScript heeft? Ik zat zelf te denken aan het plaatsen van een submit knop in de HTML en die dan d.m.v. van JavaScript op display:none te zetten. Alleen gaat dat de mist in als een browser wel JavaScript ondersteunt en geen XHR.

[Bosmonster]

L0calh0st schreef op donderdag 11 maart 2010 @ 08:40:
[...]Alleen gaat dat de mist in als een browser wel JavaScript ondersteunt en geen XHR.

Ehh.. die kans is nihil.

Overigens ben ik het niet met _Thanatos_ eens dat je hier geen tabel mag gebruiken. Integendeel. Het gaat gewoon om een lijst van naam/value-pairs, wat dus prima in tabelvorm te gieten is. Hier divs gebruiken vind ik vele malen slechter. Alternatieven zijn een ul/ol of dl.

[ Voor 38% gewijzigd door Bosmonster op 11-03-2010 09:50 ]

[bindsa]

Bosmonster schreef op donderdag 11 maart 2010 @ 09:47:
[...]


Ehh.. die kans is nihil.

Overigens ben ik het niet met _Thanatos_ eens dat je hier geen tabel mag gebruiken. Integendeel. Het gaat gewoon om een lijst van naam/value-pairs, wat dus prima in tabelvorm te gieten is. Hier divs gebruiken vind ik vele malen slechter. Alternatieven zijn een ul/ol of dl.

Ok, dus het idee van een submit knop, en die dan hiden met JavaScript is wel goed?

Ik zat zelf ook niet echt aan div's te denken, mijns inziens zijn die meer bedoeld om de interface in contentblokken te verdelen. Wel denk ik dat ik de <label>-tags ga toevoegen.

[Bosmonster]

Labels gebruiken is sowieso good practice.

De submitknop hiden met javascript is ook een goed idee ja

[bindsa]

Ok, nu loop ik tegen het volgende probleem aan, ik wil errorhandling aan de ajax requests toevoegen, lukt allemaal wel, maar ik wil dat als er een error optreedt er een plaatje achter de tabelrij zichtbaar wordt die aangeeft dat er een error is geweest.

Dat is op zich ook geen probleem, behalve dat ik moet weten in welke rij ik het plaatje moet laten zien, bij normale requests krijg ik de id weer terug van de server, maar als de request mislukt krijg ik dus ook geen id terug van de server. Nu heb ik geprobeerd om dan de id maar lokaal op te slaan in het stukje Javascript. Maar dat mislukt omdat er gebruik wordt gemaakt van asynchrone request, dus als het oude request nog bezig is en er wordt al een nieuwe gedaan worden de 'oude' variabele waarden overschreden en is de rij id dus verkeerd.

Weet iemand hier een oplossing voor?

De relevante Javascript code:

JavaScript:

$(document).ready(function(){ 
    $(".scores").keypress(function(event) {
        if (event.keyCode == 13) {
            rowId = $(this).closest('tr');
            currentField = $(this);
            submit(rowId, currentField);
        }
    });
    $(".scores").change(function() {
        rowId = $(this).closest('tr');
        currentField = $(this);
        submit(rowId, currentField);
    });
    $("#submitrow").hide();
    $("#notesform").submit(function(event) {
        event.preventDefault();
        return false;
    });
}); 
function submit(id, field) {
    basicScore = $(id).find('.basic').val();
    extraScore = $(id).find('.extra').val();
    fieldId = $(id).attr('id');
    currentValue = $(field).val();
    if (basicScore != "" && extraScore != "") {
        $(id).find('.result').html('<img src = "../img/loader.gif"/>');
        $(field).closest('tr').next('tr').find('input').first().focus();
        $.ajax({ 
            url: 'addscores.php?ajax=1&action=addscores',
            type: 'POST',
            ifModified: true,
            data: { "id" : fieldId , "basicScore" : basicScore, "extraScore" : extraScore },
            cache: false,
            /*error: function() {
                $(rId).html('<img title = "Er is een fout opgetreden, probeer het opnieuw" src = "../img/error.png"/>');
            },*/
            success: function(result) {
                result = result.split(':');
                resultId = "#" + result[1];
                if (result[0] == 'true') {
                    $(resultId).find('span').html('<img title = "Scores succesvol toegevoegd" src = "../img/checkmark.png" />');
                }
                else {
                    $(resultId).find('span').html('<img title = "Geen legitieme scores ingevuld" src = "../img/error.png" />');
                }
            }
        }); 
    }
    else if (currentValue != "") {
        $(field).parent().next('td').find('input').focus();
    }
}

En de HTML/PHP code:

PHP:

<form id = 'notesform' action = '?ajax=0&amp;action=addscores' method = 'post'>
<table>
<thead>
<tr>
 <td>Leerling</td>
 <td>Basispunten</td>
 <td>Extrapunten</td>
</tr>
</thead>
<tbody>
<?php
//Leerlingenlijst moet hier
for($i = 0; $i <= 10; $i++) {
    print "<tr id = 'r$i'> \n";
    print " <td><label for = 'b$i'>Leerling $i: </label></td> \n";
    print " <td><input id = 'b$i' type = 'text' class = 'scores basic' name = 'basic[]'/></td> \n";
    print " <td><input type = 'text' class = 'scores extra' name = 'extra[]'/></td> \n";
    print " <td><span class = 'result'></span></td> \n";
    print "</tr>";
}
?>
<tr id = 'submitrow'>
 <td colspan = '4'><input type = 'submit' value = 'Voeg toe' /></td>
</tr>
</tbody>
</table>
</form>

En wederom online te bekijken op:
http://teunlassche.netau....tra/modules/addscores.php

[pieturp]

Uit de categorie "kleine dingetjes":

Values van attributes in HTML met dubbele quotes.
Enne; ik zou Leerling ($i+1): gebruiken

Overigens kun je prima met JavaScript nagaan of je wel XHR kunt gebruiken. Maar zoals Bosmonster al zei, is dat ook een beetje overdreven.

[bindsa]

pieturp schreef op donderdag 11 maart 2010 @ 21:22:
Uit de categorie "kleine dingetjes":

Values van attributes in HTML met dubbele quotes.
Enne; ik zou Leerling ($i+1): gebruiken

Overigens kun je prima met JavaScript nagaan of je wel XHR kunt gebruiken. Maar zoals Bosmonster al zei, is dat ook een beetje overdreven.

Dit zijn tijdelijke leerlingnamen, in de toekomst zal er een lijstje met echte leerlingnamen uit een database worden opgehaald en op het scherm worden getoond.

Ik ben een beetje te lui om continu dubbel quotes te escapen, dus gebruik ik maar enkele

[ Voor 8% gewijzigd door bindsa op 11-03-2010 22:38 ]

[Bosmonster]

Je bent niet lui genoeg om overal zinloze spaties om de ='en te mikken die de leesbaarheid ernstig benadelen

[crisp]

Als een attribuutvalue enkel letters of cijfers bevat kan je de quotes ook gewoon weglaten

[Bosmonster]

crisp schreef op vrijdag 12 maart 2010 @ 10:03:
Als een attribuutvalue enkel letters of cijfers bevat kan je de quotes ook gewoon weglaten

In XHTML?

[crisp]

Bosmonster schreef op vrijdag 12 maart 2010 @ 10:44:
[...]


In XHTML?

Wie houdt zichzelf tegenwoordig nou nog voor de gek met XHTML?

[Bosmonster]

crisp schreef op vrijdag 12 maart 2010 @ 11:08:
[...]

Wie houdt zichzelf tegenwoordig nou nog voor de gek met XHTML?

TS

[pieturp]

crisp schreef op vrijdag 12 maart 2010 @ 10:03:
Als een attribuutvalue enkel letters of cijfers bevat kan je de quotes ook gewoon weglaten

best practice!

[R4gnax]

L0calh0st schreef op donderdag 11 maart 2010 @ 17:36:
Weet iemand hier een oplossing voor?

Ik zou eens beginnen met 3/4 van je oplossing te herschrijven, want het is een rommeltje: Je bent aan de hand van IDs de hele tijd je jQuery collecties opnieuw aan het opbouwen. In plaats daarvan zou je ze eens moeten leren cachen. Daarnaast plaats je overal events op, in plaats van gewoon een paar events te binden op een hoog niveau en van delegation gebruik te maken. E.e.a. versimpelt je code dramatisch, bijvoorbeeld al omdat je niet continu met .closest() of .parent() hoeft te werken.

Verder heb je geloof ik niet erg veel verstand van hoe de scoping van variabelen in closures in javascript werkt en heb je denk ik nog niet genoeg affinititeit met jQuery om te weten wat deze allemaal voor je af kan handelen.

Had je deze kennis wel, dan zou je zien hoe simpel dit scriptje kan zijn. Kijk maar naar de leidraad, die ik even snel voor je in elkaar heb gezet.

JavaScript:

$(document).ready(function(){
        $("form#scores")
            .bind("keypress", function(event){
                // Didn't press the [Enter] key
                if (event.keyCode !== 13) return;

                // Find all input fields on the same row level as
                // the event target. Find the index of the event
                // target in this collection of inputs.
                var $row = $target.closest("tr");
                var $fields= $row.find(":input");
                var index = $fields.index(event.target);

                // The event target wasn't one of the input fields.
                if (index < 0) return;

                // Prevent the default behaviour of pressing
                // the [Enter] key.
                event.preventDefault();

                // If the input field doesn't have a value, don't
                // do anything with it.
                if ($fields.eq(index).val() == "") return;

                // Go to the next input field.
                index++;

                // If we have a next input field in the row, focus it.
                if (index < $fields.length)
                {
                    $fields.eq(index).focus();
                }
                // Else find the first input field in the next row (if
                // it exists) and focus on it.
                else
                {
                    $row.next("tr").find(":input:first").focus();

                    // When switching to a new row, trigger the form submit
                    // event while passing along an extra bit of data
                    // containing the relevant row.
                    $(this).trigger("submit", [$row]);
                }
            })
            .bind("submit", function(event, $row) {
                // Form will be submitted asynchronously.
                event.preventDefault();

                // If no valid $row is given, the event was triggered by
                // something other than our script: don't do anything.
                if ($row == null) return;

                // Set the progress throbber.
                var $result = $row.find(".result");
                $result.html("<img src='../img/loader.gif'/>");

                $.ajax({
                    url: 'addscores.php?ajax=1&action=addscores',
                    type: 'POST',
                    ifModified: true,
                    data: $row.serialize(), // only this row
                    cache: false,
                    error: function() {
                        $result
                            .html("<img src='../img/error.png'/>")
                            .attr("title", "Er is een fout opgetreden, probeer het opnieuw");
                    },
                    success: function(result) {
                        result = result.split(':');
                        if (result[0] == 'true') {
                            $result
                                .html("<img src='../img/checkmark.png'/>")
                                .attr("title", "Scores succesvol toegevoegd");
                        }
                        else {
                            $result
                                .html("<img src='../img/error.png'/>")
                                .attr("title", "Geen legitieme scores ingevuld");
                        }
                    }
                });
            });
});

[bindsa]

R4gnax schreef op zaterdag 13 maart 2010 @ 12:40:
[...]


Ik zou eens beginnen met 3/4 van je oplossing te herschrijven, want het is een rommeltje: Je bent aan de hand van IDs de hele tijd je jQuery collecties opnieuw aan het opbouwen. In plaats daarvan zou je ze eens moeten leren cachen. Daarnaast plaats je overal events op, in plaats van gewoon een paar events te binden op een hoog niveau en van delegation gebruik te maken. E.e.a. versimpelt je code dramatisch, bijvoorbeeld al omdat je niet continu met .closest() of .parent() hoeft te werken.

Verder heb je geloof ik niet erg veel verstand van hoe de scoping van variabelen in closures in javascript werkt en heb je denk ik nog niet genoeg affinititeit met jQuery om te weten wat deze allemaal voor je af kan handelen.

Had je deze kennis wel, dan zou je zien hoe simpel dit scriptje kan zijn. Kijk maar naar de leidraad, die ik even snel voor je in elkaar heb gezet.

JavaScript:

$(document).ready(function(){
        $("form#scores")
            .bind("keypress", function(event){
                // Didn't press the [Enter] key
                if (event.keyCode !== 13) return;

                // Find all input fields on the same row level as
                // the event target. Find the index of the event
                // target in this collection of inputs.
                var $row = $target.closest("tr");
                var $fields= $row.find(":input");
                var index = $fields.index(event.target);

                // The event target wasn't one of the input fields.
                if (index < 0) return;

                // Prevent the default behaviour of pressing
                // the [Enter] key.
                event.preventDefault();

                // If the input field doesn't have a value, don't
                // do anything with it.
                if ($fields.eq(index).val() == "") return;

                // Go to the next input field.
                index++;

                // If we have a next input field in the row, focus it.
                if (index < $fields.length)
                {
                    $fields.eq(index).focus();
                }
                // Else find the first input field in the next row (if
                // it exists) and focus on it.
                else
                {
                    $row.next("tr").find(":input:first").focus();

                    // When switching to a new row, trigger the form submit
                    // event while passing along an extra bit of data
                    // containing the relevant row.
                    $(this).trigger("submit", [$row]);
                }
            })
            .bind("submit", function(event, $row) {
                // Form will be submitted asynchronously.
                event.preventDefault();

                // If no valid $row is given, the event was triggered by
                // something other than our script: don't do anything.
                if ($row == null) return;

                // Set the progress throbber.
                var $result = $row.find(".result");
                $result.html("<img src='../img/loader.gif'/>");

                $.ajax({
                    url: 'addscores.php?ajax=1&action=addscores',
                    type: 'POST',
                    ifModified: true,
                    data: $row.serialize(), // only this row
                    cache: false,
                    error: function() {
                        $result
                            .html("<img src='../img/error.png'/>")
                            .attr("title", "Er is een fout opgetreden, probeer het opnieuw");
                    },
                    success: function(result) {
                        result = result.split(':');
                        if (result[0] == 'true') {
                            $result
                                .html("<img src='../img/checkmark.png'/>")
                                .attr("title", "Scores succesvol toegevoegd");
                        }
                        else {
                            $result
                                .html("<img src='../img/error.png'/>")
                                .attr("title", "Geen legitieme scores ingevuld");
                        }
                    }
                });
            });
});

Allereerst bedankt voor de zeer uitgebreide code . Morgen zal ik het uitproberen op de lokale server. Een paar opmerkingen die tijdens het bekijken van de code bij me opkwamen:

- Waar is het change event van de form gebleven (zodat user ook met de TAB toets kunnen werken)?
- Wat is het voordeel van het triggeren van een submit boven het aanroepen van een functie die voor het verzenden zorgt?

In ieder geval harstikke bedankt.

[pieturp]

L0calh0st schreef op zondag 14 maart 2010 @ 22:28:
[...]

1 - Waar is het change event van de form gebleven (zodat user ook met de TAB toets kunnen werken)?
2 - Wat is het voordeel van het triggeren van een submit boven het aanroepen van een functie die voor het verzenden zorgt?

ad 1: 't Was geloof ik bedoeld als leidraad eh
ad 2: Niets. 't Is een kwestie van smaak. Aangezien je middels jQuery toch vaak op losse eventhandlers aan 't scripten bent, is 't wel handig om die dan middels event triggering elders weer aan te roepen. Anders heb je weer losse functies nodig in een verder functie-loos script. (Afgezien van wat anonieme functies natuurlijk.)

[R4gnax]

L0calh0st schreef op zondag 14 maart 2010 @ 22:28:
- Waar is het change event van de form gebleven (zodat user ook met de TAB toets kunnen werken)?

Zoals al gezegd: eigenlijk was het bedoeld als leidraad.
Maar goed, deze krijg je dan nog cadeau van me:

Verander

JavaScript:

 .bind("keypress", function(event)

in

JavaScript:

 .bind("change keypress", function(event)

Beide typen events zijn zo opgezet dat ze van dezelfde handler gebruik zouden moeten kunnen maken, mits je wat aanpassingen maakt mbt het re-focusen op de volgende input control. Daar moet je een klein gevalsonderscheid van maken. (Hint: wat voor waarde geeft event.keyCode bij 'change' events?)

[ Voor 14% gewijzigd door R4gnax op 15-03-2010 08:52 ]

[bindsa]

pieturp schreef op zondag 14 maart 2010 @ 22:54:
[...]


ad 1: 't Was geloof ik bedoeld als leidraad eh
ad 2: Niets. 't Is een kwestie van smaak. Aangezien je middels jQuery toch vaak op losse eventhandlers aan 't scripten bent, is 't wel handig om die dan middels event triggering elders weer aan te roepen. Anders heb je weer losse functies nodig in een verder functie-loos script. (Afgezien van wat anonieme functies natuurlijk.)

Ok, duidelijk