在javascript,php,ajax中单击按钮后不出现对话框


Dialog box not appearing after button click in javascript,php,ajax

我有添加小部件按钮,点击我要显示对话框中,我有选择框和保存按钮。但是在点击添加小部件按钮后,我的对话框没有出现。我有默认配置的按钮。当我点击添加小部件按钮,并检查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中取出并放入一个新元素中。更有可能发生的是,您的控件从表单中删除,所以点击提交按钮不会做任何事情。