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>

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);

})

more