用ajax实现带标题，图片和自定义按钮的删除确认对话框

这种对话框一般用于页面列表的每条记录后面的功能按钮。

form表单如下：

<div class="table_box">
<table class="list tableBasic" width="99%" border="0" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<th width="">短信类别</th>
<th width="20%">操作</th>
</tr>
<c:forEach items="${smsTypes}" var="sms">
<tr>
<td ><span class="typename">${sms.type_name}</span>(${sms.smscount}</td>
//隐藏参数
<td style="display:none">${sms.id}</td>
<td id="tdstyle" align="center" style="text-indent: 0em;" >
<a href="${cxt}/smstype/edit?id=${sms.id}">重命名</a> 
<a href="${cxt}/smstype/delete?id=${sms.id}"  class="dialog-link-del">删
除</a> 
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div id="dialog" title=''></div>

注意这里的删除按钮的class是”dialog-link-del”，另外，table外有一个div：

<div id="dialog" title=''></div>

js的代码如下：

$(function () {
var msgCateId;
$(".dialog-link-del").click(function(event){
var messageCategory = $(this).parent().parent().children('td').children('span').eq(0).text();
msgCateId = $(this).parent().parent().children('td').eq(1).text();
$( "#dialog" ).empty();
$( "#dialog" ).dialog( "open" );
event.preventDefault();
$(".ui-dialog-title").text("").prepend('<span><img src=/images/logo_stitle.png
width=25 height=25>删除"'+messageCategory+'"</span>');
$("#dialog").append($("<p/>").text('"'+messageCategory+'"类短信将被全部删除,确定要删
除"'+messageCategory+'"？'));
});
// jquery ui 调用dialog()   #dialog为弹出窗口ID
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "确定",
click: function() {
$( this ).dialog( "close" );
htmlobj=$.ajax({
type: "post",
url: '${cxt}/smstype/delete',
data:'id='+msgCateId,
dataType: "text",
success: function (data) {
var json = eval("("+data+")");
if('success'==json.result){
alert("删除成功！");
window.location.href='${cxt}/smstype/getSMSAllType?
company_id='+json.companyId;
}else{
alert(json.result);
return false;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
},
{
text: "取消",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});

注意：表单当条数据的取得方法：

messageCategory = $(this).parent().parent().children('td').children('span').eq(0).text();
msgCateId = $(this).parent().parent().children('td').eq(1).text();

最后不要忘记引入相应的js和css：

<link rel="StyleSheet"type="text/css" href="${cxt}/css/jquery-ui-1.10.4.css"/>
<script src="${cxt}/js/jquery.js" type="text/javascript" ></script>
<script src="${cxt}/js/jquery-ui-1.10.4.js" type="text/javascript" ></script>