Twitter Bootstrap - ajaxové zpracování formuláře z modálního okna – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím,
mám tuto stránku http://studenti.hetsmek.net/…eni-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

#1 Paja2
Linka nefunguje

#2 Ericsko
odkaz je http://studenti.hetsmek.net/…a3/index.php?…

Pšíteli, máš v tom taký binec, že jednoduchšie by mi bolo celé to napísať odznovu.

Bootstrap sice pouzivas, ale skor ti je na pritaz, ako by si z neho ozaj tazil.

Problem mas v scripte: modal/chybovost-slovicko.php

Totiz na odoslanie ajaxom sa ti nepouzije ajax v index.php, ale ten druhy.

V index.php sice mas e.preventDefault() na zabranenie default akcie <a>, ale v tom druhom (modal/chybovost-slovicko.php) ti to chyba.

Neviem, co ta vedie, k takejto prasarni, ale doporucujem nastudovat viac z kazdeho (html, javascript, aj boostrap ako taky).

Ako rozcvicka dobre, ale keby som mal po tebe robit code review, tak to ti radsej odporucim, aby si si hladal inu pracu ;)

#4 Ericsko
OK, díky za info. Budu rád, když mě obohatíš o nějaké dobré praktické rady. Prasárnou myslíš ty dva ajaxy ? Klidně si to přepíši do lepší podoby, byl bych rád kdyby jsi mi v tomto směru poradila :-), přeci jen máš více zkušeností...a co se týče bootstrapu tak já teprve zkušenosti sbírám

Takto, ide o to, ze takyto pristup je velmi neprehladny a tazko sa ladi.

Ak na to nemas specialny dovod, je dobre javascript volat z toho scriptu, v ktorom otvaras ten modal.

Od zaciatku by som ti doporucil oddelovat html, javascript a css, takze skus cely javascript aj css dat do zvlastneho suboru. V html budes mat teda samotnu stranku a modal okno, ktore skryjes (css display: none)

Do dalsej casti html si das jednotlive obsahy (tiez skryte), ktore chces mat v modalnom okne, tie si budes javascriptom davat do modal-header a modal-body, podla toho, na ktoru otazku klikas. Napr:

<div id="test0" class="hidden" data-id="0">
  <div class="header">Nadpis ulohy</div>
  <div class="body">
    <h2>Zvolte prosím chybovou tolerancí ke slovíčku <strong></strong></h2>
      <p class="text-center">
        <label class="radio-inline">
          <input type="radio" id="radio1" value="-2" name="chybovost">-2
        </label>
        <label class="radio-inline">
          <input type="radio" id="radio1" value="-1" name="chybovost">-1
        </label>
        <label class="radio-inline">
          <input type="radio" id="radio1" value="0" name="chybovost">0
        </label>
        <label class="radio-inline">
          <input type="radio" id="radio1" value="1" name="chybovost">1
        </label>
        <label class="radio-inline">
          <input type="radio" id="radio1" value="2" name="chybovost">2
        </label>
      </p>

  </div>
</div>

Ak chces submitovat formular do php, mozes pouzit standardne key=value pary, alebo este lepsie submitnut JSON objekt, cize si zostavis data z jednotlivych radio buttonov.

V php subore potom submitnute data precitas a ulozis do db, alebo kam chces. Ako odpoved vratis rovnako JSON objekt, napr. {"success":"true", "message":"Data ulozene"}, tu mozes potom precitat v AJAX callbacku a pripadne zobrait uzivatelovi (napr. pomocou Bootstrap alert).

Zatial tolko ako navod, ak potrebujes s niecim pomoct, kludne sa ozvi.

#6 Ericsko
Děkuji, já to v současné době mám tak že modální okna včetně obsahu mám ve složce /modal a pomocí ajaxu si načítám modální okno které potřebuji. Chtěl jsem, aby obsah modálních oken byl raději umístěn zvlášť

Samozřejmě že ty kody ještě pročistím aby bylo samostatně html, css a js

Mohl by jsi mi třeba poslat i nějakou praktickou ukázku ? Rád se poučím a naberu zkušenosti od profíka  

#6 Ericsko
Bylo by možné získat na tebe nějaký kontakt (skype, icq či e-mail) pro případné dotazy ?

Děkuji

#8 Paja2
V profile mam web, tam najdes contact form.