ugrás a tartalomhoz

Form adatainak küldése PHP-vel, oldalfrissítés nélkül

cs.m · 2008. Feb. 17. (V), 17.39
Egy relatív összetett problémával találtam magam szemben:
Egy apróhirdetés-beküldő és -kilistázó modult kell összehozni, oly módon, hogy JS/CSS megoldással tabokat hoztam létre és egy ChangeTab() nevű függvénnyel váltom azokat, természetesen gond nélkül működik (alapból a kilistázás jelenik meg).
Ezen felül a beküldés tabon értelemszerűen van egy form, ami submit gombra elvileg egy php-nek kéne, hogy elküldje az adatokat, majd kiírná egy div-ben (vagy akár a form helyett - részletkérdés), hogy sikerült az elküldés. Erre ajaxos (prototype.js) megoldást találtam, kipróbáltam egy üres oldalon, működik.
Viszont amikor már implementálom a tabos keretbe, gombnyomás után újra betöltődik az egész oldal, azzal, hogy az eredeti index.php?lg=hu cím átalakul index.php?# címre (action="#"), és nem ír ki semmit az adott div-ben.

Ő a kód:
<div id="TabLista" style="display:block;">
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>
<div id="TabBekuld" style="display:none;">
<div class="apro_empty"><a href="javascript:"> </a></div>
<div class="apro_off"><a href="javascript:ChangeTab('Lista')">apróhirdetések</a></div>
<div class="apro_on"><a href="javascript:ChangeTab('Bekuld')">beküldés</a></div>
</div>

<div class="apro_main" id="ContentLista">
bla bla
</div>

<div class="apro_main_none" id="ContentBekuld">
<form action="#" id="formBekuld">
<center>Minden mez&#337; kitöltése kötelez&#337;!</center>
<table>
<tr><td class="apro_td">Név:</td><td><input type="text" id="apro_nev" size="11" /></td></tr>
<tr><td class="apro_td">E-mail:</td><td><input type="text" id="apro_mail" size="11" /></td></tr>
<tr><td class="apro_td">Tel.:</td><td><input type="text" id="apro_tel" size="11" /></td></tr>
<tr><td class="apro_td">Szöveg:</td><td><textarea id="apro_text" cols="9" rows="3"></textarea></td></tr>
<tr><td class="apro_td" colspan="2" align="center"><input type="submit" onclick="goApro()" id="apro_submit" value="mehet" class="buttons" /></td></tr>
</table>
</form>

<div id="placeholder"></div>

<script type="text/javascript">
function goApro() {
var url = 'add.php';
var pars = 'apro_nev=' + document.getElementById('apro_nev').value + '&apro_mail=' + document.getElementById('apro_mail').value;
var myAjax = new Ajax.Updater( 'placeholder', url, { method: 'post', parameters: pars });
}
</script>

</div>


és a tabváltó script:
function ChangeTab(div)
{
var TabLista= document.getElementById("TabLista");
var TabBekuld = document.getElementById("TabBekuld");
var ContentLista = document.getElementById("ContentLista");
var ContentBekuld = document.getElementById("ContentBekuld");

if (div=='Lista')
{
TabLista.style.display='block';
TabBekuld.style.display='none';
ContentLista.style.display='block';
ContentBekuld.style.display='none';
}
else if (div=='Bekuld')
{
TabLista.style.display='none';
TabBekuld.style.display='block';
ContentLista.style.display='none';
ContentBekuld.style.display='block';
}
}
‹ divbe tartalom töltése oldaltöltés nélkül Hangerő módosítása ›
 ■
1

AJAX

janoszen · 2008. Feb. 17. (V), 18.04
A megoldast ugy hivjak: AJAX. A neten hatalmas mennyisegu tutorial van hozza. Ha nem ohajtasz sokat szivni vele, valoszinuleg a Prototype framework minden vagyadat kielegiti.

(Bocs az ekezetek hianyaert, eppel X11-et emergelek, ugyhogy se grafikus kornyezet, se magyar klavi. :) )
2

olvasni?

gex · 2008. Feb. 18. (H), 09.15
te néha el is olvasod, hogy mire válaszolsz? idézet a témanyitó második bekezdéséből:
Erre ajaxos (prototype.js) megoldást találtam

erre azt válaszolni, hogy a megoldás ajax és prototype framework, egy kicsit talán nevetséges.
9

Mea culpa

janoszen · 2008. Feb. 18. (H), 19.19
Mea culpa, kicsit szétszórt voltam.
3

submit gomb mindig lefut

gex · 2008. Feb. 18. (H), 09.42
a submit gombod click metódusára tetted az eseményt, és mivel nem gátolod meg a klikkelés lefutását, az szépen elküldi az űrlapod. ismerkedj meg a prototype Event osztályával, ezzel tudsz egyrészt egy eseményt hozzárendelni az űrlap submit metódusához, másrészt ezzel azt is meg tudod akadályozni, hogy a hagyományos értelemben elküldd az űrlapot.

valami ilyesmi lesz:

// rendeljünk hozzá egy függvényt a form submit eseményéhez
$('formBekuld').observe('submit', goApro);

