Блог

У меня есть кнопка добавления виджета, и при нажатии я хочу отобразить диалоговое окно, в котором у меня есть поле выбора и кнопка сохранения. Но после нажатия кнопки Добавить виджет мое диалоговое окно не появляется. У меня есть конфигурация по умолчанию для кнопки. И когда я нажимаю кнопку «Добавить виджет» и проверяю firebug, мое событие кнопки запускается правильно, но не знаю, где я допускаю небольшую ошибку, поскольку мое диалоговое окно не отображается.Я использовал вызов ajax для отображения диалогового окна.Вот jsfiddle без вызова ajax, и он работает нормально: demo Но я должен передать идентификатор виджета, который я получаю через 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);
   } 
  

Веб-формы и подключаемый модуль диалогового окна пользовательского интерфейса j-Query плохо работают вместе. Это потому, что элементы, используемые для диалогового окна, удаляются из DOM страницы и помещаются в новый элемент. Более чем вероятно, что здесь происходит то, что ваши элементы управления удаляются из формы, поэтому нажатие кнопки отправки ничего не сделает.