Odeslání formuláře ajaxem při změně checkboxu

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

Kall_Ell 0

Návštěvník

24. 10. 2011 #1

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.–

Nefaritus

~ Redaktor

Posthunter

Kultivátor příspěvků ve starém fóru – 3.66 % z celku

24. 10. 2011 #2

-2

Mimo téma

Zobrazit udělené karmy příspěvku od uživatelů

▲

Piskar10110010 -

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_Ell 0

Návštěvník

24. 10. 2011 #3

#2 Nefaritus
super dík

Nahlásit jako SPAM

IP: 80.87.189.–

Kall_Ell 0

Návštěvník

24. 10. 2011 #4

#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_Ell 0

Návštěvník

24. 10. 2011 #5

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

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_Ell 0

Návštěvník

31. 10. 2011 #7

Zajímavé

▲

Piskar10110010 +

#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.–

Froggy0

Newbie

31. 10. 2011 #8

Nerozhodně

▲

Piskar10110010 -

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_Ell 0

Návštěvník

31. 10. 2011 #9

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_Ell 0

Návštěvník

31. 10. 2011 #10

-1

Mimo téma

▲

Piskar10110010 -

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