Jak odeslat onChange Ajaxem

MW

Zdravím a prosím o radu.

Mám form, který se odesílá Ajaxem, ale totéž potřebuji i pokud dojde ke změne na checkboxu.
Takto se to ale odešle bez Ajaxu..

Form je zakomponovaný v gridu (což by nemělo vadit) a používám nette.ajax

Jak na to prosím?

protected function createComponentForm() {
	$form = $this->formFactory->create();
	$form->getElementPrototype()->class('ajax');

	$form->addCheckboxList('ikonservices', NULL, $this->getPresenter()->getIkonServices())
		->getControlPrototype()->addAttributes(array("onChange" => "this.form.submit()"));
	$form->addHidden('client_id')->setDefaultValue($this->name);

	if ($this->getPresenter()->getUser()->isAllowed('klienti', 'edit')) {
	    $form->addSubmit('submit', 'Aktualizovat služby')->getControlPrototype()->class('btn-xs');
	    $form->onSuccess[] = function (Form $form) {
		$this->processForm($form, $form->getValues(TRUE));
	    };
	}

	$data = $this->clientsModel->getIkonServices($this->name);

	If($data) {
	$form->setDefaults(array('ikonservices' => explode(',', $data)));
	}

	return $form;
    }

Editoval MW (7. 9. 2016 13:25)

MW

Prosím, nikdo netuší jak odeslat takový form ajaxem na událost onChange?

Jan Mikeš

Napadá mě více možností, můžeš například simulovat klik na tlačítko submit (možná bude vyžadovat ajax třídu). Tlačítko může být klidně skryté pomocí CSS.

Toto by mělo fungovat

<script>
$("[data-submit-checkbox]").change(function(e)) {
	$(this).parent("form").find("input[type=submit]").click();
});
</script>

Checkboxu pak stačí dát data-submit-checkbox attribut.

Editoval Lexi (9. 9. 2016 12:33)

MW

Latte:

<script>
$("[data-submit-checkbox]").change(function(e)) {
    $(this).parent("form").find("input[type=submit]").click();
});
</script>

Form

$form->addCheckboxList('ikonservices', NULL, $this->getPresenter()->getIkonServices())
		->getControlPrototype()->addAttributes(array ('data-submit-checkbox' => TRUE));

Akce se nevyvola.. v konzoli chyba není.. co dělam blbě prosím?

Moc diky!

Jan Mikeš

Debugovat/krokovat :-)
Postupně eliminovat dílčí části, kde by mohla být chyba, až dojdeš k místu, kde chyba opravdu je:

Zkontrolovat html kód, zda má checkbox data-submit-checkbox atribut
Ujistit se, že není checkbox do DOMu přidáván až po inicializaci tohoto JS (lehce se ověří krokem 3)
console.log($(this)) do js handleru a zkoušet klikat na checkbox, jestli se v konzoli objeví info (pokud ne, zkusit změnit event z change na click
Pokud se handler provede ale nedochází k ajaxovému volání, zkusit jestli $(this).parent("form").find("input[type=submit]") vrátí nějaký element, opět lognout do console result

MW

Je toto spravně přidaný atribut?

<input name="ikonservices[]" type="checkbox" value="2" data-submit-checkbox="on">

Moc díky

Jan Mikeš

Pokud ho matchne

$("[data-submit-checkbox]")

Tak ano. Podle mě by měl.

MW

Tak info v console.log($(this)) se objevuje po klinutí.
I ve stromu se doklikam na parentElement na form a i tam najdu input type=submit.. ale ten click se neprovadi…

Nemelo by vadit, ze mam tech formu na strance vic ne? Jsou to samostatne komponenty.
V tom stromu to nachazim v nodu „0“ .. to je ok?

Omlouvam se.. JS uz par let jen zacinam :)

Díky

Jan Mikeš

Vadit by to nemělo
Výpisi testuj v konzoli přímo v prohlížeči
Zkus toto:

<script>
$("[data-submit-checkbox]").change(function(e)) {
	var $submit = $(this).parent("form").find("input[type=submit]");
	console.log($submit);

	$submit.on("click", function() {
		console.log("clicked");
	});

	$submit.click();
});
</script>

Zkus sem potom napsat console output.

MW

Ve vlaknu
object[] → context → parentElement → form → innerHTML je:

<div class="form-group">
	<div class="col-sm-3 control-label"><label></label></div>

	<div class="col-sm-9"><div class="checkbox"><label><input name="ikonservices[]" data-submit-checkbox="on" checked="" value="1" type="checkbox">Správa</label></div><div class="checkbox"><label><input name="ikonservices[]" data-submit-checkbox="on" checked="" value="2" type="checkbox">Mzdy</label></div><div class="checkbox"><label><input name="ikonservices[]" data-submit-checkbox="on" checked="" value="3" type="checkbox">Daňové příznání</label></div><div class="checkbox"><label><input name="ikonservices[]" data-submit-checkbox="on" value="4" type="checkbox">Hlídání katastru</label></div></div>
</div>

<div class="form-group">
	<div class="col-sm-3 control-label"></div>

	<div class="col-sm-9"><input name="_submit" class="btn-xs btn btn-primary button" value="Aktualizovat služby" type="submit"></div>
</div>


<div><input name="client_id" value="2" type="hidden"><input name="do" value="ikonServicesFormInline-2-form-submit" type="hidden"><!--[if IE]><input type=IEbug disabled style="display:none"><![endif]--></div>

Ten clicked tam nevidim…

Diky !

Martk

Možná se mýlím, ale nemělo být místo parent closest?

<script>
$("[data-submit-checkbox]").change(function(e)) {
    $(this).closest("form").find("input[type=submit]").click();
});
</script>

Editoval Antik (14. 9. 2016 17:08)

MW

@Antik Ano, toto funguje. Ještě jsem nasel jedno reseni:

$("input[type=submit]",this.form).click();

Díky všem!