Dialog Box with Views in it - CakePHP

cakephp, dialog, html, hyperlink, jquery

Solution

Here is how I was able to accomplish this. I hope it helps others.

First add blank div's into the index page with an id.

<div id="view_dialog"></div>

Then, using jQuery, create a function to create a dialog out of that div.

    <script>
$(function()
{
    var $dialog = $("#view_dialog").dialog(
        {
            autoOpen: false,
            title: 'View Local Clock',
            height: 200,
            width: 1200,
            resizable: true,
            modal: true,
            buttons:
            {
                "Ok": function()
                {
                    $(this).dialog("close");
                }
            }
        });
    $(".view_dialog").click(function()
    {
        $dialog.load($(this).attr('href'), function ()
                {
                    $dialog.dialog('open');
                });
        return false;
    });
});
</script>

And, lastly, create the button/link.

<?php echo $this->Html->link('View', array('action' => 'view', $LocalClock['LocalClock']['id']), array('class' => 'view_dialog')); ?>

This code allowed me to have a dialog box open when I clicked on the view link that shows the specific info for that item in the dialog box.

Problem

I have a simple dialog box that pops up when I hit a sample link button on my page. What I want to do is change the onclick jquery function from the link to one of my buttons in my table. The buttons currently direct the web browser to a new page, but I want them to open the dailog box with thier corresponding view file in it. I am using CakePHP 2.x. I looked into using href but Im not sure how to go about that. Here is the code for my index.ctp file where the buttons are located. ``` <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" /> <a href="#">link</a> <!-- this is to test if the dialog box works --> <div id="dialog"></div> <script> var p = '<p>test test test test test test</p>'; $('#viewButton').click(function() { // $(location).attr('href', 'view.ctp'); // not sure if this line of code is on the right track or not $(p).dialog( { width: 400, height: 400, modal: true, resizable: true, buttons:{ OK: function(){ $(this).dialog("close");}} }); }) </script> <p><marquee><u>Local Clocks</u></marquee></p> <table> <thead><tr> <th>Id</th> <th>Name</th> <th>Actions</th> </tr></thead> <tbody> <?php foreach($localClocks as $LocalClock) { ?> <tr> <!-- <td><?php //echo $LocalClock['LocalClock']['id']; ?></td> --> <td><?php echo $this->Html->link($LocalClock['LocalClock']['id'], array('controller'=>'localClocks', 'action'=>'view', $LocalClock['LocalClock']['id'])); ?></td> <td><?php echo $LocalClock['LocalClock']['name']; ?></td> <td><input type="button" class="viewButton" value="View" onclick="location.href='<?php echo $this->Html->url(array('controller' => 'localClocks', 'action' => 'view', $LocalClock['LocalClock']['id'])); ?>';"/> <input type="button" class="editButton" value="Edit" onclick="location.href='<?php echo $this->Html->url(array('controller' => 'localClocks', 'action' => 'edit', $LocalClock['LocalClock']['id'])); ?>';"/> </td> </tr> <?php } ?> </tbody> </table> ``` I need help with switching the button onclick events to opening the dialog box and have the dialog box display the respective View pages. Thanks in advance

Original source