Решение проблемы в IE и частично Opera - Веб-программирование

Viromаn · 21.03.2008, 02:17

В этой теме я указал на проблему http://www.imho.ws/showthread.php?t=130478
то есть я хотел при нажатии на какой либо из возможных inputs
как чекбокс, оптионс и радио, чтобы в те линки href которые я хочу, чтобы туда автоматически заносились нужные изменения. То есть я заранее линки снабжаю исходными значениями, ищу по ним и заменяю на актуальные. Но я наткнулся на пару камней, во первых пришлось писать функцию записи в массив всех актуальных значений, иначе файрфоксе при ререндинге страницы не понимал, что было произведено изменение, так как собственно динамически новая страница, и тот так с ней и поступал, поэтому по значениям в массиве пришлось писать функцию записи вставленных значений обратно, что мне удалось. С файрфоксом я справился. С IE я справился только частично, всё работает, но при изменении на чекбоксе или на радио у ие странный глюк, пока не нажмёшь мышью где нибудь документе, изменения не становились актуальными, и если вдруг вот так попереключать чекбокс или радио не дав изменениям вступить в силу, то рано или поздно IE уходит в висняк.
Как выход, можно сделать onmouseout=window.focus() что как бы сбрасывает этот глюк, но тогда IE выдаёт сообщени ввиде желтого значка
в нижнем левом углу, что произошла неизвестная ошибка, во даже как.
Сейчас проверил в Опере, всё работает без нареканий, кроме радио, почему то там значения не отпрашиваются, наверное опера их не знает, буду искать другой отпрос, или помогите мне пожалуйста.
В общем, мне важнее помощь под IE, как в ие проблему решить не вызывая каких либо глупых ошибок.
И так предлагаю вашему вниманию собственно сам код, затестите пожалуйста.

Код:

<html>
<head>
<script type="text/javascript">
Myarray=new Array();
function while_replace(text,replacetext,withtext) { while(text.split(replacetext).length>1) { text=text.replace(replacetext,withtext); } return text; }
function setvar(name,value,state,theform) { if(state=='radio') { var f = theform.elements[name].length; for(var x=0; x<f; x++) { var v = theform.elements[name][x].checked; if(v==true) { Aktualvar=name+"="+theform.elements[name][x].value; } } } if(state=='dummy') { Aktualvar=name+'='+value; } }
function addtoarray(name,value,index,inputs,theform)
{
if(Myarray.length==0) { var ai=0; Myarray[ai]=new Object(); Myarray[ai][inputs]=inputs; Myarray[ai][name]=index; }
else {
var countz=0;
var lenghtm=Myarray.length;
for(var i=0; i<lenghtm; i++) 
{ 
var kann="no";
var howmuch=0; var howmuchfalse=0;
for (var j in Myarray[i]) { 
howmuch++; howmuchfalse++;
if(j==inputs && Myarray[i][j]==inputs) { kann="yes"; }
if(kann=='yes') { if(j==name) { Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; howmuchfalse--; var ai=i; } } }
if(howmuch==howmuchfalse) { countz++; } }
i--; 
if(i==countz-1) { i++; Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; } } }
function changeme(name,value,index,inputs,theform) {
var element=document.getElementsByTagName('a')[0].parentNode.innerHTML;
newv=name+"="+value;
var mynewtext=while_replace(element,Aktualvar,newv);
if(inputs=='radio') {
var f=theform.elements[name].length;
for(var x=0; x<f; x++) { var v=theform.elements[name][x].checked; if(v==true) { var index=x; } }
addtoarray(name,value,index,inputs,theform); }
if(inputs=='options') {
//document.forms[0].elements[name].options.selectedIndex=index;
addtoarray(name,value,index,inputs,theform); }
if(inputs=='checkbox') {
var index=value;
addtoarray(name,value,index,inputs,theform); }
document.getElementsByTagName('a')[0].parentNode.innerHTML=mynewtext;
setbackvalues(theform); }
function setbackvalues(theform)
{
var lenghtm=Myarray.length;
for(var i=0; i<lenghtm; i++) 
{ 
for (var j in Myarray[i]) { 
if(j=='radio') { var radio="yes"; }
if(j=='options') { var options="yes"; }
if(j=='checkbox') { var checkbox="yes"; }
}
if(radio=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name][x].checked=true; radio="no"; }
if(options=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name].options.selectedIndex=x; options="no"; }
if(checkbox=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name].checked=x; checkbox="no"; } } }
</script>
</head>
<body>
<form action="" method="" target="">
<input type="radio" name="Devices" value="Sony" onmouseover=setvar(this.name,this.value,'radio',this.form) onchange="changeme(this.name,this.value,'dummy','radio',this.form)"></input>
<input type="radio" name="Devices" value="Philips" checked="checked" onmouseover=setvar(this.name,this.value,'radio',this.form) onchange="changeme(this.name,this.value,'dummy','radio',this.form)"></input>
<select name="Kto" onmouseover=setvar(this.name,this.form.elements[this.name].options[this.form.elements[this.name].selectedIndex].text,'dummy',this.form) onchange="changeme(this.name,this.form.elements[this.name].options[this.form.elements[this.name].selectedIndex].text,this.form.elements[this.name].options.selectedIndex,'options',this.form)"><option> WSE<option> Tolko_ja </select>
<input type="checkbox" name="Aktiveme" onmouseover=setvar(this.name,this.form.elements[this.name].checked,'dummy',this.form) onchange="changeme(this.name,this.form.elements[this.name].checked,'dummy','checkbox',this.form)">
</form>
<div id=text0><input type='button' value='Change'/></div>
<a href="my1.htm?Devices=Philips&Kto=WSE&Aktiveme=false">mojlink</a>
</body></html>

