jQuery: Error using jQuery DataTables into a modal window

Question

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.

Beetroot-Beetroot · Accepted Answer · 2012-10-29 01:41:12Z

2

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

edited Oct 29, 2012 at 1:41

answered Oct 29, 2012 at 1:36

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SoldierCorp Over a year ago

I'm so sorry for don't mark your answer as correct. Thanks and works fine :)

Collectives™ on Stack Overflow

jQuery: Error using jQuery DataTables into a modal window

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related