✔ Ajax ersatz - Form target funktioniert nicht.

M

MArc

Erfahrenes Mitglied
Hallo liebe User,

ich habe mir eine kleine Classe geschrieben, mit der ich Dateien mit dem Prinzip von Ajax auf den Server "schaufel".[

Die Funktion generiert ein Form und erstellt in der eine input(type=file) der wird dann per POST weggeschickt, aber nicht in das hauptfenster sondern mit
target=iframe_id
an das iFrame übergeben und der soll das machen, dass somit die Seite nicht neu geladen wird.
Nunja, das funktioniert auch wunderbar.
Das problem ist, wenn ich das Element iframe dynamisch (?) erstelle, und dann die funktion aufrufen, öffnet sich ein neues Fenster, statt es in dem iFrame zu öffnen.
Das iFrame existiert aber ganz sicher, ich bekomm ein Zeiger drauf.
Wenn ich das iFrame hardcode dann geht's.

Hier mal der Code:
HTML: 
<script>

  function createfc(pname){
     name   =  pname;
     
     //-->>>>>Wenn ich das wieder entkommentiere funktioniert es nicht.
     //frame  =  document.createElement("iframe");
     //frame.setAttribute("name","frame_"+name);
     //frame.setAttribute("id","frame_"+name);
     //document.body.appendChild(frame);
     
     var ua = navigator.userAgent.toLowerCase();
     var iebrowser = (ua.indexOf("msie")>-1);
     if (iebrowser)
        form   = document.createElement('<form  action="fc.php" target="frame_test" enctype="multipart/form-data" method="post">');
     else {
		 form   = document.createElement('form');
		 form.setAttribute("id", "form_"+name);
		 form.setAttribute("name", "form_"+name);
		 form.setAttribute("method", 'post');
		 form.setAttribute("target", "frame_"+name);
		 form.setAttribute("enctype", "multipart/form-data");
     }
     document.body.appendChild(form);
     function setAction(pURL){
         this.form.setAttribute("action", pURL);
     }	 
	 function Send(){
	     this.form.submit();
	 }
	 function createInput(pType,pName,pValue){
	    input  =  document.createElement("input");
	    input.setAttribute("type", pType);
	    input.setAttribute("name", pName);
	    input.setAttribute("value", pValue);
	    form.appendChild(input);
	 }
	 this.setAction = function(pURL) { setAction(pURL); }
     this.Send = function() { Send(); }
     this.createInput= function(pType,pName,pValue)  { createInput(pType,pName,pValue); }
  };
  
  
 
</script>
<input type="button" value="Erstelle Objekt" onClick="MyConnect = new createfc('test'); MyConnect.setAction('fc.php')" />
<input type="button" value="Senden" onClick="MyConnect.Send();" />
<input type="button" value="Input(file) erstellen" onClick="MyConnect.createInput('file','meinfile', '');" />
<br>
<iframe name="frame_test" id="frame_test"></iframe>


Ich sitze schon ne ewigkeit daran, vielleicht hat jemand Rat.

Gruss,
MArc
 
Ich muss gestehen, eine schlüssige Antwort kann ich dir nicht geben.

Zum einen schätze ich, liegt es daran, wann ein Browser Fenster registriert....möglicherweise tut er dies bereits beim Laden der Seite, dann wären ihm später erzeugte Fenster(Frames) im aktuellen Fenster unbekannt.

Zum anderen könnte es daran liegen, dass du den Namen des HTML-Elementes "iframe" setzt, und nicht den, des window-Objektes "iframe". Indiz dafür ist im IE bspw., dass es funktioniert, wenn man dem iFrame, sobald es eingefügt ist, den Namen per
Code: 
window.frames[0].name="frame_test"
...geben kann, und das Formular dort dann auch in das Frame gesendet wird. Im FF funktioniert das allerdings auch nicht :(

Einen wirklich guten Vorschlag hab ich somit nicht, ausser das iFrame halt gleich in die Seite zu tun...aber dann geht dir ja die Dynamik verloren :(
 
Hi,

wie's ausschaut ist das iFrame nicht registriert o.ä.
Gibt's da ein Befehl der das macht?
Aber komisch ist es schon:
Ich kann auf das Objekt zugreifen aber es nicht richtig benutzen.

Gruss,
MArc
 
Hi,

habs geschaft. Das Problem lag darin dass,das iFrame nicht richtig erstellt wurde.
Naja jetzt klapps:)*endlich*
Vielleicht hier noch der Code.
HTML: 
<script>

	function createfc(pname){ 
		name   =  pname; 
		ua = navigator.userAgent.toLowerCase(); 
		iebrowser = (ua.indexOf("msie")>-1); 
		if (iebrowser)
			frame  =  document.createElement('<iframe name="frame_'+name+'" id="frame_'+name+'" style="display: none">'); 
		else {
			frame  =  document.createElement("iframe"); 
			frame.setAttribute("name","frame_"+name); 
			frame.setAttribute("id","frame_"+name); 
			frame.setAttribute("width", "0px");
			frame.setAttribute("height", "0px");
			frame.setAttribute("style", "display:none");
		};
		document.body.appendChild(frame); 
		if (iebrowser) 
			form   = document.createElement('<form id="form_'+name+'" enctype="multipart/form-data" name="form_'+name+'" method="post" target="frame_'+name+'" >'); 
		else { 
			form   = document.createElement('form'); 
			form.setAttribute("id", "form_"+name); 
			form.setAttribute("name", "form_"+name); 
			form.setAttribute("method", 'post'); 
			form.setAttribute("target", "frame_"+name); 
			form.setAttribute("enctype", "multipart/form-data"); 
		} 
		document.body.appendChild(form); 
		function setAction(pURL){ 
			this.form.setAttribute("action", pURL); 
		}    
		function Send(){ 
			this.form.submit(); 
		} 
		function createInput(pType,pName,pValue){ 
			if (iebrowser)  
				input  =  document.createElement('<input style="display:none" type="'+pType+'" name="'+pName+'" value="'+pValue+'" />'); 
			else {
				input  =  document.createElement("input"); 
				input.setAttribute("type", pType); 
				input.setAttribute("name", pName); 
				input.setAttribute("value", pValue); 
				input.setAttribute("style", "display:none"); 
			};
			form.appendChild(input); 
		} 
		function moveFile(pID){
			try {
				oFile = document.getElementById(pID);
			} catch(e) { 
				return 'Objekt gibt es nicht'; 
			} finally {
				form.appendChild(oFile);
				oFile.style.display = 'none';
				return true;
			}	
		}
		function GiveContent(){
			content = document.getElementById("frame_"+name).contentWindow.document.body.innerHTML;
		    return content;
		}
		this.setAction = function(pURL) { setAction(pURL); } 
		this.GiveContent = function() { return GiveContent(); } 
		this.Send = function() { Send(); } 
		this.moveFile = function(pID) { return moveFile(pID); }
		this.createInput= function(pType,pName,pValue)  { createInput(pType,pName,pValue); } 
	};  
  
 
</script>
<input type="button" value="Erstelle Objekt" onClick="MyConnect = new createfc('test'); MyConnect.setAction('fc.php')" />
<input type="button" value="Input(text) erstellen" onClick="MyConnect.createInput('text','TEXT', 'halloo');" />
<input type="button" value="verschiebe objekt ins Form" onClick="MyConnect.moveFile('myfile')">
<input type="button" value="Senden" onClick="MyConnect.Send();" />
<input type="button" value="Zeige die Antwort" onClick="a = MyConnect.GiveContent(); alert(a)">
<br><br>
<input type="file" name="myfile" id="myfile" />

Mal ne andere Frage, findet Ihr so eine Klasse nützlich ?
Die Daten im "hintergrund" verschickt vergleichbar mit Ajax(obwohl Ajax das ja nicht kann (?)) ?
Gruss,
MArc
 
MArc_s hat gesagt.:
Mal ne andere Frage, findet Ihr so eine Klasse nützlich ?
Die Daten im "hintergrund" verschickt vergleichbar mit Ajax(obwohl Ajax das ja nicht kann (?)) ?
Gruss,
MArc
Zum Vergrößern anklicken....

Zum Senden vom Dateien finde ich das nicht übel, sofern der herkömmliche Weg nicht in Frage kommt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück