CODEWITHSUNDEEP
jquerydatatablemodal-dialog
SoldierCorp
SoldierCorp

Reputation: 7700

jQuery: Error using jQuery DataTables into a modal window

I've a button in a form and when is pressed, display a modal window that contains a jQuery DataTable and I can search, navigate or paginate and show 10 or 20 entries but when I press any TR to get information of each TD in that TR and put this information in a 3 elements in the form and close modal window... is OK, but if I press the button again to open the modal window with datatables, search functions, show more entries or paginate no longer work

Create a DataTable

$('#tableResults').dataTable({
    "sPaginationType" : "full_numbers"
});

Execute modal window

$('#button').click(function() {
        $("#divModal").modal({onClose: function (dialog) {
              dialog.container.fadeOut('slow', function () {
                    $.modal.close();
              });
        }});
    });

Event click TR

$('#tableResults tr:gt(0)').live('click', function() {  
        name = $(this).closest('tr').find('td:eq(0)').text();
        lastname = $(this).closest('tr').find('td:eq(1)').text();
        email = $(this).closest('tr').find('td:eq(2)').text();

        $('#name').text("Name: "+name);
        $('#lastname').text("Last Name: "+lastname);
        $('#email').text("Email: "+email);
        $.modal.close();
    });

I hope I explained and thanks in advance.

Upvotes: 0

Views: 1991

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

The Simplemodal documentation says:

By default, SimpleModal will clone the data element that you pass in. When the dialog is closed, the cloned, unchanged, data element will be re-inserted into DOM in its original place. If the persist option is true, SimpleModal will "re-insert" the original element, with changes intact. If you use an onClose callback, you’ll need to call $.modal.close(); (see the onClose in the Options & Callback section above).

and

persist [Boolean:false] Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state.

So the trick appears to be to set persist: true in the Simplemodal options.

$('#button').click(function() {
    $("#divModal").modal({
        persist: true,
        onClose: function (dialog) {
            dialog.container.fadeOut('slow', function () {
                $.modal.close();
            });
        }
    });
});

Upvotes: 2

Related Questions