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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

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

Pro odpověď se přihlašte.

Přihlásit