Twitter Bootstrap – ajaxové zpracování formuláře z modálního okna

11. 11. 2013 15:48:00

Zdravím,

mám tuto stránku http://studenti.hetsmek.net/zakazka/zakazka3/index.php?page=zkouseni-slovicko.

Po kliknutí na TEST č. 0 se zobrazí modální okno. MOhl by mi někdo poradit jak formulář, který je v modálním okně zpracovat pomocí ajaxu ? Potřebuji, aby po odeslání formuláře nedošlo k refreshi původní stránky

Na výše uvedeném odkaze jsem zkoušel zpracovat formulář pomocí ajaxu, ale zpracování funguje jen při prvotním načtení stránky.

Můžete mi prosím někdo poradit jak problém vyřešit. Děkuji

11. 11. 2013 15:48:00

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964449

Jan Matoušek

(12 hodnocení)

11. 11. 2013 19:20:30

chyť si to pomocí .submit()

Potom pomocí e.preventDefault(); zastav zpracování a odešli to ajaxem

11. 11. 2013 19:20:30

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964448

Taps

(118 hodnocení)

12. 11. 2013 07:49:10

Napsal Jan Matoušek;1020282
chyť si to pomocí .submit()
Potom pomocí e.preventDefault(); zastav zpracování a odešli to ajaxem

zkoušel jsem níže uvedené, ale i přesto dojde k obnovení původní stránky

12. 11. 2013 07:49:10

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964447

Jan Matoušek

(12 hodnocení)

12. 11. 2013 08:31:03

Napsal Taps;1020411
zkoušel jsem níže uvedené, ale i přesto dojde k obnovení původní stránky
$(document).ready(function() { $('#formChybovost').submit(function() { var id = $('#idSlovicko').val(); var tolerance = $("input:radio:checked").val(); var action = "./db_zpracovani/chybovost-slovicko.php"; event.preventDefault(); $.ajax({ url: action, dataType: 'text', type: "POST", data: "idSlovicko=" + id + "&chybovost=" + tolerance, success: function(data) { alert('OK'); } }); }); });

ten event si musíš předat:

$(document).ready(function() {

$('#formChybovost').submit(function(event<----) {

var id = $('#idSlovicko').val();

var tolerance = $("input:radio:checked").val();

var action = "./db_zpracovani/chybovost-slovicko.php";

event.preventDefault();

$.ajax({

url: action,

dataType: 'text',

type: "POST",

data: "idSlovicko=" + id + "&chybovost=" + tolerance,

success: function(data) {

alert('OK');

}

});

12. 11. 2013 08:31:03

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964446

Taps

(118 hodnocení)

12. 11. 2013 14:49:53

Díky, event jsem doplnil, ale opět nastává stejný problém - ajax mi funguje jen po prvotním načtení stránky a při dalších pokusech už ne. Nevíš čím by to mohlo být ?

12. 11. 2013 14:49:53

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964445

Jan Matoušek

(12 hodnocení)

12. 11. 2013 15:53:57

Napsal Taps;1020576
Díky, event jsem doplnil, ale opět nastává stejný problém - ajax mi funguje jen po prvotním načtení stránky a při dalších pokusech už ne. Nevíš čím by to mohlo být ?

pravděpodobně se ti mění dynamicky elementy. Použij .on("submit", "selector".....

12. 11. 2013 15:53:57

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964444

Taps

(118 hodnocení)

12. 11. 2013 17:09:01

Díky za tip, problém však stále přetrává. Napadlo mě jestli nemůže být problém či kolize v ajaxu, níže uvádím postup

1) po kliknutí na odkaz vyvolám pomocí ajaxu okno a načtu do něj formulář

2) v okně které bylo vyvoláno pomocí ajaxu zvolím hodnoty a stisknu tlačítko uložit

3) po kliknutí na tlačítko uložit se opět pomocí ajaxu volá php skript

12. 11. 2013 17:09:01

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964443

Jan Matoušek

(12 hodnocení)

12. 11. 2013 18:32:28

A máš selector před .on na elementu, co se dynamicky nemění? Udělal jsem schválně i test: http://jsbin.com/IRErIXuW/1/edit?html,js,console,output Při každém odeslání formuláře se přepíše body novým formulářem a funguje to.

12. 11. 2013 18:32:28

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964442

Taps

(118 hodnocení)

13. 11. 2013 07:27:20

Jan Matoušek,

Díky moc, přidal jsem a ajax již funguje, akorát jsem si všiml ještě drobného problému. Po kliknutí na tlačítko uložit v modálním okně se mi cyklují ajaxové požadavky. Dokázal by jsi mi poradit i s tímto problémem ?

13. 11. 2013 07:27:20

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964441

Jan Matoušek

(12 hodnocení)

14. 11. 2013 08:58:47

a jak se ti cyklí? Kdyžtak pošli ukázku

14. 11. 2013 08:58:47

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964440

Taps

(118 hodnocení)

15. 11. 2013 07:44:12

Jan Matoušek

tady to je http://studenti.hetsmek.net/zakazka/zakazka3/index.php?page=zkouseni-slovicko. Když klikneš na odkaz a následně v modálním okně na uložit, tak ve Firefoxu v záložce síť uvidíš že se odesílají prvotní data, i když klikáš na jinou položky. navíc se data kumulují místo toho aby se vždy zpracovával jen jeden udaj

15. 11. 2013 07:44:12

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964439

Jan Matoušek

(12 hodnocení)

15. 11. 2013 08:58:27

No protože vytváříš stálke nová modální okna a ty stará se ti tam hromadí. To znamená, že tam přidáváš nové a nové formuláře a javascript odešle všechny, co tam jsou. Spíš bych vždy přemazal data v dialogu, než vytvářel nové a nové

15. 11. 2013 08:58:27

https://webtrh.cz/diskuse/twitter-bootstrap-ajaxove-zpracovani-formulare-z-modalniho-okna#reply964438

Pro odpověď se přihlašte.

Přihlásit