NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Ajax -> Odeslání formuláře a update divu

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
katrincsak
Člen
Avatar
katrincsak:24.5.2017 12:58

Zdravím,

udělal jsem si tento nízkoúrovňový ajax a potřeboval bych odeslaný formulář pře načíst. Do proměnné htmlData se vrací celý obsah stránky a potřebuji z toho vytáhnout jen ten formulář, abych si ho přepsal.

Jak toho lze docílit?

$.ajax({
            type: 'post',
            url: '/kosik',
            data: $('#formBasketStep1').serialize(),
            success: function (htmlData) {
                        $('.eshop').find('form#formBasketStep1').html(htmlData);
            }
  });

Děkuji za rady ;-)

 
Odpovědět
24.5.2017 12:58
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:24.5.2017 13:09

Udelej si anonymni prvek, nahrej do nej vysledek a pak vyparsuj formular :

var thtml = $( '<div></div>' );
thtml.html(htmlData);

$('#formBasketStep1').html( $('#formBasketStep1', thtml).html() );
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
24.5.2017 13:09
Avatar
kaskader202
Člen
Avatar
Odpovídá na katrincsak
kaskader202:24.5.2017 13:12

Ahoj, a co za data v jakem formatu ti to vraci ? Nešlo by vracená data projít najit hodnoty inputů a priradit je podle name ? Jinak bych asi upravil kosik, aby vracel v podstatě post, ktery ty posíláš a ty nabindoval na dané inputy.

 
Nahoru Odpovědět
24.5.2017 13:12
Avatar
katrincsak
Člen
Avatar
Odpovídá na Jiří Fencl
katrincsak:24.5.2017 19:57

Zkusím, děkuji a dám vědě.

 
Nahoru Odpovědět
24.5.2017 19:57
Avatar
katrincsak
Člen
Avatar
Odpovídá na kaskader202
katrincsak:24.5.2017 20:00

Vrací se mi to v html, což musí zůstat. Jedná se o celkem rozsáhlou aktualizaci stávajícího košíku a tak php musí být beze změny, pak bych musel zasahovat i do původního košíku což není žádoucí. Jedná se totiž o některé informace, které bych složitě zpracovával na straně klienta a když se budou přidávat další funkce, tak bude lepší načíst formulář celý.

 
Nahoru Odpovědět
24.5.2017 20:00
Avatar
katrincsak
Člen
Avatar
Odpovídá na Jiří Fencl
katrincsak:24.5.2017 21:23

Super, tak to funguje, ale mám ještě problém. Jakmile poprvé odešlu formulář, tak je to v pohodě. Po druhé se to již také odešle, ale 2x . Opakované odeslání bez refreshe to stále odešle již jen 2x.

Při tom nikde nevidím tlačítko, které to spouští 2x . Napadlo mě tedy, že to bude způsobovat ten anonymní a potřeboval bych ho vždy vymazat, jak to provedu?

Napadlo mě proměnnou "thtml" vždy vymazat, ale problém to neřeší. Je tam něco skrytého co to odešle 2x . Pro jistotu jsem nechal spouštět jen ajax, takže se před tím nespouští nic dalšího kromě .on(click.... .

$.ajax({
            type: 'post',
            url: '/kosik',
            data: $('#formBasketStep1').serialize(),
            success: function (htmlData) {
                                var thtml = 0;
                                var thtml = $('<div></div>');
                                thtml.html(htmlData);
                                $('form#formBasketStep1').empty();
                                alert("smazáno");
                                $('form#formBasketStep1').html( $('form#formBasketStep1', thtml).html() );
            }
        });
Editováno 24.5.2017 21:25
 
Nahoru Odpovědět
24.5.2017 21:23
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:24.5.2017 22:01

Asi to bude tim, ze netestujes, jestli je ten success spravny:

success: function (htmlData,textStatus) {
  if(textStatus=='success'){
    //neco
  }else{
    // chyba
  }
 
Nahoru Odpovědět
24.5.2017 22:01
Avatar
katrincsak
Člen
Avatar
Odpovídá na Jiří Fencl
katrincsak:25.5.2017 10:47

Pro jistotu jsem to zkusil, ale tím to není. Na víc se to způsobí jen tehdy, kdy dojde k novému načtení toho formuláře z anonimního prvku.

 
Nahoru Odpovědět
25.5.2017 10:47
Avatar
katrincsak
Člen
Avatar
Odpovídá na Jiří Fencl
katrincsak:27.5.2017 10:42

Tak už vyřešeno, nevkládal jsem to do žádného elementu, ale rovnou zpracovával výsledek.
Asi před tím nějaká chyba, ale při dalším testování se již počet odeslání navyšoval, teď už teda ne.

Již to funguje jak má.

if(textStatus=='success'){
        $('form#formBasketStep1').html( $('form#formBasketStep1', htmlData).html() );
}
 
Nahoru Odpovědět
27.5.2017 10:42
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na katrincsak
Petr Čech:27.5.2017 12:28

Mimochodem... určitým způsobem lepší řešení než .on('click', ...) je lepší

$(form).submit(function(e){
    e.preventDefault();
    ...
});

Potom to bude fungovat vždy, když se to má odeslat a ne jen, když stiskneš tlačítko. To je třeba lepší pro uživatele, co jsou efektivní a používají k odeslání formulářů enter.
A také se to vždy spustí jen jednou.

Editováno 27.5.2017 12:29
Nahoru Odpovědět
27.5.2017 12:28
the cake is a lie
Avatar
katrincsak
Člen
Avatar
Odpovídá na Petr Čech
katrincsak:29.5.2017 14:01

To by sice bylo hezké, ale nejde zde jenom o odeslání formuláře, ale o další zpracování různých informací a tak je pro mě velice důležité, které tlačítko uživatel zmáčkne, provedou se procesy před odesláním a následně se to odešle.

Ale určitě jsem rád i za tuto radu, snaha se určitě cení ;-)

 
Nahoru Odpovědět
29.5.2017 14:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.