ugrás a tartalomhoz

datatables ajax + modal soronként

csman007 · 2011. Május. 3. (K), 21.52
Sziasztok!
Adott egy datatables ahol ajaxosan kapom meg az adatokat.
minden sorban van egy módosít gomb merre ha kattint a user akkor egy jqueryui modal ugrik elő, aminek az adatait szintén ajaxos hívással töltöm fel.
Az a problémám, hogy az először amikor a módosítra kattintok akkor 2x kell kattintani hogy a modal előugorjon. Az oka pedig a elvileg hogy függvény van benne.
  1. $j('#termek').dataTable({  
  2.         "bJQueryUI": true,  
  3.         "bProcessing": true,  
  4.         "bServerSide": true,  
  5.         "sAjaxSource": "/admin/rendszer/datatables_server_side.php",  
  6.         "sPaginationType": "full_numbers",  
  7.         "oLanguage": {  
  8.             "sProcessing":   "Feldolgozás...",  
  9.             "sLengthMenu":   "_MENU_ találat oldalanként",  
  10.             "sZeroRecords":  "Nincs a keresésnek megfelelő találat",  
  11.             "sInfo":         "Találatok: _START_ - _END_ Összesen: _TOTAL_",  
  12.             "sInfoEmpty":    "Nulla találat",  
  13.             "sInfoFiltered": "(_MAX_ összes rekord közül szűrve)",  
  14.             "sInfoPostFix":  "",  
  15.             "sSearch":       "Keresés:",  
  16.             "sUrl":          "",  
  17.             "oPaginate": {  
  18.                 "sFirst":    "Első",  
  19.                 "sPrevious": "Előző",  
  20.                 "sNext":     "Következő",  
  21.                 "sLast":     "Utolsó"  
  22.             }  
  23.         }  
  24.     });  
  25.     function show_modosit_data(id){  
  26.         $j.ajax  
  27.         ({  
  28.             type: "post",  
  29.             url: "/admin/rendszer/modositterm.php?id="+id,  
  30.             success: function(data)  
  31.             {  
  32.                 $j(".modosit-form").html(data);  
  33.                 getModData(id);  
  34.             }  
  35.         });  
  36.           
  37.     };  
  38.     function getModData(id){  
  39.         $j(function() {  
  40.             $j( ".modosit-form").dialog({  
  41.                 autoOpen: false,  
  42.                 height: 300,  
  43.                 width: 350,  
  44.                 modal: true,  
  45.                 buttons: {  
  46.                     "Módosítás": function() {  
  47.    
  48.                     },  
  49.                     Cancel: function() {  
  50.                         $j( this ).dialog( "close" );  
  51.                     }  
  52.                 }  
  53.             });  
  54.   
  55.             $j( ".modosit" )  
  56.             .click(function() {  
  57.                 $j( ".modosit-form" ).dialog( "open" );  
  58.             });  
  59.         });  
  60.     }  
a $j az a jQuery.noConflict().
Köszönöm előre is a segítséget.
‹ Honlap design Listaelem választáskor új, dinamikus lista adódik az űrlaphoz ›
 ■
1

Micsoda?

Poetro · 2011. Május. 3. (K), 22.08
A show_modosit_data-t mi hívja meg? mert az nem derült ki. És miért kérdezed le a form-ot minden esetben? Egy enyhén gyorsabbá tett változat:
  1. (function ($) {  
  2.   $('#termek').dataTable({  
  3.     "bJQueryUI": true,  
  4.     "bProcessing": true,  
  5.     "bServerSide": true,  
  6.     "sAjaxSource": "/admin/rendszer/datatables_server_side.php",  
  7.     "sPaginationType": "full_numbers",  
  8.     "oLanguage": {  
  9.       "sProcessing": "Feldolgozás...",  
  10.       "sLengthMenu": "_MENU_ találat oldalanként",  
  11.       "sZeroRecords": "Nincs a keresésnek megfelelő találat",  
  12.       "sInfo": "Találatok: _START_ - _END_ Összesen: _TOTAL_",  
  13.       "sInfoEmpty": "Nulla találat",  
  14.       "sInfoFiltered": "(_MAX_ összes rekord közül szűrve)",  
  15.       "sInfoPostFix": "",  
  16.       "sSearch": "Keresés:",  
  17.       "sUrl": "",  
  18.       "oPaginate": {  
  19.         "sFirst": "Első",  
  20.         "sPrevious": "Előző",  
  21.         "sNext": "Következő",  
  22.         "sLast": "Utolsó"  
  23.       }  
  24.     }  
  25.   });  
  26.     
  27.   function show_modosit_data(id) {  
  28.     $.ajax({  
  29.       type: "post",  
  30.       url: "/admin/rendszer/modositterm.php?id=" + id,  
  31.       success: function(data) {  
  32.         var form = $(".modosit-form").html(data);  
  33.         getModData(id, form);  
  34.       }  
  35.     });  
  36.     
  37.   };  
  38.     
  39.   function getModData(id, form) {  
  40.     form.dialog({  
  41.       autoOpen: false,  
  42.       height: 300,  
  43.       width: 350,  
  44.       modal: true,  
  45.       buttons: {  
  46.         "Módosítás": function() {  
  47.   
  48.         },  
  49.         Cancel: function() {  
  50.           $(this).dialog("close");  
  51.         }  
  52.       }  
  53.     });  
  54.   
  55.     $(".modosit").click(function() {  
  56.       form.dialog("open");  
  57.     });  
  58.   }  
  59. }($j));  
2

modal

csman007 · 2011. Május. 3. (K), 22.25
igen bocsi az lemaradt
a datatablesnak phpjában hozom létre majd JSON-vel átadom
  1. /* 
  2.  * Output 
  3.  */  
  4. $output = array(  
  5.     "sEcho" => intval($_GET['sEcho']),  
  6.     "iTotalRecords" => $iTotal,  
  7.     "iTotalDisplayRecords" => $iFilteredTotal,  
  8.     "aaData" => array()  
  9. );  
  10.   
  11. while ($aRow = mysql_fetch_array($rResult)) {  
  12.     $row = array();  
  13.     for ($i = 0; $i < count($aColumns); $i++) {  
  14.         if ($aColumns[$i] == "t_image") {  
  15.             $row[] = '<img class="thumb" src="/'.$aRow[$aColumns[$i]].'" style="width:45%"/>';  
  16.         } else if ($aColumns[$i] == 't_id') {  
  17.             /* Módosítás */  
  18.             $row[] = '<button class="modosit gomb" onclick="show_modosit_data('.$aRow[$aColumns[$i]].')">Módosítás</button>';  
  19.         } else if ($aColumns[$i] != ' ') {  
  20.             /* Minden egyéb */  
  21.             $row[] = $aRow[$aColumns[$i]];  
  22.         }  
  23.     }  
  24.     $row[] = '<button class="gomb torles">Törlés</button>';  
  25.     $output['aaData'][] = $row;  
  26. }  
  27.   
  28. echo json_encode($output);  
amint látszik az egy onclickre.
A gond végülis az hogy egyszer lefut az ajaxos hívás, visszakapja a modositerm.phpbol az adatot, és nem történik semmi, majd a következő kattintáskor ismét ajax hívás és betölti a modalt.