如何使用对话框窗体jquery为javascript中的按钮列表

时间:2014-02-06 07:17:41

标签: javascript jquery-ui jquery-ui-dialog

我在javascript中有一个列表,我使用for循环以及每行的编辑按钮以表格格式显示它。当我单击编辑按钮时,我需要使用jquery对话框打开对话框弹出窗口。在我的代码中,当我点击编辑按钮时,我既没有收到任何错误也没有显示弹出窗口。可能是什么问题。下面是我的代码。

$.ajax({

            url : '/edsWeb/getEdsLogData',
            type : 'get',
            dataType : 'json',
            data :  {dc: dc, mdc:mdc, group:group},
            success : function(map) {
                console.log(map);

            var htmlStr = "<table border='1'>";
                htmlStr += "<tr> <td>User Name </td> <td> User Group </td> <td> Remarks </td>";
                htmlStr += " <td> Edit User remarks</td></tr>";
                for (var i = 0; i < map.length; i++) {
                     htmlStr += "<tr><td>";
                     htmlStr +=  map[i].userName;
                     htmlStr += "</td><td>";
                     htmlStr +=  map[i].userGroup;
                     htmlStr += "</td><td>";
                     htmlStr +=  map[i].userRemarks;
                     htmlStr += "</td><td>";
                     htmlStr += " <button id='editRemarkId"+i+"'> Edit </button>";
                     htmlStr += "</td></tr>";
                }
                htmlStr += "</table>"
                $out = $('#em_Ordering');
                $out.html(htmlStr);



                },
            error : function() {
                alert("error occured!!!");
            },

        });

对话框脚本代码:

$(function() {


$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Update Remarks": function() {

},
Cancel: function() {
$( this ).dialog( "close" );
}
},

});
$( "#editRemarkId" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});

1 个答案:

答案 0 :(得分:0)

我在代码中做了一些小改动,现在它正在工作。请看这个 http://jsfiddle.net/nZLeU/ 需要添加这4个文件才能获得jquery对话框

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

如果您需要任何内容​​,请查看此链接 Jquerydialogue