can't instanciate jquery-ui dialog box on next pages

VaN

Hello,

In 1 of my column, in each row, I have a link which opens a jquery UI dialog box, with some information about the row. This works well on the first page, when datatables initializes, but on the next pages, nothing happens when I click on the link.

here is the JS code :
[code]
// Dialog
$.fx.speeds._default = 1000;
$(function() {
$('.dialog').dialog({
autoOpen: false,
beforeclose: function(){
$(this).dialog('option', 'position', [$(this).offset().left - 3, $(this).offset().top - 33]);

}

});

$('.dialog_trigger').click(function() {

var booking_id = (this.id).substr((this.id).indexOf(":")+1, (this.id).length);


$('#dialog_' + booking_id).dialog('open');
return false;
});

// Datatables
if( $('.datatable').size() > 0 ) {
$('.datatable').dataTable({
"aaSorting": [],
"bJQueryUI": true,
"iDisplayLength": 25,
"aLengthMenu": [25, 50, 100, 500],
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Afficher _MENU_ enregistrements",
"sSearch": "Recherche :",
"sZeroRecords": "Aucune donnée correspondante",
"sInfo": "Affichage de _START_ à _END_ sur _TOTAL_ enregistrements",
"sInfoEmpty": "0 résultats",
"sInfoFiltered": "( total de _MAX_ enregistrements)",
"oPaginate": {
"sFirst": "Début",
"sLast": "Fin",
"sNext": "Suivant",
"sPrevious": "Précédent",
}
}
});
}
[/code]

And my HTML table :
[code]



Réf.
Utilisateur
Evénement
Date
Places
Statut
Actions



<?php
foreach($results as $result) {
$event_datetime = datetime_sql2fr($result['event_datetime']);

$switch_status_url = "index.php?action=switch&item_id=".$result["booking_id"]."&current=".$result["booking_status"];
?>

<?php echo $result["booking_reference"]; ?>

infos
<?php echo $result["user_firstname"] . ' ' . $result['user_lastname']; ?>


<?php echo $result["user_firstname"] . ' ' . $result['user_lastname']; ?>

<?php echo $result["user_address"] . ', ' . $result["user_zipcode"] . ' ' .$result["user_city"]; ?>

<?php echo $result['user_mail']; ?>



<?php echo $result["event_title"]; ?>
<?php echo $event_datetime['date']; ?>
<?php echo $result["booking_seats"]; ?>
<?php echo translate_status_into_img($result["booking_status"], 'booking'); ?>

Modifier
Supprimer

<?php
}
?>


[/code]
Any idea why my dialog boxes don't instanciate on hidden pages ?

GregP

If all those links are actually in the DOM at the time the click handlers are assigned, I don't see why it wouldn't work. Where most people have a problem is with server-side processing and the element isn't actually in the DOM to have the handler applied.

Regardless of what "should" be, my advice would be to try using .delegate instead of .click. That way the listener is on an element that you know for sure is in the DOM, and it will apply to any situation that might arise (dynamically adding new rows, etc):

[note: I can't remember if the class "dataTable_wrapper" is added by the plugin itself. If not, you can substitute 'dataTable_wrapper' below with the class that's already in your HTML, simply "datatable"]

[code]
$('.dataTable_wrapper').delegate('.dialog_trigger', 'click', function() {

var booking_id = (this.id).substr((this.id).indexOf(":")+1, (this.id).length);

$('#dialog_' + booking_id).dialog('open');
return false;
});
[/code]

As a totally optional aside, I would also be tempted to use preventDefault() instead of return false to prevent default click behaviour:

[code]
$('.dataTable_wrapper').delegate('.dialog_trigger', 'click', function(event) {
event.preventDefault();
var booking_id = (this.id).substr((this.id).indexOf(":")+1, (this.id).length);

$('#dialog_' + booking_id).dialog('open');
});
[/code]