ugrás a tartalomhoz

form url target

Hatusi · 2009. Május. 26. (K), 11.24
Sziasztok!
nemrég sikerült megoldanom, egy problémát ami kreált egy újat.
van egy index.php oldalam melyen van egy tartalomdiv, ebbe töltöm be a fájlokat htmlhttprequest megoldással.
persze van hátránya meg előnye is. ha egy sima hivatkozást nézek,akkor így alakul:
<a href="load/valami.php" class="loadinto-contentwrapper">link</a>

szépen működik, ha a betöltött tartalomról hivatkozok egy vele azonos mappában csücsülő oldalra akkor is meg kell adni a teljes elérést. lényeg ez működik. azonban van egy kapcsolat.php:
<form method="post" action="load/sendmail.php" />
<?php
                        $ipi = getenv("REMOTE_ADDR");
                        $httprefi = getenv ("HTTP_REFERER");
                        $httpagenti = getenv ("HTTP_USER_AGENT");
......

nem rakom ide az egész kódot, lényeg úgyis az első sor. action="load/sendmail.php" ezzel elküldöm a formba bevitt adatokat, melyeket a sendmail.php-val dolgozok fel, csakhogy egy új lapon nyílik meg. (amit nem is csodálok)
próbálkoztam utánnaírni a class="loadinto-contentwrapper"-t target-el
egyelőre nem sok sikerrel. Szívesen várom az ötleteket, miként lehetne ezt is a tartalomdobozomba tölteni.
A gugli nem volt jó megoldás, mert már kigúvadnak a szemeim, vagy csak rosszul próbálkoztam. :-)
Tisztelettel: Hatusi
‹ Internet Explorer domain alapú jelszómegjegyzője div effekt ›
 ■
1

Tisztázzuk a dolgokat

Poetro · 2009. Május. 26. (K), 11.50
Ugye te htmlhttprequest alatt XMLHttpRequest-et értesz?
szépen működik, ha a betöltött tartalomról hivatkozok egy vele azonos mappában csücsülő oldalra akkor is meg kell adni a teljes elérést.

Az elérési utak az aktuálisan a címsorban levő dokumentumhoz képest relativak. A teljes elérés alatt nem tudom mit értesz, mert nem derült ki. Abszolút elérési út vagy /-el vagy protokollal kezdődik, például /load/valami.php vagy http://example.com/load/valami.php.

<form method="post" action="load/sendmail.php" />-nak nincs túl sok értelme, mert nem küldesz semmit, csak egy üres formot, elvégre lezártad a form elemet, ráadásul nem is igazán szabványosan, több böngésző valószínűleg ezzel nem tud majd mit kezdeni, próbáld inkább
<form method="post" action="load/sendmail.php"></form> formában.
csakhogy egy új lapon nyílik meg. (amit nem is csodálok)

Miért kellene ennek új lapon megnyílni? Amíg nincs target attribútuma a formnak addig ugyanazon a lapon kell hogy működjön.

próbálkoztam utánnaírni a class="loadinto-contentwrapper"-t target-el egyelőre nem sok sikerrel.

Mi köze van az class-nak a target-hez?

Jó lenne látni egy oldalt, hogy ennél bővebb megoldással lehessen szolgálni, mert a probléma leírásod eléggé zavaros.
2

htmlhttprequest

gex · 2009. Május. 26. (K), 11.53
http://www.google.hu/search?q=htmlhttprequest
3

Ha ez Igaz

Poetro · 2009. Május. 26. (K), 12.13
Ha ez igaz, akkor a demo oldalon levő módszerrel kell a formokat megbütykölni.
Azaz
<form action="content/calculator.php" method="post"
 onsubmit="(new RemoteFileLoader('docClickLoader')).submitInto(this, 'resultArea', event)">
Persze ezt valami szebb formában.

UI: Én nem használnék olyan könyvtárat, aminek ennyire rossz a dokumentációja, és már 3 éve beta állapotú.
4

no akkor kicsit részletesebben

Hatusi · 2009. Május. 27. (Sze), 09.38
Mivel írtam is, hogy csak kódrészletet teszek be, így gondolhatod, hogy annyi gógyim azért van, hogy lezárjam a formot :-)
no adott egy index php oldal, a fejébe feltolok 3 fájlt
<link href="../css/linkfelho.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/htmlhttprequest.js"></script>
<script type="text/javascript" src="../js/inside.js"></script>

a 3 fájl tartalma rendre a következő:
linkfelho.css
div#contentwrapper {
padding: 2px 5px 5px 5px;
}

div.clear
{
clear: both;
}

htmlhttprequest.js:
/*
HTMLHttpRequest v1.0 beta3
Licensed under the CC-GNU LGPL, version 2.1
*/

