我有添加小部件按钮,点击我要显示对话框中,我有选择框和保存按钮。但是在点击添加小部件按钮后,我的对话框没有出现。我有默认配置的按钮。当我点击添加小部件按钮,并检查firebug我的按钮事件是正常发射,但不知道我在哪里犯了一个小错误,因为我的对话框没有出现。我使用ajax调用来显示对话框。这里是没有ajax调用的jsfiddle和它的运行良好:演示但我必须通过小部件ID,我正在通过ajax和为什么对话框不出现,而使用ajax不知道。下面是我的php代码:
dashboard.php
$page['button'] = array(
1 => array( 'Save','pfeil2r','',"'#'",'','','savewidgetId'),
);
<table width="538" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="widget">
<br /><br/>
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Widget</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Add Widget</b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="widgets"> ';
while($row = mysql_fetch_array($sql_results)){
$widget=$row['ID'];
$widget_name=$row['name'];
$html .= '
<select name="addwidgets" id="addwidgets" >
<option value='.$widget.'>'.$widget_name.'</option>
</select>';
}
$html .= '</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
'.CreateButton($page['button']).'
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
dashboard.js
function getaddwidget()
{
$.ajax({
type: "POST",
url: "ajax/dashboard.php",
dataType : 'json',
cache: false,
data: {'aktion' : 'add-new-widget'},
success: function(data){
$('#widget').html(data.html);
},
error: function(data){
alert('error');
//$('#news').html(data.html);
}
});
}
function saveaddwidget()
{
var widgets = $('#widgets select[name="addwidgets"]').val();
$.ajax({
type: "POST",
url: "ajax/dashboard.php",
dataType : 'json',
cache: false,
data: {'aktion' : 'save-add-widget','widget':widgets},
success: function(data){
$('#widget').html(data.html);
},
error: function(data){
alert('error');
//$('#news').html(data.html);
}
});
}
$("#widget .butt-rahmen").click(function (e){
if($(this).attr('id') == 'addwidgetId')
{
ShowDialog(false);
e.preventDefault();
getaddwidget();
}
});
$("#widget .butt-rahmen").click(function (e){
if($(this).attr('id') == 'saveaddwidgetId')
{
HideDialog();
e.preventDefault();
saveaddwidget();
}
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
Web Forms和j-Query用户界面的对话框插件不能很好地一起工作。这是因为用于对话框的元素被从页面DOM中取出并放入一个新元素中。更有可能发生的是,您的控件从表单中删除,所以点击提交按钮不会做任何事情。