jquery ui动态对话框

jquery ui dynamic dialog

本文关键字：对话框 动态 ui jquery      更新时间：2023-09-26

我对js和jquery相当陌生。我基本上希望能够从onClick事件或附加到<a>的东西中更改表和id变量，这样我以后就可以用php修改变量了。这只是概念的证明，自从我做了修改后似乎就不起作用了。有没有一种方法可以将变量从a传递到函数？

总体目标：我想要一个内联onclick，它将把id和表名从loadMe传递给函数并显示table_render.php？id＝someid&table=对话框中的sometable。

  <script>
    $(function loadMe(table, id) {
        $( "#dialog-view" ).dialog({
            autoOpen: false,
            height: 600,
            width: 700,
            modal: true,
            buttons: {
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        $( "#create-view" ).click(function() {
            $( "#dialog-view" ).load("table_render.php?id=" + id + "&table=" + table + "").dialog("open");
        });
    });
    </script>
    <a href="" id="create-view" onClick="loadMe(testimonials,1)">Some text</a>
    <div id="dialog-view" title="">
    </div>

您要连接两次事件，一次通过onclick，一次是通过jQuery。你需要选择一个。

如果您选择jQuery方式（推荐），您将获得jQuery参数（它只是一个arg，event）。但是，jQuery会将this设置为触发事件的元素（在本例中，是您的A标记）。您可以使用它从A标记中获取数据。

例如，如果你想要点击的A的ID，你可以在你的处理程序中这样做：

var clickedId = $(this).attr('id');

如果你想为每个A标记存储一些任意的信息（例如"tableName"），你可以使用HTML5数据属性（最好），也可以只制作你自己的属性（这会起作用，但"形式不好"）。例如：

<a tableName='testimonials'>
var clickedFoo = $(this).attr('tableName');

或者（稍微好一点）：

<a data-tableName='5'>
var clickedTableName = $(this).attr('data-tableName');
// Also, I believe this would work:
var clickedTableName = $(this).data('tableName');

*编辑*

只是想进一步澄清一下，基本的总体想法是：

1） 你通过PHP 在页面上写下你的A标签

1A）当您写出它们时，您将特定于它们的任何数据以一个或多个属性（例如id='foo' data-bar='baz'）的形式放在A标记上。

2） 你还写了一些Javascript代码，上面写着"嘿，每当点击A标签时，运行这个函数"

3） 在连接到A标记的点击事件的函数中，您使用this变量（指向A标记本身）来获得需要的数据（"变量"）

3A）例如，您可以使用JQuery"attr"方法：$(this).attr('id')

4） 利润！（或者至少用刚刚得到的数据做一些有用的事情）

所以我开始工作了。。。这是溶液

function createViewer(id, table) {
        var id;
        var table;
        $("#dialog-view").dialog({
            autoOpen: false,
            width:650,
            minHeight:400,
            show:{effect: "fade", duration: 500},
            hide:"clip",
            resizable: false,
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog-view").load("table_render.php?id=" + id + "&table=" + table + "").dialog("open");
    };

和内联代码

<a href="#" onMouseDown="createViewer(<?php echo $row_testimonials['id'];?>,'testimonials');">View Quote</a>

您可能希望将$(document).ready()放在初始化对话框和绑定onclick事件的函数周围。然后打开ajax请求回调中的对话框。

这样，我想您就可以使用loadFunction来消除onclick属性。（疲劳）

类似于：

HTML:

<a href="#" id="trigger" data-my-id="123" data-my-table="myTable">
  trigger
</a>
<div id="dialog">
 Dialog Contents....
</div>

JS:

$(document).ready(function() {

    $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 700,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
    $("#trigger").click(function() {
        var id = parseInt( $(this).attr('data-my-id');
        var table = $(this).attr('data-my-table');
        $("#dialog").load("table_render.php?id=" + id + "&table=" + table + "", 
          function(){
            $("#dialog").dialog("open");
          });
    });
});​

应该做到这一点。

相关文章：