Odeslání formuláře ajaxem při změně checkboxu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Odeslání formuláře ajaxem při změně checkboxu – JavaScript, AJAX, jQuery – Fórum – Programujte.comOdeslání formuláře ajaxem při změně checkboxu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Kall_Ell0
Návštěvník
24. 10. 2011   #1
-
0
-

Ahoj mám jednoduchý níže uvedený formulař. potřeboval bych ho odeslat ajaxem při změně jakéhokoliv checkboxu. Poradíte jak na to? Pomocí jQuery(ajax)

<form name='vyber_jmen' method='post' action='/db/akce/ulozit.php?id=1' enctype='multipart/form-data'>
      <table cellspacing='0' rowspacing='0' width='100%'>
         <tr >
            <td>
               <input type='checkbox' name='1'>admin &nbsp;&nbsp;&nbsp;
               <input type='checkbox' name='3'checked >Pepa &nbsp;&nbsp;&nbsp;
               <input type='checkbox' name='2'checked >Lukas &nbsp;&nbsp;&nbsp;
            </tr>
            <tr>
               <td colspan='3' align='center'><input type='submit' name='ulozit' value='Zapis'></td>
            </tr>
         </table>
</from>
         
Nahlásit jako SPAM
IP: 80.87.189.–
Reklama
Reklama
Nefaritus
~ Redaktor
+2
Posthunter
24. 10. 2011   #2
-
-2
-
Mimo téma

Jednoduše přes .click() necháš submitnout form (dej mu nějaké ID) a ten pak zpracuješ ajaxem.

$(':checkbox').click(function () {
    $('form#formID').submit();
});

$('form#formID').submit(function() {
    // AJAX
    return false;
});

Pokud nevíš, jak zformulovat AJAX dotaz, tak tě odkážu na jQuery dokumenatci http://api.jquery.com/jQuery.ajax/

 
Nahlásit jako SPAM
IP: 89.103.4.–
Kall_Ell0
Návštěvník
24. 10. 2011   #3
-
0
-

#2 Nefaritus
super dík

Nahlásit jako SPAM
IP: 80.87.189.–
Kall_Ell0
Návštěvník
24. 10. 2011   #4
-
0
-

#2 Nefaritus
Ještě se zeptám. Ono to totiž není úplný. Ten formulář se mě generuje pomocí php a má pokaždé jiný počet checkboxů. Otázka je, jak přistoupit ke všem. Posílám to pomocí ajaxu na server ke zpracování. No a důležitá věc je, že se mě tento formulář vkládá do stránky také pomocí ajaxu. Jenže když dám zobrazit zdrojový kód, tak tam formulář není. S jQuery začínám, tak nevím jestli je to chyba nebo normální chování. Problém je, že to co si mě poradil nefunguje.

Nahlásit jako SPAM
IP: 80.87.189.–
Kall_Ell0
Návštěvník
24. 10. 2011   #5
-
0
-

tak ať dělám co dělám tak nejsem schopný docílit toho, aby se daný kód vložil do stránky. Mám tabulku, když klikni na nějaký řádek, tak se mě načte detail i s checkboxy. na zobrazené stránce vidím vše jak mám, ale v kódu ten dodatečně načtený obsah není, tudíž ten víš uvedený javascript na checkbox nereaguje. V čem dělám chybu?

