Strano problema con codice misto ASP/Javascript

[Mizushi]

Ciao a tutti.

Ho uno strano problema con del codice misto ASP/javascript.

Questo è il codice:

<script language="javascript" type="text/javascript">
<!--


function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            //console.log(el.checked);
            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}

//-->
    </script>


<td align=center><input type=checkbox name=C1 value=ON></td>


<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('somePage.asp?sID=32', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

</script>


<td align=center><input type=checkbox name=C1 value=ON></td>

<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('somePage.asp?sID=7', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

</script>

...e via dicendo.... sino all' ID 28:

<td align=center><input type=checkbox name=C1 value=ON></td>

<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('somePage.asp?sID=28', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

Come vedete ad ogni checkbox è associata l'apertura di una window open che richiama la pagina ASP somepage.asp ed in querystring gli passo l'ID ottenuto con una query lato server.

Il problema è che su qualsiasi checkbox clicco la somepage.asp processa sempre l' ID numero 28 che è l'ultimo dei checkbox.

Perchè si comporta così?
Grazie

[cavicchiandrea]

Boh... è un po tutto incasinato, script ripetuti nel body (credo) come id someList e i <input type=checkbox name=C1 value=ON> il tutto senza gli attributi delimitati type="checkbox" e anche le due funzioni non è ben chiaro cosa devo fare.
Pertanto crea una pagina asp che elenca tutti i checkebox e posta il link e spiega a cosa servirebbero le due funzioni.

[Mizushi]

Provo a spiegare il funzionamento di questo script misto ASP/javascript:

1) Con ASP eseguo una query ed estraggo una serie di record (righe);
2) Ad ogni record è abbinato un checkbox;
3) Quando si flegga il checkbox la riga interessata cambia colore di sfondo e si apre una finestra popup;
4) Nella finestra popup vorrei passare in querystring dalla pagina madre l'ID corrispondente di quel record ed eseguire una query select con ASP proprio sull'ID passato in querystring.

Il problema è che qualunque checkbox fleggo nella pagina madre, in finestra popup si visualizza sempre l'ID numero 28 che è esattamente l'ID dell'ultima riga estratta con ASP.

Eppure guardando il sorgente della pagina l'ID del checkbox è corretto.
Perchè si comporta così?

Nel seguente estratto da codice si può vedere che l'ID che provo a passare in querystring è il 50, mentre la pagina aperta in popup _inc_dettaglio_popup.asp recupera sempre il 28.

<link type="text/css" rel="stylesheet" href="/css/style.css">
<div id="someList">

<script language="javascript" type="text/javascript">
<!--

function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {

            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}


//-->
    </script>


<div align=center>
<center>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 
style="border: 1px Solid #6699CC;">
<tr>
<td>
<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 
style="font-size=11px;font-family:tahoma;" width="100%" 
BGCOLOR=WHITE>
<tr bgcolor=#dcdcdc>

//INIZIO INTESTAZIONI TABELLA
...
//FINE INTESTAZIONI TABELLA

//INIZIO VALORI TABELLA
<tr bgcolor=#F6F6F6>
<td align=center>
<input type=checkbox name=C1 value=ON></td>
...

<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('_inc_dettaglio_popup.asp?sID=50', '', 
'location=no, directories=no, status=no, menubar=no, 
scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, 
width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

</script>


//SEGUONO TUTTE LE RIGHE CON IL PROPRIO CHECKBOX
...
...
...

//ULTIMA RIGA CON ID = 28
<tr bgcolor=#F6F6F6>
<td align=center>
<input type=checkbox name=C1 value=ON>
</td>

<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('_inc_dettaglio_popup.asp?sID=28', '', 
'location=no, directories=no, status=no, menubar=no, 
scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, 
width='+w+', height='+h+', top='+top+', left='+left);        
    
    }
};

</script>


</tr></table></td></tr></table>   
</div>
//FINE VALORI TABELLA

//FINE SOMELIST
</div>

[homezappa]

tu scrivi:

var list = document.getElementById('someList');

La mia domanda &egrave;:
&Egrave; vero che nella pagina c'&egrave; UN SOLO elemento che ha id="someList" ?

Se la risposta &egrave; no, come suppongo, allora non sai o non hai capito che in una pagina gli id degli elementi devono essere tutti diversi tra loro!

infatti la funzione getElementById('someList') significa:
"Dammi l'unico elemento della pagina che ha id='someList'"

Puntualizzato questo, fai in maniera che l'asp generi id diversi.

HTH
Zappa

[Mizushi]

Originariamente inviato da homezappa
tu scrivi:

var list = document.getElementById('someList');

La mia domanda &egrave;:
&Egrave; vero che nella pagina c'&egrave; UN SOLO elemento che ha id="someList" ?

Se la risposta &egrave; no, come suppongo, allora non sai o non hai capito che in una pagina gli id degli elementi devono essere tutti diversi tra loro!

infatti la funzione getElementById('someList') significa:
"Dammi l'unico elemento della pagina che ha id='someList'"

Puntualizzato questo, fai in maniera che l'asp generi id diversi.

HTH
Zappa

Ecco hai centrato il problema! grazie x l'aiuto a ragionare.
La risposta alla tua domanda è NO: cioè nella pagina NON c'è UN SOLO elemento che ha id="someList", ce ne sono quanti ASP ne ha generati.

Infatti con questa modifica da te suggerita adesso tutto funziona!!!

<input type=checkbox name=C1 value=ON id=someList_" & objRS("sID") & ">

var list = document.getElementById('someList_<%=objRS("sID")%>');

Grazie mille !

[homezappa]

prego!

Zappa