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

时间:2014-07-01 07:00:47

标签: javascript php ajax dialog

我有添加窗口小部件按钮,然后单击我要显示对话框,其中我有选择框和保存按钮。但是在点击Add widget按钮后,我的对话框没有出现。我默认配置为按钮。当我点击添加小部件按钮并检查firebug我的按钮事件正在正常启动但不知道我在哪里犯了一个小错误,因为我的对话框没有出现。我使用ajax调用来显示对话框。这里是没有ajax调用的jsfiddle并且运行良好:demo但是我必须传递我通过Ajax获取的小部件ID以及为什么在使用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);
   } 

1 个答案:

答案 0 :(得分:0)

Web窗体和j-Query用户界面的对话框插件无法很好地协同工作。这是因为用于对话框的元素从页面DOM中取出并放入新元素中。这里发生的更多可能是您的控件正在从表单中删除,因此点击提交按钮将无法执行任何操作。