Formulář se neodesílá ajaxem

ondrapech

Ahoj. I přes návody, příspěvky na fóru a hrozně moc zkoušení se mi nepodařilo odeslat formulář ajaxově. Vždycky se obnoví stránka. Jiné ajax požadavky (odkazy na handle metody) fungují. Používám „contributte/live-form-validation“ místo netteForms validace a na AJAX nette.ajax.js . Nevím co je špatně. Předem díky za rady.

view:

<!-- ADD USERS - MODAL -->
<div class="modal fade" id="addUser">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-left">
                    Dealer users
                    <span class="font-weight-light">settings</span>
                    <br>
                    <small class="text-muted">Select user or create new user.</small>
                </h5>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">×
                </button>
            </div>
            <form class="ajax" n:name="addDealerUserForm">
                <div class="modal-body">

                    <div class="form-group row" id="sales-representative-selection">
                        <label class="col-form-label col-sm-2 text-sm-right"></label>
                        <div class="col-sm-10 pl-5">
                            <input n:name="new_user" class="form-check-input"
                                                     type="checkbox">
                            <label class="form-check-label">
                                New user
                            </label>
                        </div>
                    </div>
                    <div class="form-group row" id="exist-user">
                        <label class="col-form-label col-sm-2 text-sm-right">{label user_id}</label>
                        <div class="col-sm-10">
                            <select n:name="user_id" type="text"
                                                     class="form-control select2-user-id"></select>
                        </div>
                    </div>
                    <div id="new-user-selection">
                        <div n:formContainer="new_user_container">
                            <div class="form-group row" id="exist-user">
                                <label class="col-form-label col-sm-2 text-sm-right">{label full_name}</label>
                                <div class="col-sm-10">
                                    <input n:name="full_name" type="text"
                                                              class="form-control">
                                </div>
                            </div>
                            <div class="form-group row" id="exist-user">
                                <label class="col-form-label col-sm-2 text-sm-right">{label email}</label>
                                <div class="col-sm-10">
                                    <input n:name="email" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" id="exist-user">
                        <label class="col-form-label col-sm-2 text-sm-right">{label role}</label>
                        <div class="col-sm-10">
                            <select n:name="role" type="text" class="form-control"></select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                    <input n:name="submit" class="btn btn-primary">
                </div>
            </form>

        </div>
    </div>
</div>

presenter:

public function createComponentAddDealerUserForm()
{
    $muduleUsers = $this->userModel->getUsersByModule($this->module)->fetchPairs('id', 'full_name');

    $form = new Form();
    $form->addHidden('dealer_id');

    $form->addCheckbox('new_user', 'New user')
        ->setDefaultValue(true)
        ->addCondition($form::EQUAL, true)
        ->toggle('new-user-selection')
        ->endCondition()
        ->addCondition($form::EQUAL, false)
        ->toggle('exist-user')
        ->endCondition();
    $form->addSelect('user_id', 'User', $muduleUsers)
        ->setPrompt(null)
        ->addConditionOn($form['new_user'], $form::EQUAL, false)
        ->setRequired();
    $form->addSelect('role', 'Role', ['user' => 'User', 'manager' => 'Manager'])
        ->setRequired();

    $newUser = $form->addContainer('new_user_container');
    $newUser->addText('full_name', 'Full name')
        ->addConditionOn($form['new_user'], $form::EQUAL, true)
        ->setRequired();
    $newUser->addEmail('email', 'Email')
        ->addConditionOn($form['new_user'], $form::EQUAL, true)
        ->setRequired();

    $form->addSubmit('submit', 'Add user');
    $form->onSuccess[] = [$this, 'addDealerUserFormSucceeded'];

    return $form;

}

public function addDealerUserFormSucceeded($form, $values)
{
    $data = [
        'dealer_id' => $values->dealer_id,
        'role' => $values->role,
    ];

    if (!$values->new_user) {
        $data['user_id'] = $values->user_id;
    } else {
        //TODO Vytvořit uživatele
    }

    $this->dealerModel->addUserDealer($data);
    if (!$this->isAjax()) {
        $this->flashMessage('User been added. WITH AJAX', 'success');
        $this->redrawControl('flashMessages');
        $this->redrawControl('dealerUsers');

    } else {
        $this->redirect('this');
    }
}

Editoval ondrapech (15. 8. 2019 13:24)

Phalanx

dal bych class ajax ne na formulář, ale na input <input n:name="submit" class="btn btn-primary ajax">
přidej si onError $form->onError[] = [$this, 'processFormError']; a můžeš tu případně odchytnout problém přes xDebug
vypisuj formulářové errory

<?php
	<div class="alert alert-danger fade in" n:if="sizeof($form->getErrors())">
		<div n:foreach="$form->getErrors() as $error">{$error}</div>
	</div>
?>

Ondřej Kubíček

třídu .ajax určitě nechej na <form> elementu
js pro inicializaci nette.ajax.js tam máš? respektive nabinduje se to na ten form? nehodí to nějakou chybu v konzoli?

$(function () {
	$.nette.init();
});

chemix

Imho vykricnik !

if (!$this->isAjax()) {
        $this->flashMessage('User been added. WITH AJAX', 'success');
        $this->redrawControl('flashMessages');
        $this->redrawControl('dealerUsers');

    } else {
        $this->redirect('this');
    }

chemix

Plus je dobre vedet zda se vec odesila pomoci XHR = pouzivat Browser Dev Tools

Plus2: idealne pouzit nittro nebo naja. jQuery.ajax je neudrzovany

ondrapech

@chemix bylo to vykříčníkem, kdy jsem obrátil podmínku v rámci ěnjakého zkoušení všeho možného. ale zapomněl jsem smazat vykčičník.

Nicméně všem děkuji za užitečné rady.