if(typeof addEvent!='function'){var addEvent=function(o,t,f,l){var d='addEventListener',n='on'+t,rO=o,rT=t,rF=f,rL=l;if(o[d]&&!l)return o[d](t,f,false);if(!o._evts)o._evts={};if(!o._evts[t]){o._evts[t]=o[n]?{b:o[n]}:{};o[n]=new Function('e','var r=true,o=this,a=o._evts["'+t+'"],i;for(i in a){o._f=a[i];r=o._f(e||window.event)!=false&&r;o._f=null}return r');if(t!='unload')addEvent(window,'unload',function(){removeEvent(rO,rT,rF,rL)})}if(!f._i)f._i=addEvent._i++;o._evts[t][f._i]=f};addEvent._i=1;var removeEvent=function(o,t,f,l){var d='removeEventListener';if(o[d]&&!l)return o[d](t,f,false);if(o._evts&&o._evts[t]&&f._i)delete o._evts[t][f._i]}}function cancelEvent(e,c){e.returnValue=false;if(e.preventDefault)e.preventDefault();if(c){e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation()}};function HTMLHttpRequest(myName,callback){with(this){this.myName=myName;this.callback=callback;this.xmlhttp=null;this.iframe=null;window._ifr_buf_count|=0;this.iframeID='iframebuffer'+window._ifr_buf_count++;this.loadingURI='';if(window.XMLHttpRequest&&!window.ActiveXObject)xmlhttp=new XMLHttpRequest();if(!xmlhttp){if(document.createElement&&document.documentElement&&(window.opera||navigator.userAgent.indexOf('MSIE 5.0')==-1)){var ifr=document.createElement('iframe');ifr.setAttribute('id',iframeID);ifr.setAttribute('name',iframeID);ifr.style.visibility='hidden';ifr.style.position='absolute';ifr.style.width=ifr.style.height=ifr.borderWidth='0px';iframe=document.getElementsByTagName('body')[0].appendChild(ifr)}else if(document.body&&document.body.insertAdjacentHTML){document.body.insertAdjacentHTML('beforeEnd','<iframe name="'+iframeID+'" id="'+iframeID+'" style="display:none"></iframe>')}if(window.frames&&window.frames[iframeID])iframe=window.frames[iframeID];iframe.name=iframeID}return this}};HTMLHttpRequest.prototype.parseForm=function(form){with(this){var str='',gE='getElementsByTagName',inputs=[(form[gE]?form[gE]('input'):form.all?form.all.tags('input'):[]),(form[gE]?form[gE]('select'):form.all?form.all.tags('select'):[]),(form[gE]?form[gE]('textarea'):form.all?form.all.tags('textarea'):[])];for(var i=0;i<inputs.length;i++)for(j=0;j<inputs[i].length;j++)if(inputs[i][j]){var plus='++'.substring(0,1);str+=escape(inputs[i][j].getAttribute('name')).replace(plus,'%2B')+'='+escape(inputs[i][j].value).replace(plus,'%2B')+'&'}return str.substring(0,str.length-1)}};HTMLHttpRequest.prototype.xmlhttpSend=function(uri,formStr){with(this){xmlhttp.open(formStr?'POST':'GET',uri,true);xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){if(callback)callback(xmlhttp.responseXML,xmlhttp.responseText,loadingURI);loadingURI=''}};if(formStr&&xmlhttp.setRequestHeader)xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');if(xmlhttp.overrideMimeType)xmlhttp.overrideMimeType((/\.txt/i).test(uri)?'text/plain':'text/xml');xmlhttp.send(formStr);loadingURI=uri;return true}};HTMLHttpRequest.prototype.iframeSend=function(uri,formRef){with(this){if(!document.readyState)return false;if(document.getElementById)var o=document.getElementById(iframeID).offsetWidth;if(formRef)formRef.setAttribute('target',iframeID);else{var ifrDoc=iframe.contentDocument||iframe.document;if(!window.opera&&ifrDoc.location&&ifrDoc.location.href!=location.href)ifrDoc.location.replace(uri);else iframe.src=uri}loadingURI=uri;setTimeout(myName+'.iframeCheck()',(window.opera?250:100));return true}};HTMLHttpRequest.prototype.iframeCheck=function(){with(this){doc=iframe.contentDocument||iframe.document;var il=iframe.location,dr=doc.readyState;if((il&&il.href?il.href.match(loadingURI.replace("\?","\\?")):1)&&(dr=='complete'||(!document.getElementById&&dr=='interactive'))){var cbDoc=doc.documentElement||doc;if(callback)callback(cbDoc,(cbDoc.innerHTML||(cbDoc.body?cbDoc.body.innerHTML:'')),loadingURI);loadingURI=''}else setTimeout(myName+'.iframeCheck()',50)}};HTMLHttpRequest.prototype.load=function(uri){with(this){if(!uri||(!xmlhttp&&!iframe))return false;if(xmlhttp)return xmlhttpSend(uri,'');else if(iframe)return iframeSend(uri,null);else return false}};HTMLHttpRequest.prototype.submit=function(formRef,evt){with(this){evt=evt||window.event;if(!formRef||(!xmlhttp&&!iframe))return false;var method=formRef.getAttribute('method'),uri=formRef.getAttribute('action');if(method&&method.toLowerCase()=='post'){if(xmlhttp){cancelEvent(evt);return xmlhttpSend(uri,parseForm(formRef))}else if(iframe)return iframeSend(uri,formRef);else return false}else{cancelEvent(evt);return load(uri+(uri.indexOf('?')==-1?'?':'&')+parseForm(formRef))}}};function RemoteFileLoader(myName){this.myName=myName;this.threads=[];this.loadingIDs={};this.onload=null};RemoteFileLoader.prototype.getThread=function(destId){with(this){var thr=-1;for(var id in loadingIDs){if(id==destId){thr=loadingIDs[id];break}}if(thr==-1)for(var t=0;t<threads.length;t++){if(!threads[t].loadingURI){thr=t;break}}if(thr==-1){thr=threads.length;threads[thr]=new HTMLHttpRequest(myName+'.threads['+thr+']',null);loadingIDs[destId]=thr}threads[thr].callback=new Function('doc','text','uri','with('+myName+'){copyContent(doc,text,"'+destId+'");if(onload)onload(doc,uri,"'+destId+'")}');return threads[thr]}};RemoteFileLoader.prototype.loadInto=function(uri,destId){return this.getThread(destId).load(uri)};RemoteFileLoader.prototype.submitInto=function(formRef,destId,event){return this.getThread(destId).submit(formRef,event)};RemoteFileLoader.prototype.copyContent=function(docDOM,docText,destId){var src=docDOM?(docDOM.getElementsByTagName?docDOM.getElementsByTagName('body')[0]:(docDOM.body?docDOM.body:null)):null;var dest=document.getElementById?document.getElementById(destId):(document.all?document.all[destId]:null);if(!dest||(!src&&!docText))return;if(src&&src.innerHTML)dest.innerHTML=src.innerHTML;else if(src&&document.importNode){while(dest.firstChild)dest.removeChild(dest.firstChild);for(var i=0;i<src.childNodes.length;i++)dest.appendChild(document.importNode(src.childNodes.item(i),true))}else if(docText){if(docText.match(/(<body>)(.*)(<\/body>)/i))docText=RegExp.$2;dest.innerHTML=docText}};

