有几个盒子(超过100个)将动态创建
现在每次单击该框时,我应该在一个弹出框中滑动而不刷新页面。我下载了jquery UI(http://jqueryui.com/demos/dialog/#option-position)并在我的项目中使用。现在我想在每次点击框中传递公司ID以从数据库中获取详细信息。如果我点击窗口5,公司ID 5应该在对话框中传递获取公司的所有其他详细信息。
jquery代码:
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "slide",
hide: "explode"
});
$("div[id *= 'window']").live('click', function (e) {
$("#dialog").dialog("open");
return false;
});
});
</script>
Asp.net代码
<div id="dialog" title="Basic dialog">
<div><%#Eval("comp_name")%> </div>
<div><%#Eval("comp_city")%> </div>
</div>
答案 0 :(得分:0)
$.fx.speeds._default = 1000;
$(document).ready(function () {
$("div[id*='window']").live('click', function (e) {
$.ajax({
url: 'YourUrl', type: 'Get', dataType: 'json',
data: { id: $(this).attr('id').replace(/window/g, '') },
success: function (data) {
$('<div></div>').appendTo('body').html('<div>' + data.comp_name + '</div><div>' + data.comp_city + '</div>').dialog({
modal: true, title: 'Test message', zIndex: 10000, autoOpen: true,
width: 460, height: 300, modal: true, resizable: false, closeOnEscape: false,
show: "slide", hide: "explode",
buttons: {
Ok: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
}
});
});
});
你使用asp.net mvc 3?
$("div[id*='window']").live('click', function (e) {
alert('Id : ' + $(this).attr('id') + ' ' + 'Replaced Id ' + $(this).attr('id').replace(/window/g, ''));
});
<div id="window1">
Click Me1 !
</div>
<br />
<div id="window2">
Click Me2 !
</div>
<br />
<div id="Div1">
Click Me !. I am not window id.
</div>
<br />
<div id="window3">
Click Me3 !
</div>
来自现场演示,请看此链接:http://jsfiddle.net/nanoquantumtech/865Su/