Tablesorter in dynamic JQuery UI doesn't work

Question

It's my first post on this site and I swear I have searched for answers to my question. Maybe I've missed something in topics I have read. (Sorry for my english, I am FRENCH.)

I create a dialog when a user perform a clic, then I fill this dialog with an ajax result (a table with specific content). Here is my code:

Includes

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="../tablesorter/jquery.tablesorter.js"></script> 

My js function

function click_like(e, idProjet) {
    var evt = e ? e:window.event;
    if (evt.stopPropagation)    
        evt.stopPropagation();
    if (evt.cancelBubble!=null) 
        evt.cancelBubble = true;

    if(document.getElementById("dialog") != null) {
        $('#dialog').remove();
    }

    $('#projets').append("<div id='dialog' style='display: none;'></div>");

    $( "#dialog" ).dialog(
    {
        title: 'Projet '+idProjet,
        autoOpen: false,        
        height: 400,
        width: 400,

        close: function(event, ui) {
            $(this).dialog('destroy').remove();
            $('#dialog').remove();          
        }
    }); 

    $( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet).dialog('open');
}

Php file

<?php
    //php things
?>

<p> Les étudiants intéressés sont: </p>

<table id="tous_les_etudiants" class="tablesorter">
    <thead>
        <tr>
            <td> Nom </td>
            <td> Prénom </td>
            <td> Spécialité </td>
            <td> Email </td>
        </tr>
    </thead>
    <tbody>
<?php
    foreach($etudiants AS $etudiant) {
        echo '<tr>'; 
        echo '<td>'.$etudiant->get_NOM().'</td>';
        echo '<td>'.$etudiant->get_PRENOM().'</td>';
        echo '<td>'.$etudiant->get_SPECIALITE().'</td>';
        echo '<td>'.$etudiant->get_EMAIL().'</td>';
        echo '</tr>';
    }
?>
    </tbody>
</table>

<script>
    $("#tous_les_etudiants").tablesorter();
</script>

The problem is that I got no errors, the table is not sortable, however the style works. On others table (wich are not generated on demand) it works fine. I have seen this thread but it has no answers Why jquery... and here but I am pretty sure I make the tablesorter call after the creation of the div. I tried to make the call in the php file called, also at the end of my js function. Maybe you can point out why I am stupid, because I'm sure this is stupid. Thx for reading and sorry if the answer already exists.

Answer 1

Tablesorter will need to be initialized after the dialog window becomes visible (demo):

HTML

<button id="opener">Open Dialog</button>
<div id="dialog" title="Basic dialog">
    <table class="tablesorter">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

Script

$(function () {

    $("#opener").click(function () {
        $("#dialog").dialog("open");
    });

    $("#dialog").dialog({
        autoOpen: false,
        open: function (event, ui) {
            $('.ui-dialog table').tablesorter({
                theme: 'blue'
            });
        }
    });

});

---

Update: If you plan to load information into a dialog, this method (dialog().load().dialog('open');) is incorrect because the asynchronous nature of ajax is not being taken into account. Instead, use the load() function's callback method:

$( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet, function(){
    $( "#dialog" ).dialog('open');
});