inside.js:
//<![CDATA[
var docClickLoader = new RemoteFileLoader('docClickLoader');
function loadInto(src, destId, evt)
{
 var ok = docClickLoader.loadInto(src.href || src.getAttribute('href'), destId);
 if (ok) cancelEvent(evt);
};
function toggleInto(src, destId, evt)
{
 var dest = document.getElementById(destId);
 if (!dest.contentLoaded)
 {
  var ok = docClickLoader.loadInto(src.href || src.getAttribute('href'), destId);
  if (ok) dest.contentLoaded = true;
 }
 cancelEvent(evt);
 if (!dest.toggleState)
 {
  src.innerHTML = 'Close: ' + src.innerHTML;
  dest.style.display = 'block';
  dest.toggleState = 1;
 }
 else
 {
  src.innerHTML = src.innerHTML.replace(/^Close: /, '');
  dest.style.display = 'none';
  dest.toggleState = 0;
 }
};

addEvent(document, 'click', function(evt)
{
 evt = evt || window.event;
 var src = evt.target || evt.srcElement;
 if (src.nodeType && src.nodeType != 1) src = src.parentNode;
 while (src)
 {
  var srcName = (src.nodeName||src.tagName||'').toLowerCase();
  if (srcName == 'a' && src.className && src.className.match(/^(load|toggle)into-(.+)$/))
  {
   if (RegExp.$1 == 'load') return loadInto(src, RegExp.$2, evt);
   if (RegExp.$1 == 'toggle') return toggleInto(src, RegExp.$2, evt);
  }
  src = src.parentNode;
 }
}, 1);
//]]>

A kezdolap.php csak részletet írok!:
<div class="menu">
<a href="elemek/load/pages/oldalterkep.htm" class="loadinto-contentwrapper" title="Oldaltérkép"><div class="menudoboz">Oldaltérkép</div></a>
<div class="tartalomdoboz">
<div id="contentwrapper">
<div class="linkfelho-cikk">
alapértelmezett tartalom, ide töltődnek a fájlok...
</div></div></div>
<div class="clear">&nbsp;</div>

