Nette Ajax + jQuery Form = soubory pomocí ajaxu

akadlec

Pokud někdo z vás řeší problém uploadu souborů na server skrze ajax call tak může vyzkoušet řešení jaké jsem použil já.

Budete potřebovat klasika nette.ajax.js plugin a také jQuery form plugin: http://malsup.com/jquery/form/

Obě knihovny klasicky přilinkujete a knihovnu nette.ajax.js drobně modifikujete (nepřišel jsem na jiný způsob jak to zkloubit)

Metoda this.ajax = function (settings, ui, e) {} řádek 219
Nahraďte:

return this.handleXHR($(ui).ajaxSubmit(settings), settings);

Tímto:

if ( settings.nette && (settings.nette.isForm || settings.nette.isSubmit) ) {
	return this.handleXHR(settings.nette.form.ajaxSubmit(settings), settings);

} else {
	return this.handleXHR($.ajax(settings), settings);
}

Dále pak metodu this.handleXHR = function (xhr, settings) {} řádek 254
Nahraďte:

settings.start(xhr, settings);

Tímto:

if ( !settings.nette || (!settings.nette.isForm && !settings.nette.isSubmit) ) {
	settings.start(xhr, settings);
}

Je potřeba také trochu upravit návratovou hodnotu v pluginu jQuery form, metoda: $.fn.ajaxSubmit = function(options) {} na řádku 250
Nahraďte:

return this;

Tímto:

return jqxhr;

První záměna provede to že při odesílání formuláře se použije jQuery form plugin místo klasického jQuery.ajax() a druhá změna zase ošetřuje dvojí odeslání požadavku a třetí změna zajistí vráceni XHR requestu pro další donastavení nette.ajax

S případnámi návhry a připomínkami klidně sem ;) Nejsem JS guru tak třeba někdo vymyslí lepší řešení jak pomocí nette.ajax posílat i multipart data

EDIT: opraven překlep v nahrazování

Editoval akadlec (30. 8. 2013 23:31)

matopeto

Nechces to autorovi poslat cez pullrequest?

matopeto

Trosku som do toho sprtal upravil som tvoje upravy.

V prvej uprave, som upravil podmienku:

<?php

if (settings.nette && settings.nette.form) {
	return this.handleXHR(settings.nette.form.ajaxSubmit(settings), settings);
} else {
	return this.handleXHR($.ajax(settings), settings);
}

?>

Druha, neviem preco ale u mna nebolo treba. (odosielalo sa to vzdy iba raz)

Tretia je ok. Toto bohuzial je nutne, a preto nie je mozne jednoduchsie zaintegrovanie a poslatie pullrequestu. Nie kazdy ma upravenu kniznicu.

Dalej je nutne bud vypnut snippet forms, ale to nebudeme vediet akym tlacidlom sa formular odoslal, preto je nutne upravit i ext forms (aby neserializoval data, to robi jquery.forms)

Upravil som koncove (koniec funkcie prepare) nastavovanie settings.data tymto:

<?php

$.extend(originalData, formData);

settings.data = originalData;

?>

EDIT: tak nakoniec som urobil i podporu pre uploadProgress, ak bude chvilku casu, hodim to na github aby si kazdy mohol pozriet diff…

Editoval matopeto (5. 12. 2013 15:05)

kolsi

Nějaký nápad jak toto korektně zprovoznit?

Upravil jsem nette.ajax.js a jquery.form.js podle toho topicu, ale nějako to nefunguje. V postu se to sice odešle, ale to je všechno. Nette už nereaguje na onClick[] handler :(

P.S. teď koukám, že onSuccess se provede, ale já bych potřeboval onClick kvůli replikátoru.

akadlec

Tak to leda by se neposlal ten button na který si klikl. Zkus si vyinvestigovat co ti letí v POSTu.