jQuery Datatable Modal-添加信息

Question

I'm trying to do the following. When you click on any one line, open a modal with the information of line and a ComboBox with information from another table and insert it into a new table in database. My question is, can do this via a modal? How?

Thank you. Follow my source.

  <script type="text/javascript">
    $(document).ready(function() {
        var oTable = $('#example').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sPaginationType": "full_numbers",
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                "aButtons": [{
                    "sExtends": "copy",
                    "sButtonText": "Copy"
                }, {
                    "sExtends": "print",
                    "sButtonText": "Print"
                }, {
                    "sExtends": "collection",
                    "sButtonText": "Save",
                    "aButtons": ["csv", "pdf"]
                }]
            },
            "autoWidth": true,
            "sAjaxSource": "Load_Arm_tec.php",
            "aoColumns": [{
                "sClass": "readonly",
                "sTitle": "ID",
                "aTargets": [0]
            }, {
                "sClass": "readonly",
                "sTitle": "arm",
                "aTargets": [1]
            }, {
                "sClass": "readonly",
                "sTitle": "City",
                "aTargets": [2]
            }, {
                "sClass": "readonly",
                "sTitle": "reg",
                "aTargets": [3]
            }, {
                "sClass": "readonly",
                "sTitle": "QNTD",
                "aTargets": [4]
            }, {
                "sClass": "readonly",
                "sTitle": "Size",
                "aTargets": [5]
            }, {
                "sClass": "readonly",
                "sTitle": "DT_start",
                "aTargets": [6]
            }, {
                "sClass": "readonly",
                "sTitle": "DT_end",
                "aTargets": [7],
                "type": "date"
            }, {
                "sClass": "readonly",
                "sTitle": "Days",
                "aTargets": [8]
            }],
            "fnDrawCallback": function() {
                $('td.readonly').on('click', function(e) {

                    var id = oTable.fnGetData($(this).parents('tr')[0])[0];

                    //MODAL HERE....  HOW?


                });
            }
        });


    });
    </script>

And my HTML source..

<div id="dynamic">

    <table cellpadding="0" cellspacing="0" border="0" class="display"
        id="example">
        <thead>
            <tr>
                <th>ID</th>
                <th>ARM</th>
                <th>CITY</th>
                <th>REG</th>
                <th>QNTD</th>
                <th>SIZE</th>
                <th>DT_START</th>
                <th>DT_END</th>
                <th>DAYS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5" class="dataTables_empty">Loading..</td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>ID</th>
            <th>ARM</th>
            <th>CITY</th>
            <th>REG</th>
            <th>QNTD</th>
            <th>SIZE</th>
            <th>DT_START</th>
            <th>DT_END</th>
            <th>DAYS</th>
        </tr>
        </tfoot>
    </table>
</div>

UPDATE: fnDrawCallback Whith Modal....

Okay, The question now is: How do I add a ComboBox with informations from my database??

"fnDrawCallback" : function() {
    $('td.readonly').on('click', function (e) {

        var id_armario = oTable.fnGetData($(this).parents('tr')[0])[0];
        var armario = oTable.fnGetData($(this).parents('tr')[0])[1];
        var cidade = oTable.fnGetData($(this).parents('tr')[0])[2];

      dialog = $( "#users-contain" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          open: function( event, ui ) {
              $( "#users tbody" ).append( "<tr>" +
                  "<td>" + id + "</td>" +
                  "<td>" + arm + "</td>" +
                  "<td>" + city + "</td>" +
                     "</tr>" );
          },
          close: function( event, ui ) {
              $("#users tbody").empty();
           },
          buttons: {
            "OK": function(){
                dialog.dialog( "close" );
            },
            Cancel: function() {
              dialog.dialog( "close" );
            }
         }
    });

And the HTML for Modal...

<div id="users-contain">
    <h1>Existing Users:</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>Id</th>
                <th>Arm</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

What you are trying to do can be done by cloning the model inside an each statement that loop trough the data and append it to a certain section also I recommend adding class so that it can be easier to find using jQuery find() function

$.each(datAarray,function (index, value) { ComboBox = $(modal).clone()

ComboBox.find('.rowName').append(value);

})

Answer 2

Posting for others who have questions. Problem solved.

JavaScrit...

<script type="text/javascript">
$(document).ready(function() {
    var oTable = $('#example').dataTable(
    {
        "bProcessing" : true,
        "bServerSide" : true,
        "sPaginationType" : "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
                "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                    {
                        "sExtends": "copy",
                        "sButtonText": "Copy"
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "Print"
                    },
               {
                   "sExtends":    "collection",
                   "sButtonText": "Save",
                   "aButtons":    [ "csv", "pdf" ]
               }
            ]
        },
        "autoWidth": true,
        "sAjaxSource" : "Load_Arm.php",
        "aoColumns" : [
                {
                    "sClass" : "readonly",
                    "sTitle": "ID",
                    "aTargets": [0]
                },     
                {
                    "sClass" : "readonly",
                    "sTitle": "ARM",
                    "aTargets": [1]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "CITY",
                    "aTargets": [2]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "REG",
                    "aTargets": [3]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "QNTD",
                    "aTargets": [4]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "SIZE",
                    "aTargets": [5]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_START",
                    "aTargets": [6]
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DT_END",
                    "aTargets": [7],
                    "type": "date"
                },
                {
                    "sClass" : "readonly",
                    "sTitle": "DAYS",
                    "aTargets": [8]
                }
        ],
        "fnDrawCallback" : function() {
            $('td.readonly').on('click', function (e) {

                var id = oTable.fnGetData($(this).parents('tr')[0])[0];
                var arm = oTable.fnGetData($(this).parents('tr')[0])[1];
                var city = oTable.fnGetData($(this).parents('tr')[0])[2];                                        

              dialog = $( "#users-contain" ).dialog({
                  autoOpen: false,
                  height: 500,
                  width: 900,
                  title: "Info Arm",
                  modal: true,
                  open: function( event, ui ) {
                      $( "#users tbody" ).append( "<tr>" +
                          "<td>" + id + "</td>" +
                          "<td>" + arm + "</td>" +
                          "<td>" + city + "</td>" +
                             "</tr>" );

                      $.ajax({
                            url:'Tec_combo.php',
                            type:'POST',
                            data:'clust=' + city,
                            dataType: 'json',
                            success: function( json ) {
                            $.each(json, function(i, value) {  
                             $('<option></option>', {text:value}).attr('value', value).appendTo('#names');
                                });
                            }
                          });

                  },
                  close: function( event, ui ) {
                      $("#users tbody").empty();
                      $("#names").empty();
                   },
                  buttons: {
                    "OK": function(){
                        dialog.dialog( "close" );
                    },
                    Cancel: function() {
                      dialog.dialog( "close" );
                    }
                  }
                });

              dialog.dialog("open");
            } );
        }   
    });                                     
);
</script>

HTML code...

<div id="users-contain">
<table id="users">
    <thead>
        <tr>
            <th>Id</th>
            <th>Arm</th>
            <th>City</th>
            <select id="names"></select>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</div>

Thanks... Questions, I am available...