Ho necessità che un testo di descrizione di un checkbox sia colorata in rosso( niente di difficile per il colore ) e il checkbox corrispondente deselezionato quando checkArr[i] fosse = 0, allo stesso modo di color rosso( e il checkbox corrispondente selezionato ) quando checkArr[i] fosse >1 .
Questa visualizzazione risulterà da alcuni controlli fatti con Ajax: il codice HTML del div verrà caricato inviando una richiesta Ajax a un controller, con la funzione getDettaglio() :
codice:
Event.observe(window, 'load', function() {
$('myLink').observe('click', getResponse);
});
function getDettaglio() {
new Ajax.Request('MyController', {
method : 'get',
onComplete : function(transport) {
//qui va il codice
}
}
}
mentre per la valutazione del valore di checkArr l'idea sarebbe di rinnovare la richiesta Ajax all'interno dell' onComplete : function(transport) {
}
nel seguente modo(nella funzione getDettaglio() ):
codice:
switch(parseInt(checkArr[0]){
case 0:
var tdLabel=new Element('td', {onmouseover: getResponse() });
tdLabel.addClassName('errorPageLink');
var tdLabel1=document.createTextNode("Check conducente");
tdLabel.appendChild(tdLabel1);
trEle.appendChild(tdLabel);
var tdCheck=new Element('td');
tdCheck1=new Element('input', {type: 'checkbox', disabled: true});
tdCheck.appendChild(tdCheck1);
trEle.appendChild(tdCheck);
break;
case 1:
var tdLabel=new Element('td');
var tdLabel1=document.createTextNode("Check conducente");
tdLabel.appendChild(tdLabel1);
trEle.appendChild(tdLabel);
var tdCheck=new Element('td');
tdCheck1=new Element('input', {type: 'checkbox', checked: true, disabled: true});
tdCheck.appendChild(tdCheck1);
trEle.appendChild(tdCheck);
break;
default:
var tdLabel=new Element('td', {onmouseover: getResponse() });
tdLabel.addClassName('errorPageLink');
var tdLabel1=document.createTextNode("Check conducente");
tdLabel.appendChild(tdLabel1);
trEle.appendChild(tdLabel);
var tdCheck=new Element('td');
tdCheck1=new Element('input', {type: 'checkbox', checked: true, disabled: true});
tdCheck.appendChild(tdCheck1);
trEle.appendChild(tdCheck);
dove getResponse() è una funzione di questo tipo:
codice:
function getResponse() {
$$('.errorPageLink').each(function(element,index){
element.observe('click', function(event) {
new Ajax.Request('SISDettaglioDanneggiatiController', {
method : 'get',
parameters : {
operazione : 'L',
},
onComplete: function(transport){
//qui va fatto il controllo sull'array degli errori
}
});
});
});
}
Ora il messaggio di errore derivante dai controlli su checkArr va visualizzato in associazione all'onclick sulla cella rossa.
La questione è la modalità di visualizzazione: un modo possibile sarebbe tramite un tip dinamico che si aprirebbe sovrapposto alla pagina; un altro modo possibile è accodare uin elemento HTML in fondo alla tabella.
Nel secondo caso esso dovrebbe essere precaricato o meno?
Se dovesse essere precaricato, nella funzione getDettaglio() potrei fare una cosa del genere:
codice:
function getDettaglio() {
new Ajax.Request('MyController', {
method : 'get',
onComplete : function(transport) {
targhe = transport.responseXML.getElementsByTagName("targa");
//e poi scorrermi le targhe ed associare alle targhe il un tag annidato(Es. danneggiati) e poi, ancora più annidato, quello che mi interessa, degli errori;
for(j=0;j<danneggiati.length;j++){
var error=danneggiati.item(j).firstChild.data;
var trError=new Element('tr');
var tdError=new Element('td');
tdError.addClassName('errorPage');
var tdError1=document.createTextNode('Alla targa '+targa+' '+error);
tdError.appendChild(tdError1);
trError.appendChild(tdError);
tbodyError.appendChild(trError);
}
//oppure renderlo indipendente:
errori = transport.responseXML.getElementsByTagName("errore");
}
}
}
e poi, nella funzione getResponse():
codice:
function getResponse() {
$$('.errorPageLink').each(function(element,index){
element.observe('click', function(event) {
new Ajax.Request('SISDettaglioDanneggiatiController', {
method : 'get',
parameters : {
operazione : 'L',
},
onComplete: function(transport){
$$('.errorPage').show;
}
});
});
});
}
Altrimenti, se non volessi precaricarlo, e questo vale sia per il tip dinamico sia per l'elemento HTML accodato in fondo alla tabella, come potrei fare il controllo su checkArr ogni volta che mi posiziono con il mouse( o faccio click ) sul testo scritto in rosso?
Spero di essere stato esaustivo,
grazie