当我点击页面上的示例链接按钮时,会弹出一个简单的对话框。我想要做的是将 onclick jquery 函数从链接更改为我表中的一个按钮。这些按钮当前将 Web 浏览器定向到一个新页面,但我希望它们打开 dailog 框,其中包含相应的 View 文件。我正在使用 CakePHP 2.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 事件切换为打开对话框并让对话框显示相应的 View 页面。
提前致谢
最佳答案
下面是我是如何做到这一点的。我希望它能帮助其他人。
首先将空白 div 添加到带有 id 的索引页中。
<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')); ?>
此代码允许我在单击显示对话框中该项目的特定信息的 View 链接时打开一个对话框。
关于jquery - 带有 View 的对话框 - CakePHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10938704/