jquery ui动态对话框

Question

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

Answer 1

您将两次挂起事件，一次是通过onclick，一次是通过jQuery。你得选一个。

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

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

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

如果你想存储一些任意的信息(例如，"tableName")对于每个A标签，您可以使用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)当你写出它们时，你把任何特定于它们的数据放在A标签上，以一个或多个属性的形式(例如，id='foo' data-bar='baz')。

2)你还可以写出一些Javascript代码，上面写着“嘿，每当一个A标签被点击，就运行这个函数”

3)在连接到A标记的单击事件的函数中，使用this变量(该变量指向A标记本身)来获取所需的数据(变量

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

4)利润！(或者至少对你刚刚获得的数据做一些有用的事情)

Answer 2

所以我把它修好了。以下是解决方案

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>

Answer 3

您可能希望将$(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");
          });
    });

});​

应该能行得通。