function goApro(e) {
    // gátoljuk meg a form submit eseményének lefutását (azaz az oldal újratöltődését)
    Event.stop(e);
    var url = 'add.php';
    // hozzuk létre a paraméterek tömbjét
    var pars = {apro_nev: $F('apro_nev'), apro_mail: $F('apro_mail')};
    new Ajax.Updater('placeholder', url, {method: 'post', parameters: pars});
}
az $F függvénnyel kaphatod meg egy input mező értékét, kb ugyanaz, mintha $('apro_nev').getValue()-t írtam volna (a $ a document.getElementById shortcutja), a többit remélem érted. a legszexibb akkor lenne, ha ezt az egészet kiszerveznéd külső js fájlba, és onDomLoad eseményre történne meg maga az esemény hozzárendelés is:

document.observe('dom:loaded', function() {
    $('formBekuld').observe('submit', goApro);
});
mit csinálok itt? a document dom:loaded eseményéhez (tehát amikor már az egész dom be van töltve) hozzárendelem az űrlapod submitjának függvény-hozzárendelését. így nem történhet olyan hiba, hogy az űrlap még nem is létezik, amikor te már vezérelni akarod az események lefutását.

remélem minden érthető még akkor is ha néhol kicsit magyartalanul sikerült fogalmaznom. ;)
4

onload - submit

Chupacabra · 2008. Feb. 18. (H), 10.29
Ilyenkor szerintem figyelni kell hogy a submit gomb addig ne kerüljön ki, amíg a hozzá tartozó akció még nincs hozzárendelve. Mondjuk egy komplett form kitöltésénél kicsi az esély hogy valaki nyomogassa a teljes oldalbetöltés előtt, de előfordulhat. (vagy nem submitra kell tenni)
5

nincs rá mód

gex · 2008. Feb. 18. (H), 10.58
szvsz nincs megfelelő mód arra, hogy valami ne kerüljön ki, ha van js és kikerüljön ha nincs. én ugyanis a js nélküli látogatóknak is megadnám az esélyt, hogy feladhassák a hirdetésüket (ennek a hagyományos módon is működnie kéne, pl action="#" egy kicsit sérti az accessibility-t). mellesleg a domload elég gyors, úgyhogy nem sok esély van ilyenre.

persze a head tag-be bele lehet írni valami visibility: hidden mókát, de akkor mi van ha valaki js-sel de css nélkül jön. persze ez már szőrszálhasogatás. :)
6

félig jogos

Chupacabra · 2008. Feb. 18. (H), 11.21
Egy átlagfelhasználó lightboxos oldalakon futhathat bele, gyorsan kattint egy képre ami új oldalon jön be. Én speciel sokat találkozok ilyennel. (Biztosítók belső redszere, ahol ajánltatot tudsz kérni, nem tudom terhelés vagy sávszél hiány miatt, de veszett lassúak, gyakorlatilag firebugnézés melett csak akkor viszel fel újabb adatot, ha látod hogy az előző post végzett) Tény hogy ezek az oldalak js nélkül általában nem használhatóak, viszont a felhasználók csoportja is zárt.
7

lightbox nem használ domload eseményt

gex · 2008. Feb. 18. (H), 13.24
most leszedtem a legfrissebb lightbox 2-t, a lightbox.js 817-es sora:

Event.observe(window, 'load', initLightbox, false);
ez ugye akkor fut le, ha az oldal betöltődött, azaz a - főleg lightbox-os oldalon - rengeteg kép, plusz css és js fájlok. ennél jobb megoldást nyújt a document observe, mert az nem várja meg a képeket. 817-es sort le kell cserélni erre:

Event.observe(document, 'dom:loaded', initLightbox);
// vagy shortcut
document.observe('dom:loaded', initLightbox);
és máris gyorsítottál - sok kép esetén nem is keveset - a lightboxon.

szerk: nem a lightboxon, hanem a betöltődésén.
8

wow

Chupacabra · 2008. Feb. 18. (H), 16.32
Nem téged akartalak megtalálni ezzel, csak említettem egy lehetséges problémát. Ennyi energiát egy kommentembe még senki nem fektetett eddig. Köszi :)
10

kérdező megoldotta a problémát?

gex · 2008. Feb. 19. (K), 11.39
most már csak az érdekel, hogy sikerült-e megoldania a kérdezőnek a problémát.
11

probléma megoldva(?)

cs.m · 2008. Feb. 21. (Cs), 14.22
Bocsánat, hogy késve válaszolok, kicsit el voltam havazva a napokban. A problémát végülis megoldottam, igaz, nem a fentebb említett ajaxos megoldásokkal, de egyelőre mindegy.
Nem vagyok szaki Ajax-témában, meg biztos is vagyok benne, hogy nem így kellene elkezdeni, hanem normálisan, az alapoktól, amit mostmár sürgősen át fogok nézni.
Valamiért a megoldások közül semmi sem dolgozott normálisan, már a végletekig leredukáltam a tartalmakat. Amin nagyon kiakadtam: két felépítésileg egyforma sima, pársoros HTML-oldal közül csak az egyiken működött a script, a másikon egyáltalán nem, pedig tényleg minden ugyanaz volt, csak az ID-k mások. Aztán hirtelen már az se működött, ami először jó volt, pedig semmit sem változtattam rajta.
Mindegy, beveszek egy Bensedint, meg dobok rá egy Red Bullt, aztán mindjárt jó lesz :D
12

megtekinthető a kész mű?

sramitomi · 2010. Aug. 12. (Cs), 10.40
Bár meglehetősen régi a post, de azért megkérdezném, hogy megtekinthető-e valahol a kész mű?
Esetleg az elkészített anyag hozzáférhető-e?

Köszi, sramitomi