3

ページのサンプルリンクボタンを押すとポップアップするシンプルなダイアログボックスがあります。私がやりたいのは、onclickjquery関数をリンクからテーブル内のボタンの1つに変更することです。ボタンは現在、Webブラウザーを新しいページに誘導しますが、対応するビューファイルが含まれているdailogボックスを開くようにします。私はCakePHP2.xを使用しています。私はhrefの使用を検討しましたが、その方法がわかりません。

これが、ボタンが配置されているindex.ctpファイルのコードです。

<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>

ボタンonclickイベントをダイアログボックスを開くように切り替えて、ダイアログボックスにそれぞれのビューページを表示させる方法についてサポートが必要です。

前もって感謝します

4

1 に答える 1

6

これが私がこれを達成することができた方法です。それが他の人に役立つことを願っています。

まず、IDを使用して空白のdivをインデックスページに追加します。

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

次に、jQueryを使用して、その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>

そして最後に、ボタン/リンクを作成します。

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

このコードを使用すると、ダイアログボックスにそのアイテムの特定の情報を表示するビューリンクをクリックしたときに、ダイアログボックスを開くことができました。

于 2012-06-11T18:21:50.150 に答える