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.

$j('#termek').dataTable({
        "bJQueryUI": true,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "/admin/rendszer/datatables_server_side.php",
        "sPaginationType": "full_numbers",
        "oLanguage": {
            "sProcessing":   "Feldolgozás...",
            "sLengthMenu":   "_MENU_ találat oldalanként",
            "sZeroRecords":  "Nincs a keresésnek megfelelő találat",
            "sInfo":         "Találatok: _START_ - _END_ Összesen: _TOTAL_",
            "sInfoEmpty":    "Nulla találat",
            "sInfoFiltered": "(_MAX_ összes rekord közül szűrve)",
            "sInfoPostFix":  "",
            "sSearch":       "Keresés:",
            "sUrl":          "",
            "oPaginate": {
                "sFirst":    "Első",
                "sPrevious": "Előző",
                "sNext":     "Következő",
                "sLast":     "Utolsó"
            }
        }
    });
    function show_modosit_data(id){
        $j.ajax
        ({
            type: "post",
            url: "/admin/rendszer/modositterm.php?id="+id,
            success: function(data)
            {
                $j(".modosit-form").html(data);
                getModData(id);
            }
        });
        
    };
    function getModData(id){
        $j(function() {
            $j( ".modosit-form").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Módosítás": function() {
 
                    },
                    Cancel: function() {
                        $j( this ).dialog( "close" );
                    }
                }
            });

            $j( ".modosit" )
            .click(function() {
                $j( ".modosit-form" ).dialog( "open" );
            });
        });
    }
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:

(function ($) {
  $('#termek').dataTable({
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/admin/rendszer/datatables_server_side.php",
    "sPaginationType": "full_numbers",
    "oLanguage": {
      "sProcessing": "Feldolgozás...",
      "sLengthMenu": "_MENU_ találat oldalanként",
      "sZeroRecords": "Nincs a keresésnek megfelelő találat",
      "sInfo": "Találatok: _START_ - _END_ Összesen: _TOTAL_",
      "sInfoEmpty": "Nulla találat",
      "sInfoFiltered": "(_MAX_ összes rekord közül szűrve)",
      "sInfoPostFix": "",
      "sSearch": "Keresés:",
      "sUrl": "",
      "oPaginate": {
        "sFirst": "Első",
        "sPrevious": "Előző",
        "sNext": "Következő",
        "sLast": "Utolsó"
      }
    }
  });
  
  function show_modosit_data(id) {
    $.ajax({
      type: "post",
      url: "/admin/rendszer/modositterm.php?id=" + id,
      success: function(data) {
        var form = $(".modosit-form").html(data);
        getModData(id, form);
      }
    });
  
  };
  
  function getModData(id, form) {
    form.dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Módosítás": function() {

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });

    $(".modosit").click(function() {
      form.dialog("open");
    });
  }
}($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

/*
 * Output
 */
$output = array(
    "sEcho" => intval($_GET['sEcho']),
    "iTotalRecords" => $iTotal,
    "iTotalDisplayRecords" => $iFilteredTotal,
    "aaData" => array()
);

while ($aRow = mysql_fetch_array($rResult)) {
    $row = array();
    for ($i = 0; $i < count($aColumns); $i++) {
        if ($aColumns[$i] == "t_image") {
            $row[] = '<img class="thumb" src="/'.$aRow[$aColumns[$i]].'" style="width:45%"/>';
        } else if ($aColumns[$i] == 't_id') {
            /* Módosítás */
            $row[] = '<button class="modosit gomb" onclick="show_modosit_data('.$aRow[$aColumns[$i]].')">Módosítás</button>';
        } else if ($aColumns[$i] != ' ') {
            /* Minden egyéb */
            $row[] = $aRow[$aColumns[$i]];
        }
    }
    $row[] = '<button class="gomb torles">Törlés</button>';
    $output['aaData'][] = $row;
}

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.