Jquery disabled

[Anoniem: 189200]

Ik ben aan een "mini" scriptje bezig voor een klant van ons maar de disabled functie doet zich een beetje raar voor. Ik heb volgende code:

code:

$('td textarea').each(function(){
    $(this).attr("disabled", "disabled");
});
        
$('td input').each(function(){
    if($(this).val() != ''){
            $(this).parents().find("textarea").attr("disabled", "");
        console.log($(this).parents().find("textarea").val());
    }
});

De bedoeling hiervan is om enkel het opmerking veldje beschikbaar te hebben indien er voordien in een input veld iets staat genoteerd.



Nu hij disabled alles goed maar eens hij dan gaat kijken of hij de textarea moet openstellen terug zet hij alles open. Iemand enig idee waarom dit voorvalt?

[Anoniem: 2935]

Ik denk dat je .closest() moet gebruiken i.p.v. .parents(). Nu gaat 'ie alle textarea's zoeken in alle ancestors (wat dus alle textareas op de pagina zijn).

JavaScript:

$(this).closest('tr').find("textarea").attr("disabled", "");

Afhankelijk van de versie van jQuery die wordt gebruikt wordt het ook aangeraden om .prop() te gebruiken ipv. .attr() voor attributen/properties die true/false zijn:

JavaScript:

$(this).closest('tr').find("textarea").prop("disabled", false);

http://api.jquery.com/closest/

http://api.jquery.com/parents/

http://api.jquery.com/prop/

[Anoniem: 189200]

Alvast bedankt voor het snelle antwoord, Blues! Ik heb beide opties appart en tesamen geprobeerd maar zonder succes. Ik kan wel nog even meegeven dat de selector die ik gebruikte wel enkel de waarde outputte van de opmerking velden die enabled mochten zijn. Dus normaal zou ik dan verwachten dat ik met die selector toch ook enkel die velden hun status weer op enable zou zetten.

Hij voert de console.log ook maar exact het aantal keer uit dat er een input ingevuld is.

[Rekcor]

Ik ben het met Blues eens: parents() geeft alle ancestors terug, tot aan de html-tag. Vervoglens geeft find() van die HTML-tag alle textarea's op je scherm.

Je schrijft dat Blues's oplossingen geen succes opleveren, maar wat dan wel?

Wat zegt je console bij?

JavaScript:

console.log('this', $(this));
console.log('tr', $(this).closest('tr'));
console.log('textarea', $(this).closest('tr').find("textarea"));

[Anoniem: 189200]

Volgende waarden in dezelfde volgorde als hierboven:

code:

- this [input, context: input, init: function, selector: "", jquery: "1.9.1", size: function…]
- tr [tr, prevObject: c.fn.c.init[1], context: input, init: function, selector: "", jquery: "1.9.1"…]
- textarea [textarea.uniform, prevObject: c.fn.c.init[1], context: input#time.text, selector: "textarea", init: function, selector: ""…]

Als ik mijn code uitprobeerde zoals ze bovenaan stond (met closest of parents) kreeg ik (voor de twee) de juiste waarde terug van mijn textarea, enkel die waarde van het opmerking veld als er iets was ingevuld en geen lege waarden wat mij zou lijken dat hij dan wel degelijk de juiste text-area heeft? Ook zie ik dat hij de functie maar 8x (er zitten 8 input veldjes zonder lege waarde) zou uitvoeren maar dat hij toch nog elke textarea op disabled zet.

Mijn console van hierboven levert dit op:
6x "& dit kan niet!"
1x "Dit is de 4e comment"
en nog 1x "Dit is de 15e comment" (deze staat er niet op)

De waarde van alle andere textareas komt niet in mijn console te staan, dus kan ik er toch vanuit gaan dat hij niet teveel textarea velden geselecteerd heeft? Of denk ik daar verkeerd?

Nog enkele images van de console:
Zonder de if != '' functie


Met de if != '' functie

[Rekcor]

Kun je anders iets posten op http://jsbin.com/?

Dat maakt het praten een stuk gemakkelijker

[NMe]

Waarom closest('tr') en niet gewoon parent('tr')? Ik ken jQuery niet echt en ben meer een Mootoolsgebruiker, maar parent gebruiken klinkt logischer als je een child daarvan aanspreekt. Parents dan weer niet natuurlijk.

[Rekcor]

NMe schreef op woensdag 13 maart 2013 @ 11:43:
Waarom closest('tr') en niet gewoon parent('tr')? Ik ken jQuery niet echt en ben meer een Mootoolsgebruiker, maar parent gebruiken klinkt logischer als je een child daarvan aanspreekt. Parents dan weer niet natuurlijk.

Parent is de directe parent. Misschien dat de TS de input in een div o.i.d. heeft staan.

Geheel off topic: Volgens mij ben jij de eerste die ik tegenkom die van jQuery --> Mootools bent gegaan. Ben wel benieuwd waarom... In De Devschuur Coffee Corner - Iteratie 3 over doorpraten? Ikzelf zit me namelijk nu helemaal in jQuery te werken (vroeger Mootools-adept)

[NMe]

Rekcor schreef op woensdag 13 maart 2013 @ 11:51:
[...]

Parent is de directe parent. Misschien dat de TS de input in een div o.i.d. heeft staan.

Als je een parameter aan parent meegeeft, dan zoekt hij toch omhoog in de DOM-tree tot 'ie de juiste parent heeft? Dat lijkt de documentatie in elk geval te suggereren, en in Mootools werkt het ook zo.

Geheel off topic: Volgens mij ben jij de eerste die ik tegenkom die van jQuery --> Mootools bent gegaan. Ben wel benieuwd waarom... In De Devschuur Coffee Corner - Iteratie 3 over doorpraten? Ikzelf zit me namelijk nu helemaal in jQuery te werken (vroeger Mootools-adept)

offtopic:
Ik heb nooit met jQuery gewerkt. Heb er ook weinig behoefte aan; jQuery lijkt meer gericht te zijn op het leveren van een eindproduct waar Mootools meer gericht is op het bieden van een toolset om zélf je scripts in elkaar te draaien. Verder gebruiken we het op kantoor en kan ik niet eigenhandig besluiten daarvanaf te stappen, zelfs al zou ik het willen.

[Grijze Vos]

NMe schreef op woensdag 13 maart 2013 @ 12:09:
Als je een parameter aan parent meegeeft, dan zoekt hij toch omhoog in de DOM-tree tot 'ie de juiste parent heeft? Dat lijkt de documentatie in elk geval te suggereren, en in Mootools werkt het ook zo.

Neen. Als je een selector meegeeft dan filtert hij het resultaat op jouw selector. Dus als je parent een div is, dan is je selector leeg.

parents() = ancenstors,
closest() = zoek dichtsbijzijndste ancestor die aan selector voldoet, deze start in de node zelf te zoeken, niet in de parent (om het makkelijk te maken)
parent() = alleen de directe parent.

Had ik al gezegd dat de naming conventions van jquery ronduit ruk zijn?

[ Voor 13% gewijzigd door Grijze Vos op 13-03-2013 12:22 ]

[FotW]

Als je parents(selector) gebruikt, zoek je omhoog in de DOM tot je de selector tegenkomt.

Als je parent een div is zou je dus parents('div') kunnen gebruiken, of wellicht beter nog een class gebruiken -> parents('.div')

Zoals eerder aangegeven is het handig als je even een testcase aanmaakt op jsfiddle of jsbin

[Anoniem: 189200]

Heb hier even een jsfiddle aangemaakt met de exacte code, enige wat mij nog lijkt mogelijk te zijn is een fout in de code iets niet afgesloten of iets dergelijks. (Zitten bvb id's in de code die meermaals gebruikt worden, maar de klant wil absoluut niet dat we daar iets aan veranderen)

http://jsfiddle.net/dxJsm/1/

[418O2]

http://jsfiddle.net/dxJsm/2/

die laatste selector kan wellicht netter, maar dit werkt ook

edit; nu is hij wel netjes

JavaScript:

$(document).ready(function(){
    $('textarea').prop('disabled', 'disabled');
    
    $('#timesheettable tr').each(function(){            
        if($(this).find("input[type='text'][value!='']").length > 0) {
            $(this).find("textarea").removeAttr("disabled");
        }
    });
});

en nog iets completer gemaakt

JavaScript:

$(document).ready(function(){
    $('#timesheettable tr').each(function(){            
        doRowCheck($(this));
    });
    $("#timesheettable input").blur(function() {
        doRowCheck($(this).closest("tr"));
     });
    function doRowCheck(row) {
        if(row.find("input[type='text'][value!='']").length > 0) {
                $(row).find("textarea").removeAttr("disabled");
        } else {
                   $(row).find("textarea").attr("disabled", "disabled");
        }
    }
});

maar dat werkt niet omdat je andere code in je tabellen hebt

en dan zou je nog die attr/removeAttr door prop kunnen vervangen

[ Voor 109% gewijzigd door 418O2 op 13-03-2013 13:25 ]

[Anoniem: 189200]

Alvast bedankt! Ik ga er vanuit dat je de "tidyup" gebruikt hebt van jsfiddle?

[Anoniem: 2935]

FotW schreef op woensdag 13 maart 2013 @ 12:36:
Als je parents(selector) gebruikt, zoek je omhoog in de DOM tot je de selector tegenkomt.

Nee, ook als 'ie de selector tegenkomt zoekt 'ie verder omhoog tot de root.

HTML:

<div>
  <div>
    <div>
      <span id="start"></span>
    </div>
  </div>
</div>

JavaScript:

$('#start').parents('div').length === 3;
$('#start').closest('div').length === 1;

[418O2]

Anoniem: 189200 schreef op woensdag 13 maart 2013 @ 13:59:
Alvast bedankt! Ik ga er vanuit dat je de "tidyup" gebruikt hebt van jsfiddle?

Nee. Zou niet eens weten wat het doet.

[Anoniem: 189200]

Anders wel een handige functie besef ik net maar goed, enorm bedankt!

[418O2]

Anoniem: 189200 schreef op woensdag 13 maart 2013 @ 14:08:
Anders wel een handige functie besef ik net maar goed, enorm bedankt!

no biggie.

Met selectors e.d. moet je gewoon veel ervaring kweken en artikelen lezen over optimalisaties binnen jQuery.

[Anoniem: 189200]

Ja ik snap de code wel maar mis idd nog wel wat ervaring met die selectors soms, kan altijd beter uiteraard maar weer iets geleerd vandaag!

[418O2]

Anoniem: 189200 schreef op woensdag 13 maart 2013 @ 14:17:
Ja ik snap de code wel maar mis idd nog wel wat ervaring met die selectors soms, kan altijd beter uiteraard maar weer iets geleerd vandaag!

Die selectors zijn ook lastig onder de knie te krijgen, dat kwartje viel bij mij ook pas na een tijdje

[Rekcor]

Dus... het is nu opgelost?

Wat is nu de 'take-home' message voor mensen die dit topic later nog een keer doorlezen?