jQuery/AJAX formular bez pluginu
- dubak
- Člen | 41
zdravim vsetkych, mam taky jednoduchy formular, ktory odosiela data pomocou
AJAX/jQuery a teraz som to chcel prepisat tak, aby som to mohol vlozit do
Nette.
Cize najprv standardny postup, ktory funguje.
- vytvorim komponentu
<?php
protected function createComponentJqueryForm($name)
{
$form = new AppForm($this, $name);
$form->getElementPrototype()->class('ajaxjQueryForm');
$form->addText('name', 'Meno:', 20, 30)
->addRule(Form::FILLED, 'Meno je povinné.');
$form->addText('email', 'E-mail:', 30, 60)
//musi byt vyplnene
->addRule($form::FILLED, 'E-mailová adresa je povinná.')
//musi mat tvar email adresy
->addRule(AppForm::EMAIL, 'Zadajte platnú e-mailovú adresu.');
$form->addSubmit('save', 'Prihlásiť');
$form->onSubmit[] = array($this, 'submitJqueryForm');
return $form;
}
?>
- funkcia po odoslani
<?php
public function submitJqueryForm(Form $form)
{
$entry = $form->getValues();
if( ContactMailModel::odoslatAjaxMail($entry) )
{
$this->flashMessage('Váš email bol odoslaný. Ďakujeme.');
if (!$this->isAjax())
$this->redirect('this');
else {
$this->invalidateControl('form');
$form->setValues(array(), TRUE);
$this->flashMessage('Nie AJAX.');
}
}else{
$this->flashMessage('Váš email NEbol odoslaný.');
}
}
?>
- a v modeli je nieco taketo:
<?php
public function odoslatAjaxMail($entry){
$zahlavie = "From: david@david.com\r\n";
$zahlavie.= "Content-type: text/html\r\n";
$mail = mail('webmaster@localhost',$entry['email'],$entry['name'].'<br>'.$entry['email'],$zahlavie);
if($mail){
return true;
}else{
return false;
}
}
?>
- a mam do sablony prilinkovany subor, kde je nieco taketo:
<script>
$("form.ajaxjQueryForm").live("submit", function () {
$(this).ajaxSubmit();
return false;
});
</script>
a samozrejme som si stiahol k tomu aj potrebny plugin, tuto: https://componette.org/search/?…
Vsetko to funguje ako ma. Ale co ja chcem, resp. nechapem ako to spravit je:
1)nechcem pouzit ten plugin ale napisat si vlastne osetrenie obsluhy toho, co
vracia XMLHttpRequest objekt a hlavne ako mam napriklad zaistit, aby mi
nevratilo ako responce celu stranku, ale iba napr status OK, ze vsetko je
v poriadku.
- takisto nechcem, aby mi vyhadzovalo flash spravu, ale aby sa cely formular prekreslil novym divom, ktory povie ze to prebehlo OK. Je mi jasne ze flash si nastavim vo funkcii v danom presenteri, ale ide mi o to, aby to bolo elegantne.
Bez Nette som to robil takto:
- jQuery
<script>
$(document).ready(function(){
$("#ajaxNewsletterForm").submit(function(){
// 'this' predstavuje aktualny odoslany formular
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "kontakt.php",
data: str,
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
// sprava uspesne odoslana => skryje sa hlavny formular
if(msg == 'OK'){
result = '<div id="ok">Váš e-mail bol zaradený do mailing listu!</div>';
$("#fields").hide('fast',function(){
// funkcia html() nahradi obsah DIVu "note" spravou (to je informacny DIV "result")
$("#note").html(result);
// najprv skryje element
$("#ok").hide();
// opat zviditelny element s efektom
$("#ok").show('slow');
});
}
// chybne vyplnene polia
else{
$("#note").html(msg);
}
});
}
});
return false;
});
});
</script>
HTML:
<div id="obal">
<div id="note"> </div>
<div id="fields">
<form id="ajaxNewsletterForm">
<label>Meno:</label>
<input class="textbox" type="text" name="name" maxlength="60" value="" />
<br />
<label>Váš e-mail:</label>
<input class="textbox" type="text" name="email" maxlength="100" value="" />
<br />
<label> </label>
<input class="button" type="submit" name="submit" value="Odoslať" />
</form>
</div>
</div>
No a potom som si uz iba v subore kontakt.php vratil potrebne info spat do HTML, kde mi to jQuery spracovalo. Ukazka zo skriptu:
<?php
// ... osetrenie chybnych vstupov
//ak su vstupy OK
if(!$error){
$mail = mail('webmaster@localhost', $subject, $message,
"From: ".$name." <".$email.">rn"
."Reply-To: ".$email."rn"
."X-Mailer: PHP/" . phpversion());
if($mail){
echo 'OK';
}
}
// vrat chybovu spravu
else{
echo '<div id="error">'.$error.'</div>';
}
?>
Napriklad nerozumiem, ako si overim v prostredi Nette uspesnost vykonania
operacie.
Ak bude niekto ochotny tu dat nejaky priklad spracovania odoslania formulara bez
pouzitia pluginu, velmi to ocenim.
Vdaka
- dubak
- Člen | 41
pavouk napsal(a):
Pokud chces aby ti to vracelou celou stránku v HTML, tak tam nedavej zadny snippet. Pak akce nebo hendler probehnou jakoby to nebyl ajax a na konci vykresli stranku, ktera se ti vrati v odpovedi. Muzes si udelat sablonu a do ni dat jaky div chces.
Prave ze ja chcem aby to bol AJAX s vyuzitim jQuery, ale nechcem pouzit ten plugin, aby som si mohol osetrit navratovu hodnotu callback funkcie z presenteru sam. No snad je to pochopitelne co mam na mysli. Chcem si najprv jQuery vyskusat bez tych pluginov, aby som pochopil ako to funguje, len akosi sa tomu nemozem dostat na kobylku.
- pavouk
- Člen | 12
A neni lepsi si spise poradne prostudovat ten plugin, popripade ho trochu upravit? Ja jsem tedy vzdy pouzival ten plugin. Ale jak jsem rikal pokud nezadas zadny snippet tak se ti vrati html stranka, ale stale to je ajax. Ta html stranka se jen posle jako ajaxova odpoved (viz firbug – panel síť). Ale stránka se nepřekreslí. Pak už záleží na tobě co s té odpovědi vezmeš a jak to použiješ, popřípadě co si překreslíš (a jak). Snad už jsme se pochopili :-) Ještě by jsi mohl tu návratovou html stránku zakodovat do json aby se ti s ní lépe pracovalo.
- dubak
- Člen | 41
No ja som ten plugin presiel, ale nie je mi vsetko jasne ako to tam funguje. To ze sa mi vrati cela stranka vidim ked si to pozriem v Mozille cez Firebux. Ja prave neviem moc pracovat s tymi snipetmi, aby sa mi nevracala cela stranka, ale iba cast. Nikde som tu nenasiel nieco co sa da pomerne lahko pochopit. Najlepsie pre mna aj mozno nych by bolo, keby sa tu objavil nejaky priklad odoslania formulara bez pouzitia toho pluginu, aby clovek videl aky je vtom rozdiel, nie?