JavaScript selectAll \ DeselectAll caselle funzione non è utilizzabile su IE8
-
25-10-2019 - |
Domanda
Ho un (file .js) Webscript sviluppato per un'applicazione Alfresco. Gestisce un pulsante che visualizza un modulo finalizzato alla selezione dei membri che hanno sottoscritto uno spazio Alfresco, al fine di inviare loro una mail.
Tutte le caselle sono generate dinamicamente con i nomi degli abbonati.
È possibile controllare qualsiasi membro che si desidera e si ha anche una speciale casella di controllo che consente di selezionare o deselezionare tutti i membri.
Questa casella di controllo specifica funziona correttamente su Chrome e Firefox.
Tuttavia, quando si controlla su Internet Explorer 8, nessuno dei membri sono selezionati o deselezionata, siano essi nomi sono assegno o no.
Ecco il codice di esempio della generazione forma e delle funzioni onClick attivato quando si seleziona la casella di controllo:
updateMembersList : function TS_updateMembersList(containerId)
{
var div = Dom.get(containerId);
div.innerHTML = "<div class=\"memberDiv\">" +
"<input type=\"checkbox\" id=\"selectDeselectAllCb\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectAllChanged')\" class=\"memberCb\"/>" +
"<label for=\"selectDeselectAllCb\" class=\"memberLabel\">" +
this.msg('label.selectDeselectAll') + "</label>" +
"</div>";
for (var i=0; i<this.members.length; i++)
{
var member = this.members[i];
var avatar = Alfresco.constants.URL_CONTEXT + "/components/images/no-user-photo-64.png";
if (member.authority.avatar && member.avatar != "")
{
avatar = Alfresco.constants.PROXY_URI + member.authority.avatar + "?c=force";
}
div.innerHTML += "<div class=\"memberDiv\">" +
"<input type=\"checkbox\" id=\"cb_" + member.authority.userName + "\" checked=\"true\" onchange=\"YAHOO.Bubbling.fire('selectDeselectMemberChanged')\" class=\"memberCb\"/>" +
"<label for=\"cb_" + member.authority.userName + "\" class=\"memberLabel\">" +
member.authority.firstName + " " + member.authority.lastName + "</label>" +
"</div>";
}
},
selectDeselectAllChanged: function selectDeselectAllChanged(){
var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
var checked = selectDeselectAllCb.checked;
console.log("Select All");
var cbs = YAHOO.util.Selector.query("input[id^='cb_']");
for (var i=0, j=cbs.length; i<j; i++)
{
var cb = cbs[i];
cb.checked = checked;
}
},
selectDeselectMemberChanged: function selectDeselectMemberChanged(){
var selectDeselectAllCb = Dom.get('selectDeselectAllCb');
var cbs = YAHOO.util.Selector.query("input[id^='cb_']");
var firstChecked;
if (cbs[0] != null){
firstChecked = cbs[0].checked;
}
for (var i=0, j=cbs.length; i<j; i++)
{
var cb = cbs[i];
if (cb.checked === firstChecked){
continue;
}
else{
selectDeselectAllCb.checked = false;
return;
}
}
selectDeselectAllCb.checked = firstChecked;
},
All'inizio, ho pensato che la query non è stata sostenuta da IE8, ma non è il caso.
Tale sintassi è supportata da IE7 e versioni più recenti.
Soluzione 2
I've solved the problem. I've replaced the onchange
event handler by an onclick
event handler. Indeed, onchange has a random behaviour on Internet Explorer, whereas onclick
works fine in most of the case.
Thanks for the help.
Altri suggerimenti
Try removing console.log("Select All");
and replace it with Alfresco.logger.debug("Sellect All");
IE doesn't like console object.
Also, run your code on jslint - if you have an invalid json there somewhere, IE stops.
Also, try running IE in developer mode - set it up to show you script errors and you'll know where it stops.