Прошу оказания посильной помощи!

добавлено через 55 минут
Сейчас с оперой ещё немного вплотную занялся и о ужас, onchange у radio под оперой вообще ничего не вызывают

добавлено через 16 минут
Всё, благодаря этой статье
http://webbugtrack.blogspot.com/2007...-properly.html
проблема была решена. Что в опере, что в ие, неправильно идёт обработка событий у onchange на checkbox и radio.
В опере вообще никак не обрабатывается, а в ие с неправильными параметрами.
Вот исправленная версия.

Код:

<html>
<head>
<script type="text/javascript">
Myarray=new Array();
function while_replace(text,replacetext,withtext) { while(text.split(replacetext).length>1) { text=text.replace(replacetext,withtext); } return text; }
function setvar(name,value,state,theform) { if(state=='radio') { var f = theform.elements[name].length; for(var x=0; x<f; x++) { var v = theform.elements[name][x].checked; if(v==true) { Aktualvar=name+"="+theform.elements[name][x].value; } } } if(state=='dummy') { Aktualvar=name+'='+value; } }
function addtoarray(name,value,index,inputs,theform)
{
if(Myarray.length==0) { Myarray[0]=new Object(); Myarray[0][inputs]=inputs; Myarray[0][name]=index; }
else {
var countz=0;
var lenghtm=Myarray.length;
for(var i=0; i<lenghtm; i++) 
{ 
var kann="no";
var howmuch=0; var howmuchfalse=0;
for (var j in Myarray[i]) { 
howmuch++; howmuchfalse++;
if(j==inputs && Myarray[i][j]==inputs) { kann="yes"; }
if(kann=='yes') { if(j==name) { Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; howmuchfalse--; } } }
if(howmuch==howmuchfalse) { countz++; } }
i--; 
if(i==countz-1) { i++; Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; } } }
function changeme(name,value,index,inputs,theform) {

//alert('name '+name+' value '+value+' index '+index);
var element=document.getElementsByTagName('a')[0].parentNode.innerHTML;
newv=name+"="+value;
var mynewtext=while_replace(element,Aktualvar,newv);
if(inputs=='radio') {
var f=theform.elements[name].length;
for(var x=0; x<f; x++) { var v=theform.elements[name][x].checked; if(v==true) { var index=x; } }
addtoarray(name,value,index,inputs,theform); }
if(inputs=='options') {
addtoarray(name,value,index,inputs,theform); }
if(inputs=='checkbox') {
var index=value;
addtoarray(name,value,index,inputs,theform); }
document.getElementsByTagName('a')[0].parentNode.innerHTML=mynewtext;
setbackvalues(theform); 
}
function setbackvalues(theform)
{
var lenghtm=Myarray.length;
for(var i=0; i<lenghtm; i++) 
{ 
for (var j in Myarray[i]) { 
if(j=='radio') { var radio="yes"; }
if(j=='options') { var options="yes"; }
if(j=='checkbox') { var checkbox="yes"; }
}
if(radio=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name][x].checked=true; radio="no"; }
if(options=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name].options.selectedIndex=x; options="no"; }
if(checkbox=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name].checked=x; checkbox="no"; } } }
</script>
</head>
<body>
<form action="" method="" target="">
<input type="radio" name="Devices" value="Sony" onmouseover=setvar(this.name,this.value,'radio',this.form) onclick=changeme(this.name,this.value,'dummy','radio',this.form)></input>
<input type="radio" name="Devices" value="Philips" checked="checked" onmouseover=setvar(this.name,this.value,'radio',this.form) onclick=changeme(this.name,this.value,'dummy','radio',this.form)></input>
<select name="Kto" onmouseover=setvar(this.name,this.form.elements[this.name].options[this.form.elements[this.name].selectedIndex].text,'dummy',this.form) onchange="changeme(this.name,this.form.elements[this.name].options[this.form.elements[this.name].selectedIndex].text,this.form.elements[this.name].options.selectedIndex,'options',this.form)"><option> WSE<option> Tolko_ja </select>
<input type="checkbox" name="Aktiveme" onmouseover=setvar(this.name,this.form.elements[this.name].checked,'dummy',this.form) onclick="changeme(this.name,this.form.elements[this.name].checked,'dummy','checkbox',this.form)">
</form>
<div id=text0><input type='button' value='Change'/></div>
<a href="my1.htm?Devices=Philips&Kto=WSE&Aktiveme=false">mojlink</a>
</body></html>