$(document).ready(function($) {
   $("tr.detail").click(function() {
      var detail = $(this);
      var id_adresy = detail.attr('name');
      $.post("akce/adr_detail.php", { id_adresar: id_adresy},
         function(data) {
            $("#sidebar-content").html(data);
         }
      );
      return false;
   });
Nahlásit jako SPAM
IP: 80.87.189.–
Froggy0
Newbie
27. 10. 2011   #6
-
0
-

Zkus tenhle kód: 

jQuery(function($) {
  $('tr.detail').live('click',function() {
    var id_adresy = $(this).attr('name');
    $('#sidebar-content').load('akce/adr_detail.php',{id_adresar:id_adresy});

  return false;
  });
});

Pokud jsem to dobře pochopil, pak dynamicky přidáváš nějaký obsah. Pokud nějaký obsah přidáš za chodu stránky (tj. AJAXem), je třeba použít trochu jiné metody - a sice .live() místo klasické, jinak kód nebude reagovat.

Syntaxe je stejná jako u bind(), tedy §('#selektor').live(event,listener).

Zkontroluj si (např pomocí console.log()), jestli máš v proměnné "id_adresar" správnou hodnotu pro script.

Nahlásit jako SPAM
IP: 85.70.239.–
Kall_Ell0
Návštěvník
31. 10. 2011   #7
-
+1
-
Zajímavé

#6 Froggy
Ahoj, prosím tě, stále to nejde :-( Prosím tě, nějak si s tím nevím rady. Popíšu ten kód kompletně, třeba bude jednoduší poradit. Po kliknutí v menu se mě načta jednoduchá stránka. Níže uvedená.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pokus</title>
<meta http-equiv="Content-language" content="cs" />
<link rel="stylesheet" media="screen" href="css/styl.css" type="text/css">
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/adr_nacteni.js' type='text/javascript'></script>
</head>

<body>

<table cellspacing='0' rowspacing='0' width='50%'>
   <tr>
      <th>N&aacute;zev</th>
   </tr>
   <tr>
       td class='detail' name='1' align='left'><a class='nahled' href='#'>Turistika s r.o.</a></td>
   </tr>
   <tr>
      <td class='detail' name='2' align='left'><a class='nahled' href='#'>Novakova doprava</a></td>
   </tr>
   <tr>
      <td class='detail' name='3' align='left'><a class='nahled' href='#'>Novak s.r.o.</a></td>
   </tr>
   <tr>
      <td class='detail' name='4' align='left'><a class='nahled' href='#'>test s.r.o.</a></td>
   </tr>
</table>
</div></div>
<div id="sidebar"><div id="sidebar-content" >

</div></div>
</body>
</html>

obsah adr_nacteni.js

$(document).ready(function($) {
   $('td.detail').live('click',function() {
      var id_adresy = $(this).attr('name');
      $('#sidebar-content').load('akce/adr_detail.php',{id_adresar:id_adresy});
      return false;
   });
   $(':checkbox').click(function () {
       $('form#vyber_jmen').submit();
   });

   $('form#vyber_jmen').submit(function() {
      var detail = $(this);
      var id_adresy = detail.attr('name');
      alert(id_adresy);
      return false;
   });
});

Když kliknu na řádek s názvem, načte se mě detail adresy(do elementu sidebar-content), až sem mě vše funguje jak má(i s tím .live). Součastí detailu je ale formulář pro změnu a pak formulář s několika checkboxy( u každé adresy jich je jiný počet). Checkboxy jsou pojmenované jménem uživatele, který může detail vidět. Já potřebuji zpracovat načtené formuláře a to mě nejde.

Zkoušel jsem si vložit do stránky jeden cvičně formulář s checkboxem a ten script mě reagoval, ale když ten formulář vložím pomocí ajaxu/asynchroně, bez reloadu stránky) tak mě script, pro obsluhu checkboxu, na načtený formulář nereaguje. Kde dělám chybu?

Nahlásit jako SPAM
IP: 80.87.189.–
Řešení
Froggy0
Newbie
31. 10. 2011   #8
-
0
-
Nerozhodně
Vyřešeno Nejlepší odpověď

Řešením na 90% bude vyměnit event click zase za event live. 

Pokud cokoliv do DOM elementu připojujeme za chodu, nově přidané elementy nereagují na běžné události jako click atd. Je proto nutné použít metodu .bind(), která jQuery řekne, že může dojít k změně a že má stále hlídat stav komponent.

Nový kód by tedy vypadal takto:

 $(':checkbox').live('click',function () {
   $('form#vyber_jmen').submit();
 });

// tato úprava možná není nezbytná
 $('form#vyber_jmen').live('submit',function() {
   var detail = $(this);
   var id_adresy = detail.attr('name');
   alert(id_adresy);
   return false;
 });

Vše ostatní mimo tento kód by mělo zůstat tak jak bylo.

Nahlásit jako SPAM
IP: 85.70.239.–
Kall_Ell0
Návštěvník
31. 10. 2011   #9
-
0
-

Tak už jsem na to asi přišel. Zkusil jsem ten javascript vložit do HTML kódu, který se vrací spolu s detailem adresy a už mě na ten formulář reaguje. Jestli je to tak správně nevím, jestli je i jiný způsob, tak mě poraďte, budu jen rád. Zatím dík.

Nahlásit jako SPAM
IP: 80.87.189.–
Kall_Ell0
Návštěvník
31. 10. 2011   #10
-
-1
-
Mimo téma

#8 Froggy
Jo tak tohle už mě funguje, děkuji pane   

Nahlásit jako SPAM
IP: 80.87.189.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý