Multiple JQuery UI Dialog's on a single page

Question

On a single page, I wish to use JQuery UI's dialog box to display a bunch of different dialog boxes so that users can confirm they've read a particular on screen message as well as display some other content.

I have a server side PHP foreach() that generates the messages and places each one inside of a <div class="mod_message_short"> with a number of child divs for layout/formatting including a <div class="mod_message_modal"> which contains the content for the dialog box pertaining to that particular message.

Is there a way of declaring autoOpen:false on all of the .mod_message_modal elements without having to declare them individually (with an unique id instead of a class that encapsulates them all)?

The following is what I've got so far:

<script type="text/javascript">
$(function(){
    $('.mod_message_modal').dialog({
        autoOpen:false
    });

    $('.mod_message_readmore').click(function(e){
        $(".mod_message_short[data-messageid='" + $(this).parents('.mod_message_short').data('messageid') + "']").find('.mod_message_modal').dialog("open");
        e.preventDefault();
    });
});
</script>

Unfortunately this doesn't work because .dialog() removes all the elements from the DOM so when I go to try and find them to open them individually on a mouse click event, I can't.

I expect the solution to this would be declaring these individually, but I think this will generate a bunch of javascript that may be unnecessary.

It seems like a similar problem to the one posted here with no useful answer for my particular issue.

Any ideas? Thanks!

Answer 1

After a bit of hacking around, I've managed to come up with a solution which is more elegant than writing up some javascript inside PHP's foreach loop.

This still iterates over each of the div's I'd like to use as a dialog by their class, but sets them as a dialog based on their id attribute instead. This allows them to be called individually, again based on their id. The use of the HTML5 data-* attribute is the key to my solution.

HTML and PHP in my view class:

<?php foreach($this->messages as $message): ?>
    <div class="mod_message_short" data-messageid="<?php echo $message->id;?>">
            <!-- Display shortext here -->
        <div class="mod_message_modal" data-title="<?php echo $message->title; ?>" id="fullMessage_<?php echo $message->id; ?>">
            <!-- Display longer message here -->
        </div>
    </div>
<?php endforeach; ?>

Javascript:

<script type="text/javascript">
    var messages_viewDialogOptions = {
        autoOpen: false,
        modal: true,
        width: 600,
        buttons: [{
            text:"Mark as Read",
            click:function(){
                //Ajax Callback here
                $(this).dialog('close');
            }
        },{
            text:"Close",
            click:function(){$(this).dialog('close');}
        }]
    }
    $(function(){
        $('.mod_message_modal').each(function(){
            $(this).dialog(messages_viewDialogOptions);
        });
        $('.mod_message_readmore').click(function(e){
            var currentDialog = $('#fullMessage_'+$(this).parents('.mod_message_short').data('messageid'));
            currentDialog.dialog('option','title',currentDialog.data('title'));
            currentDialog.dialog('open');
            e.preventDefault();
        });
    });
</script>