Vlastný handler na form submit
Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
- matlej
- Člen | 10
Dobrý deň,
vytvoril som si formulár a chcel by som ho odosielať pomocou vlastného js
skriptu. Avšak keď použijem nette.ajax.js a formuláru nastavím triedu
ajax
tak nemôžem použiť vlastnú js funkciu (srandy okolo
loadera, fadeIn, fadeOut…). Na druhú stranu keď som odstránil triedu
ajax
a vytvoril som si svoju funkciu tak mi všetky tie srandy
fungujú ale nejde mi validácia a neprekreslí sa mi snippet.
Takto vyzerá formulár v default.latte:
{snippet Ajax}
{form addServerForm}
<div class="serverFormRow">
<img src="/img/addServerIcons/aplikacie.png" alt="">
<div class="pBorder">
<p>Aplikácie</p>
</div>
{input apps}
</div>
{/form}
{/snippet}
Toto mám v layout.latte:
{block scripts}
<script src="{$basePath}/js/nette.ajax.js"></script>
<script src="{$basePath}/js/main.js"></script>
{/block}
Formulár a jeho spracovanie:
public function createComponentAddServerForm()
{
$form = new Form;
//$form->getElementPrototype()->class('ajax');
$form->addSelect('apps', 'Aplikácie', $this->repo->getGames());
$form->onSuccess[] = array($this, 'processAddServerForm');
return $form;
}
public function processAddServerForm($form, $values)
{
$this->repo->insertNewServer(
$values->apps
);
$this->flashMessage('Server bol úspešne pridaný', 'success');
$this->invalidateControl('FlashMsg');
$this->invalidateControl('Ajax');
$form->setValues(array(), TRUE);
}
Takto vyzerá môj main.js:
$.nette.init();
/*
* When user clicks on "Pridať server" shows the form for him
*/
$('form#frm-addServerForm').on('submit', function(e){
height = $('#serverForm').height();
previousForm = $('div#serverForm').html();
$('div#serverForm > frm-addServerForm').hide();
$('div#serverForm').height(height)
.html('<div style="position: relative; top: 40%;'
+ 'text-align:center; color:black;">'
+ '<img src="/img/poi.gif" alt="">'
+ '<br>Spracovávam</div>');
$.post( this.action,
$(this).serialize(),
function(payload){
$('#serverForm').html(previousForm);
$('#serverForm').slideUp(1000);
$(".c table").slideDown('1000');
$("#filter").slideDown('1000');
$("#nacitaj_viac").slideDown('1000');
$("#zrusit_filter").slideDown('1000');
$.nette.success(payload);
}
);
e.preventDefault();
});
V konzole mi vypisuje
TypeError: $.nette.success is not a function
Prosím vás o akúkoľvek radu radu budem vám vďačný.
- matlej
- Člen | 10
Tak už som to vyriešil :D namiesto:
$.post( this.action,
$(this).serialize(),
function(payload){
$('#serverForm').html(previousForm);
$('#serverForm').slideUp(1000);
$(".c table").slideDown('1000');
$("#filter").slideDown('1000');
$("#nacitaj_viac").slideDown('1000');
$("#zrusit_filter").slideDown('1000');
$.nette.success(payload);
}
);
som dal:
$.nette.ajax({
url: this.action,
type: 'POST',
data: $(this).serialize(),
success: function (payload) {
$('#serverForm').html(previousForm);
$('#serverForm').slideUp(1000);
$(".c table").slideDown(1000);
$("#filter").slideDown(1000);
$("#nacitaj_viac").slideDown(1000);
$("#zrusit_filter").slideDown(1000);
}
});
a už to ide.