Question

I have a page where I load a dialog on click of a button:

function editShowSchedule(emId){
    $(".ui-dialog-content").dialog("close");            
    var url = "inc/ajax/schedule-editShowSchedule.php?emId="+emId+"&stationId="+<?php echo $stationId;?>;   
    var container = '<div id="somediv" title="Modifier l\'horaire d\'une émission"></div>';
    $(container).load(url).dialog({
       //modal:false,
       height: 600,
       width: 600,
       resizable: false,
       buttons: { "Annuler": function() { $(this).dialog("close"); },
               "Sauvegarder": function(){ saveShowSchedule();} }
    });
}

Then, in that dialog, I trigger .change() on my drop down box to load the infos relative to the selected element.

<?php 
$emId = $_POST['emId'];
$stationId = $_POST['stationId'];
?>  

[…]

$(document).ready(function() {  
$("#selectShow").unbind('change');
$("#selectShow").change(function(){
    $("#showTimelines").html('En chargement');
    var emId = $("#selectShow").val();
    var stationId = <?php echo $stationId;?>;
    var params = {emId:emId,
                  stationId:stationId}
    $.post('inc/ajax/schedule-getAllTimelinesByEmId.php',params, function(data){ 
            alert('getTimelineByEmId');
            $("#showTimelines").html(data);             
            $(".button, button, input:submit, input:button").button();  
            enableAddRecurrenceInPeriod();
            enableRecurrenceCloseBox();
        },"html"  
    ); 
})<?php if($emId > 0){?>.change()<?php }?>;
});

The first time around, it works fine.

But if I close the dialog box and just click to open it again, then the alert actually works, but I see nothing appearing in the $(“#showTimelines”).html (not even the loading message:$(“#showTimelines”).html(‘En chargement’);), even though I do see it in firefox and I made the post only after the document is loaded…

Anybody knows why and/or how to fix this?

Answer 1

Ah, I got it. Thanks Felipe for leading me on the right track:
I changed my jquery to this:

function editShowSchedule(emId){
$(".ui-dialog-content").dialog("destroy");  
$("#somediv").remove();     
var url = "inc/ajax/schedule-editShowSchedule.php?emId="+emId+"&stationId="+<?php echo $stationId;?>;   
var container = '<div id="somediv" title="Modifier l\'horaire d\'une émission"></div>';
$(container).load(url).dialog({
    //modal:false,
    height: 600,
    width: 600,
    resizable: false,
    close: function(event, ui){
        $(this).dialog("destroy");
        $("#somediv").remove();
    },
    buttons: { "Annuler": function() { $(this).dialog("destroy"); 
                                       $("#somediv").remove(); },
               "Sauvegarder": function(){ saveShowSchedule();} }
});

}

Basically, the close was effectively only hiding the dialog. Using destroy now erases it, but it left the container in place, although hidden, (thus updating that one instead of the new dialog created with my ajax), so I removed it completely by calling $(“#somediv”).remove();

Now, everything works fine!