11548 sujets

JavaScript, DOM et API Web HTML5

Désolé de poster subitement, mais je ne comprends pas pourquoi cela ne fonctionne pas.

Je dois faire une démo à 14h et je viens de tomber sur un bug bloquant.
j'ai un javascript qui doit faire un submit et ce dernier ne fonctionne pas sous IE (pas le choix IE7 et supérieur)

Merci d'avance de votre aide, je but sur ce dernier problème depuis ce matin.


function getPos(inputElement) {
    var coords =  new Object();
    coords.x = 0;
    coords.y = 0;
    try {
        targetElement = inputElement;
        if(targetElement.x && targetElement.y) {
            coords.x = targetElement.x;
            coords.y = targetElement.y;
        } else {
            if(targetElement.offsetParent) {
                coords.x += targetElement.offsetLeft;
                coords.y += targetElement.offsetTop;
                while(targetElement = targetElement.offsetParent) {
                    coords.x += targetElement.offsetLeft;
                    coords.y += targetElement.offsetTop;
                }
            } else {
                //alert("Could not find any reference for coordinate positioning.");
            }
        }
        return coords;
    } catch(error) {
        //alert(error.msg);
        return coords;
    }
}


function ajaxUpload(frm)
{
	ofrm=frm;
	var detectWebKit = isWebKit();	
	var idSender = ofrm.elements['sender'].value;
	oSender = document.getElementById(idSender);
	
	// Creation du div d'attente
	divTmp=document.createElement("div");
	divTmp.setAttribute("id","ajxWait");
	divTmp.style.position="absolute";
	divTmp.style.width=oSender.width;
	divTmp.style.height=oSender.height;
	var imgx=getPos(oSender).x;
	var imgy=getPos(oSender).y;
	divTmp.style.top= imgy;  // oSender.y;
	divTmp.style.left= imgx; //oSender.x;
	divTmp.className="AjxLoading";  	
	ofrm.appendChild(divTmp);
	
	// Creation de l'iframe pour l'envoi du fichier
	var w=1024;
	var h=768;
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp");
	iframe.setAttribute("name","ajax-temp");
	iframe.setAttribute("width",w);
	iframe.setAttribute("height",h);
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: "+w+"; height: "+h+"; border: none;");
	ofrm.parentNode.appendChild(iframe);

	var doUpload = function()
	{
		removeEvent($m('ajax-temp'),"load", doUpload);
		var cross = "javascript: ";		
		cross += "window.parent.$m('upload_area').innerHTML = document.body.innerHTML; void(0);";
		
		if(detectWebKit){
        	remove($m('ajax-temp'));
        }else{
        	setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
		
	}
	
	addEvent($m('ajax-temp'),"load", doUpload);
	ofrm.setAttribute("target","ajax-temp");
	
	ofrm.onsubmit = function (){return true;};
	/*if(document.frm.onsubmit())
	{
		alert('pass');
		document.frm.submit();
	}*/
	document.getElementById("frm").submit();

	
	//document.frm.submit();
	//ofrm.submit();
	
}

Hello,

Pas d'aperçu du DOM correspondant, aucune idée de comment les fonctions sont utilisées, et pas de page de demo en ligne pour tester. Par ailleurs la seule information qu'on a sur le problème est «ça ne fonctionne pas sous IE», sans information sur les éventuelles versions concernées et les éventuels messages d'erreur dans la console.

J'espère que tu vas pouvoir résoudre ton bug par toi-même parce que là on n'a pas vraiment les billes pour t'aider. Smiley cligne
En ligne je ne peut pas (c'est une partie admin)
Ne fonctionne pas sous les IE 7 et +
aucun message d'erreur de la console justement.

Dans un formulaire, on clique sur une image, on met l'id de l'image dans un input, le javascript fait le traitement pour avoir un retour via une iframe en appelant un script php et changer l'image cliqué par la nouvelle en changeant le src.

L'ensemble fonctionne sur Google Chrome.

voici le code HTML, ainsi que les autres fonctions javascript (nota : j'aurais le même problème pour ma fonction de delete d'image)
les input file sont cachés via Css


#upload, #uploadPlan
{
	visibility:hidden;
	margin : -1000px;
	position:absolute;
}



<div class="bFiche" id="fimg">
	<form id="frm" name="frm" action="upload.php" method="post" enctype="multipart/form-data">	
	<input id="upload" name="upload" type="file" onChange="ajaxUpload(this.form);return false;" />
	<input id="sender" name="sender" type="hidden" value="" />
	<h4>Images de la commune</h4>
	<img class="lnk upCom" id="com_2_1" name="com_2_1" src="../img/commune/com_2_1.jpg" onclick="uploadNewImg('frm',this.id);" /><img class="lnk upCom" id="com_2_2" name="com_2_2" src="../img/commune/com_2_2.jpg" onclick="uploadNewImg('frm',this.id);" /><img class="lnk upCom" id="com_2_3" name="com_2_3" src="../img/commune/com_2_3.jpg" onclick="uploadNewImg('frm',this.id);" /><img class="lnk upCom" id="com_2_4" name="com_2_4" src="../img/commune/com_2_4.jpg" onclick="uploadNewImg('frm',this.id);" />		
	<h4>Images du programme</h4>
	<div style="display:inline;position:relative;vertical-align:top;top:0"><img style="vertical-align:top;" class="lnk upPrg" id="prg_2_1" name="prg_2_1" src="../img/programme/noImg.png" onclick="uploadNewImg('frm',this.id);" /></div><div style="display:inline;position:relative;vertical-align:top;top:0"><img style="vertical-align:top;" class="lnk upPrg" id="prg_2_2" name="prg_2_2" src="../img/programme/noImg.png" onclick="uploadNewImg('frm',this.id);" /></div><div style="display:inline;position:relative;vertical-align:top;top:0"><img style="vertical-align:top;" class="lnk upPrg" id="prg_2_3" name="prg_2_3" src="../img/programme/noImg.png" onclick="uploadNewImg('frm',this.id);" /></div><div style="display:inline;position:relative;vertical-align:top;top:0"><img style="vertical-align:top;" class="lnk upPrg" id="prg_2_4" name="prg_2_4" src="../img/programme/noImg.png" onclick="uploadNewImg('frm',this.id);" /></div>	<input type="submit" name="autosubmit" id="autosubmit" value="t" />
	</form>
</div>



function remove(obj){obj.parentNode.removeChild(obj)}
function isWebKit(){return RegExp(" AppleWebKit/").test(navigator.userAgent);}

function defondu(obj,ysnRemove){
	var i=1;
    var f = function()
		{
		obj.style.opacity = i;
		i = i-0.02;
		if(i>=0)
			setTimeout(f,20);
		else
			remove(obj);
  };
  f();
}
function uploadOk(id,src)
{
	remove($m('ajxWait'));	
	frm.reset();
	$m(id).src=src;
}
function errorUpload(txt)
{	
	remove($m('ajxWait'));
	frm.reset();
	divTmp=document.createElement("div");
	divTmp.setAttribute("id","uploadErr");
	divTmp.className="Err";
	divTmp.innerHTML=txt;	
	ofrm.insertBefore(divTmp,ofrm.firstElementChild);
	setTimeout(function(){ defondu(divTmp,1);}, 4000)	
}

function uploadNewImg(idForm,idDest)
{	
	ofrm = $m(idForm)
	ofrm.elements['sender'].value=idDest;
	ofrm.upload.click();
}

function deleteImg(frmid,id)
{
	ofrm = document.getElementById(frmid);
	ofrm.setAttribute("action","");
	
	oinput = document.createElement("input");
	oinput.setAttribute("id","delImg");
	oinput.setAttribute("name","delImg");
	oinput.setAttribute("value",id);
	oinput.setAttribute("type","hidden");
	ofrm.appendChild(oinput);

	ofrm.submit();
}

De retour chez moi, j'ai pu voir l'erreur (noté) avec IE9 le problème :

ofrm.submit();
J'ai : SCRIPT5: Accès refusé. pour cette ligne.

Je ne sais toujours pas comment le résoudre à part devoir mettre des "input file" classique (8 sur ma page, 1 par image et ajouter un bouton submit)

sinon après ma réunion, j'ai tenté de changer des choses et j'ai remarqué un problème dans la même partie. J'ajoute à la volé le target dans le form via le javascript et il semble que si j'arrive à envoyer quand même par submit (si je fais apparaître mon input file), l'ouverture de mon fichier "upload.php" ne se fait pas dans l'iframe (nommé) dans le target. mais dans une nouvelle page, uniquement sous IE (7 +)