[js] checkboxes worden niet teruggevonden na sorteren

[Dorgaldir]

Gegroet mede schermkijjkers,

in een soort klanten database kan er gezocht worden (handig he) je krijgt dan een lijst te zien in een tabel.
Die tabel kan dan gesorteerd worden met een scriptje dat ik op het net gevonden heb, vroeger deed ik dit door een nieuwe instructie te sturen en in de sql een order by te geven maar nu word dit dmv dit scriptje gedaan zonder herladen.

ik gebruik hiervoor dit scriptje.

Nu moeten die klanten ook aanklikbaar zijn, dat heb ik gedaan door in de eerste kolom een checkbox toe te voegen en een fucntie te schrijven die ik dan op <tr onclick="func()"> zet.

Dit werkt goed en mooi, zolang ik niet sorteer, vanaf het moment dat ik sorteer (bv a-z op naam) dan werkt het niet meer. Ik krijg dan een foutmelding "box is not defined".

$i is een iterator die opgeteld word in een while loop.

HTML:

<table>
<tr onclick="klik(<?print $i;?>)">
        <td><input type="checkbox" name="box<?print $i;?>" id="box<?print $i;?>" value="<?print $rij["klantID"];?>" /></td>
        <td class="id">
            <a target="mainFrame" href="MainFrameFrameset.php?boven=keuze&onder=NAWbewerk&nr=<?print $rij["klantID"];?>&da=a"><button><?print $rij["klantID"];?></button></a>
        </td>
        <td class="Naam2" id="Naam"><?print $rij["Naam"];?></td>
</tr>
</table>

<button onclick="checkAll(<?print $i;?>)">Selecteer Alles</button>
<button onclick="uncheckAll(<?print $i;?>)">Deselecteer Alles</button>
<button onclick="switchAll(<?print $i;?>)">Wissel Alles</button>

JavaScript:

var lijst = new Array();

function klik(nr){
    box = eval("document.checkers.box" + nr); 
    box.checked = !box.checked;
    var erin = 0;
    for (var i = 0; i < lijst.length; i++){
        if (lijst[i] == box.value){
            lijst.splice(i, 1);
            erin = 1;
        }
    }
    if (erin == 0){
            lijst.push(box.value);
        }
}

function checkAll(tel) {
    for (var j = 0; j <= tel; j++) {
        box = eval("document.checkers.box" + j); 
        if (box.checked == false) box.checked = true;
    }
}

function uncheckAll(tel) {
    for (var j = 0; j <= tel; j++) {
        box = eval("document.checkers.box" + j); 
        if (box.checked == true) box.checked = false;
    }
}

function switchAll(tel) {
    for (var j = 0; j <= tel; j++) {
        box = eval("document.checkers.box" + j); 
        box.checked = !box.checked;
    }
}

kunnen jullie me hierbij helpen? het is dus de bedoeling dat zelfs na het sorteren de lijnen aanklikbaar blijven.

edit: als ik een paar lijnen aanklik voor ik sorteer dan kan ik na het sorteren deze nogwel klikken, enkel degene die nog niet geklikt zijn niet...

[Bosmonster]

En als je dat eval eens gewoon vervangt door getElementById?

[crisp]

Vervang eerst die eval's eens door nettere code:

JavaScript:

var form = document.forms['checkers'];
var box = form.elements['box' + nr];

vervolgens kan je kijken welke referentie precies niet (meer) gevonden kan worden - die naar het formulier of naar de specifieke checkbox. Ik neem aan dat je het formulier om de betreffende table hebt staan?

[Lye]

Hey,

Je bent een return statement vergeten in je evals, deze returnen nu niks. En daarbij, eval is evil;

JavaScript:

document.getElementById("box" + nr)

Zou hetzelfde moeten doen.

hmm te laat

[ Voor 4% gewijzigd door Lye op 22-01-2010 10:18 ]

[Dorgaldir]

Lye schreef op vrijdag 22 januari 2010 @ 10:17:
Hey,

Je bent een return statement vergeten in je evals, deze returnen nu niks. En daarbij, eval is evil;

JavaScript:

document.getElementById("box" + nr)

Zou hetzelfde moeten doen.

hmm te laat

getElementById doet het trukje inderdaad nu zou het wel moeten lukken om het af te werken, hier zal ik al sinds gisteren over te piekeren. Mij kennis van js is niet zo groot maar beetje bij beetje gaat het beter

en dank je voor de tip over eval ik wist het niet, had die instructie ergens op het net gevoden.

[crisp]

Galen schreef op vrijdag 22 januari 2010 @ 10:39:
[...]

getElementById doet het trukje inderdaad

Da's een beetje gek; dat zou namelijk betekenen dat de checkboxen na sortering geen associatie meer hebben met je formulier (en da's natuurlijk ook niet goed). Weet je zeker dat je in je markup geen ranzigheden zoals dit doet:

HTML:

<table>
    <form>
        <tr>
            <td>...</td>
        </tr>
    </form>
</table>

?

[Bosmonster]

We weten niet wat dat sorteerscript doet natuurlijk

Aanspreken via ID (aangezien die er toch zijn) lijkt me dan wel zo veilig.

[crisp]

Bosmonster schreef op vrijdag 22 januari 2010 @ 11:35:
We weten niet wat dat sorteerscript doet natuurlijk

Ik wel Die doet gewoon weer appendChilds van een gesorteerde collectie tablerows. Maar als je al begint met invalide markup dan kan het best wel eens zo zijn dat de DOM niet helemaal overeenkomt met wat het sorteerscript verwacht; je kan dan best wel eens dit krijgen na sortering:

HTML:

<table>
    <form>
    </form>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Aanspreken via ID (aangezien die er toch zijn) lijkt me dan wel zo veilig.

enkel veilig in die zin dat je lookup dan wel goed gaat, maar je uiteindelijk toch nog een probleem hebt

[Dorgaldir]

wel dat de checkboxen uit het form springen heb ik ook gemerkt gehad.
ik laat nu telkens er iets gecheckt of uncheckt word dit aanpassen in een js array die ik bij het verzenden in een hidden input steek.

[crisp]

Galen schreef op vrijdag 22 januari 2010 @ 11:58:
wel dat de checkboxen uit het form springen heb ik ook gemerkt gehad.
ik laat nu telkens er iets gecheckt of uncheckt word dit aanpassen in een js array die ik bij het verzenden in een hidden input steek.

Volgens mij kan je dan beter de oorzaak achterhalen en fixen dan het symptoom bestrijden met nog meer extra scripting. Begin in ieder geval met valide markup als basis...