Překreslení formuláře s nette.ajax
- tk9
- Člen | 7
Ahoj, nedaří se mi překreslit aktuálně zobrazený input „address“ ve formuláři po ajaxovém odeslání v onSubmit ani v onSuccess metodě. Inputy by se měly zobrazovat v závislosti na výběru možnosti (oboru) z prvního selectboxu „specialization“. Po výběru oboru v prvním selectboxu mohu v chrome developer tools vidět, že nové snippety přišly jako odpověď po ajaxovém požadavku. Avšak form zůstává zobrazený stále stejně s inputem „address“, který tam byl původně místo toho aby se zobrazil select input „type“. Input „address“ by měl v této situaci úplně zmizet. Form a jeho inputy by se měly renderovat v závislosti na tom co se pošle jako parametr $select do metody create() do továrničky na formulář. Můžete někdo poradit prosím?
Kód formuláře
<?php
namespace App\Form;
use Nette\Application\UI\Form;
use App\Model\Specialization\Specialization;
class SpecializationForm {
/** @var Specialization @inject */
private $specialization;
public function __construct(Specialization $specialization) {
$this->specialization = $specialization;
}
public function create($specialization, $select){
$form = new Form;
// $form->getElementPrototype()->class('ajax');
$form->addSelect('specialization', 'Obor:', $this->specialization->getSpecializations())
->setPrompt('Vyberte obor')
//->setDefaultValue($this->specialization->getDefault($specialization))
->setPrompt('Vyberte obor')
->setRequired('Vyberte obor')
;// ->setAttribute('onchange', 'submit()');
if ($select){
$form->addSelect('type', 'Typ:', array(0 =>"Linux", 1 => "Windows", 2 => "Mac") )
->setPrompt('Vyberte druh');
} else {
$form->addText('address', "Adresa:")
->setAttribute('placeholder', 'Adresa')
->setAttribute('api', 'seznam');
// ->setRequired('Zadejte adresu');
}
return $form;
}
}
V presenteru:
public function createComponentSpecializationForm(){
$form = $this->specializationForm->create($this->specialization, $this->select);
$form->onSuccess[] = [$this, 'specializationSucceeded'];
$form->onSubmit[] = [$this, 'submit'];
$form->onError[] = [$this, 'err'];
return $form;
}
public function err($form) {
$this->redrawControl('form-errors');
}
public function submit($form){
if ($this->isAjax()){
$this->removeComponent($this->getComponent('specializationForm'));
$this->redrawControl("summary");
$this->redrawControl("form-errors");
$this->redrawControl("wrapper");
}
Šablona:
{snippetArea summary}
<div id="search-form">
<div class="col-lg-8 col-lg-offset-2">
{form specializationForm, class => "form form-main-page ajax"}
{snippet form-errors}
{var $form = $control['specializationForm']}
<ul class="errors" n:if="$form->hasErrors()">
<li n:foreach="$form->errors as $error">{$error}</li>
</ul>
{/snippet}
<div class="col-lg-5">
<div class="form-group">
{input specialization, class=> "list-group-item spec input-lg mobile-input address"}
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
{snippet wrapper}
{ifset $control["specializationForm"]["address"]}
{input address, class => "list-group-item input-lg mobile-input address"}
{/ifset}
{ifset $control["specializationForm"]["type"]}
{input type, class => "list-group-item input-lg mobile-input address"}
{/ifset}
{/snippet}
</div>
</div>
<div class="col-lg-2">
{input save, id => "search-submit", class => "list-group-item btn btn-default input-lg mobile-input save"}
</div>
{/form}
</div>
</div>
{/snippetArea}
<script>
$("form.ajax").on("change", function () {
$(this).ajaxSubmit();
return false;
});
</script>
Nette ajax inicializovaný mám v základním @layout.latte.
Editoval tk9 (3. 8. 2018 9:29)
- tk9
- Člen | 7
Zprovoznil jsem to přidáním následujícího kódu do onChange handleru. Metoda $(this).ajaxSubmit() je z jquery.form.js a nemá s nette ajax nic společného. Také dost pomohlo přidat data: form.serialize() protože v requestu se musí poslat alespoň jedna hodnota z formuláře což jsem předtím netušil.
$("#frm-specializationForm-specialization").on("change", function (e) {
var form = $(this).closest('form');
$.nette.ajax({
type: 'POST',
data: form.serialize(),
success: function (data) {
if (data.redirect) {
window.location.href = data.redirect;
}
// snippets
if (data.snippets) {
for (var i in data.snippets) {
$("#" + i).html(data.snippets[i]);
}
}
},
error: function (d){
console.log("Error");
console.log(d);
}
});
return false;
});
Editoval tk9 (3. 8. 2018 17:16)