добавлено через 2 минуты
Теперь хочу функцию добавить, которая автоматом во все инпуты на сайте с помощью яваскрипта добавляла бы onchange,onmouseover,onclick параметры. Ух...

Viromаn · 26.03.2008, 19:57

Такс, ладненько, со всеми проблемами я разобрался более менее корректно, вся причина в том, что браузеры по всякому реагируют на различные on* события, и надо было искать каждый раз общий знаменатель.
И так, пришлось функцию поиска и замены переделать с while на for, почему то в некоторых случаях ie зависал на вайле, в то время как на фор отлично выполнялась.
Написал функцию установки on* параметров на все формбоксы, типа селект, чекбокс и радио. Кто захочет, может и текст запихнуть, не проблема. То есть программа сама ищет, какие на сайте есть кликабельные чеки, радио и селекты и снабжает их on* событиями. Там тоже небольшая проблема была с IE, вообще, IE очень странно на многие параметры реагирует, многие приходится через eval функцию пропускать, иначе не принимаются значения, а так поди, определи, нужна еваляция или нет. Даже такой тип как true или false, IE не принимает ввиде нетекста при установке значения чекбокса, ему принципиально нужен текстовый тип.
Далее функция чтения из гет и установки параметров, само собой на лету устанавливаются при каждом изменении все параметры. Например, была проблема с Файрфоксом, тот некорректно onmouseover на селекте выполнял, заменил всё на onfocus, отлично пошло.
Ещё, чего я не сделал, наверное это сбор значений со всех кликабельных ссылок и установка оных в стринг, а то сейчас я по сути это сделал вручную, кто хочет, пусть мучается.
Ну а так проверьте, где и как работает, будет просто интересно знать, что ещё можно сделать лучше.

Код:

<html>
<head>
<script type="text/javascript">
var Myarray=new Array();
function while_replace(text,replacetext,withtext) { var mymy=eval(text.split(replacetext).length); if(mymy) { for(i=0; i<text.split(replacetext).length; i++) { text=text.replace(replacetext,withtext); } } return text; }
function setvar(name,value,type,theform) { 
if(type=='radio') { var f = theform.elements[name].length; for(var x=0; x<f; x++) { var v = theform.elements[name][x].checked; if(v==true) { Aktualvar=name+"="+x; } } } if(type!='radio') { Aktualvar=name+'='+value; } }
function addtoarray(name,value,index,inputs,theform) { 
if(Myarray.length==0) { Myarray[0]=new Object(); Myarray[0][inputs]=inputs; Myarray[0][name]=index; }
else {
var countz=0;
for(var i=0; i<Myarray.length; i++) {
var kann="no";
var howmuch=0; var howmuchfalse=0;
for (var j in Myarray[i]) { 
howmuch++; howmuchfalse++;
if(j==inputs && Myarray[i][j]==inputs) { kann="yes"; }
if(kann=='yes') { if(j==name) { Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; howmuchfalse--; } } }
if(howmuch==howmuchfalse) { countz++; } } i--;
if(i==countz-1) { i++; Myarray[i]=new Object(); Myarray[i][inputs]=inputs; Myarray[i][name]=index; } } }
function changeme(name,value,index,inputs,theform) {
var element=document.getElementsByTagName('a')[0].parentNode.innerHTML;
if(inputs=='checkbox') { index=value; addtoarray(name,value,index,inputs,theform); }
if(inputs=='radio') { var f=theform.elements[name].length; for(var x=0; x<f; x++) { var v=theform.elements[name][x].checked; if(v==true) { index=x; } } addtoarray(name,value,index,inputs,theform); }
newv=name+"="+index;
var mynewtext=while_replace(element,Aktualvar,newv);
if(inputs=='select-one') { addtoarray(name,value,index,inputs,theform); }
document.getElementsByTagName('a')[0].parentNode.innerHTML=mynewtext; setbackvalues(); setparameters(); }
function setbackvalues() {
for(var i=0; i<Myarray.length; i++) {
for (var j in Myarray[i]) {
if(j=='radio') { var radio="yes"; }
if(j=='select-one') { var options="yes"; }
if(j=='checkbox') { var checkbox="yes"; } }
if(radio=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name][x].checked=true; radio="no"; }
if(options=='yes') { var name=j; var x=Myarray[i][j]; document.forms[0].elements[name].options.selectedIndex=x; options="no"; }
if(checkbox=='yes') { var name=j; var x=eval(Myarray[i][j]); document.forms[0].elements[name].checked=x; checkbox="no"; } } }
function setparameters() {
var node=document.getElementsByTagName('input')[0].parentNode;
for (var i=0; i<node.length; i++) {
if (node[i]['type']=='radio') { eval("document.getElementsByTagName('input')[0].parentNode[i].onclick=function(){ changeme(this.name,this.value,'dummy',this.type,this.form); }"); eval("document.getElementsByTagName('input')[0].parentNode[i].onfocus=function(){ setvar(this.name,this.value,this.type,this.form); }"); }
if (node[i]['type']=='select-one') { eval("document.getElementsByTagName('input')[0].parentNode[i].onchange=function(){ changeme(this.name,this.form.elements[this.name].options[this.form.elements[this.name].selectedIndex].text,this.form.elements[this.name].options.selectedIndex,this.type,this.form); }"); eval("document.getElementsByTagName('input')[0].parentNode[i].onfocus=function(){ setvar(this.name,this.form.elements[this.name].options.selectedIndex,this.type,this.form); }"); }
if (node[i]['type']=='checkbox') { eval("document.getElementsByTagName('input')[0].parentNode[i].onclick=function(){ changeme(this.name,this.form.elements[this.name].checked,'dummy',this.type,this.form); }"); eval("document.getElementsByTagName('input')[0].parentNode[i].onfocus=function(){ setvar(this.name,this.form.elements[this.name].checked,this.type,this.form); }"); } } }
function readget() {
var locations=document.location.search.substr(document.location.search.indexOf('?') + 1);
var formens=locations.substring(locations.indexOf('forms-')+'forms-'.length, locations.length);
if(formens) {
var formsarray=formens.split("+");
for(i=0; i<formsarray.length; i++) { 
var teil=formsarray[i].split("=");
Myarray[i]=new Object(); Myarray[i][teil[0]]=teil[0]; Myarray[i][teil[1]]=teil[2]; }
var elements=document.getElementsByTagName('a')[0].parentNode.innerHTML;
var anhang='radio=Devices=1+select-one=Kto=0+checkbox=Aktiveme=false';
var mynewtext=while_replace(elements,anhang,formens);
document.getElementsByTagName('a')[0].parentNode.innerHTML=mynewtext;
setparameters(); setbackvalues(); } else { setparameters(); } }
</script>
</head>
<body>
<form action="" method="" target="">
<input type="radio" name="Devices" value="Sony"</input>
<input type="radio" name="Devices" value="Philips" checked="checked"></input>
<input type="radio" name="Devices" value="IBM"></input>
<select name="Kto"><option>every one<option>only me<option>someone</select>
<input type="checkbox" name="Aktiveme">
</form>
<a href="olmy.htm?forms-radio=Devices=1+select-one=Kto=0+checkbox=Aktiveme=false">my_link</a>
<a href="olmy.htm?forms-radio=Devices=1+select-one=Kto=0+checkbox=Aktiveme=false">my_another_link</a>
</body>
<script type="text/javascript">readget();</script>
</html>

Опции темы
Версия для печати Отправить на email