A fentebb említett dobozba töltöm be a kapcsolat.php-t, ennek lényegi tartalma:
<form method="post" action="elemek/load/pages/sendmail.php" class="loadinto-contentwrapper" />
<?php
$ipi = getenv("REMOTE_ADDR");
$httprefi = getenv ("HTTP_REFERER");
$httpagenti = getenv ("HTTP_USER_AGENT");
?>
<p align="justify" class="style2">
<input type="hidden" name="ip" value="<?php echo $ipi ?>" />
<input type="hidden" name="httpref" value="<?php echo $httprefi ?>" />
<input type="hidden" name="httpagent" value="<?php echo $httpagenti ?>" />

Levélküldéshez írd be a neved:<br>
<input type="text" name="visitor" size="81%" />
<br><br>
E-mail címed:<br>
<input type="text" name="visitormail" size="81" />
<br><br>
Üzenet:
<br>
<textarea name="notes" rows="7" cols="61"></textarea>
<br><br>
<input type="submit" value="Üzenet ellküldése!" />
</form>

no és mégegyszer a probléma: ha rábökök a küldésre, nem a tartalomdiv-be töltődik, erre keresek megoldást. az oldalt lásd itt: link
Megoldásokat előre is köszönöm, ja és csak finoman, mert nem a web a szakterületem, így: "elnézést ha hülyének néztek." :)
6

Legközelebb formázd meg mert

mgergo90 · 2009. Jún. 1. (H), 11.49
Legközelebb formázd meg mert így csak a nagyon kitartóak fogják végig olvasni a forrás kódodat.
5

még több AJAX...

Nutec · 2009. Május. 28. (Cs), 20.19
Szia!

Ha jól vettem le, akkor a problémád az, hogy úgy kellene elküldeni az emailt, hogy a php oldal ne töltődjön be, igaz?

Van erre egy próbaoldalam, amit egy könyvben szereplő példa alapján készítettem (kicsit át is alakítottam a jelenlegi problémához:)):

Link

Nem tudom, hogy egy ajaxszal betöltött oldalról működik-e, de egy próbát megér.
Ez egy másik scriptet használ, nem a htmlhttprequest.js-t. Biztos van szebb megoldás is, de tőlem most ennyire futotta!:D A js és a php fájl kódjait az oldalra belinkeltem, onnan le tudod szedni.

"Rövid" leírás a példához:

Először is a meghívott kérdőív-oldal fejlécébe linkeld be a HttpClient.js-t (itt nem tudom, hogy nem ütik-e egymást a htmlhttprequest-el).
Alá pedig a példaoldalon szereplő js-scriptet írd:

var serverUrl = 'proba.php';
function remoteCall(func,payload,callback) {
	var client = new HttpClient();
	client.isAsync = true;
	client.requestType = 'POST';
	client.callback = callback;
	client.makeRequest(serverUrl+'?function='+escape(func),
			payload,'text/plain');
}


function mailString() {
    var valtozo1 = document.getElementById('string').value;
	var valtozo2 = document.getElementById('string2').value;
	var valtozo3 = document.getElementById('string3').value;
	var valtozok =  '\n' + "Név: " + valtozo1 + '\n' + "Email: "  + valtozo2 + '\n\n\n' + "Üzenet: " + valtozo3;
	remoteCall('xmail', valtozok,
		function(result) {
			document.getElementById('message').value = result;
		}
	);
}
</script>
Ha ez megvan...

A folyamat...

Az űrlap kitöltése után a submit gomb meghívja a mailString() függvényt a head-ben.
Az kiolvassa az űrlapmezők adatait és egyetlen valtozok nevű stringgé kovácsolja őket.
Ezt küldi át a proba.php-nek a $felhasznalo nevű változóba és azon belül meghívja az xmail() függvényt. A mail() függvény elküldi a levelet a címzettnek (ezt ne felejtsd el átírni a kívánt email címre <!--itt magamból indultam ki:DD-->), majd visszaküldi a $visszatero karakterláncot és kiírja a message id-jű taxtarea elembe, az oldalra!(bár nem tudom ez okvetlenül szükséges-e?). A karakterkódolással lehet, hogy játszadozni kell majd egy kicsit, de ez már egy másik történet. Az xmail()-függvényt meg ha nem tetszik, próbáld meg átalakítani kedved szerint(hibaüzenetek, validemail stb.)!

Remélem érthetően írtam le és tudod majd használni!

Ha bármi gond van megpróbálok segíteni, de az is lehet, hogy a nálam okosabbak tudnak még finomítani a megoldáson!:)

Üdv.: Nu7ec