带有AJAX选项卡的jQuery UI对话框问题

我遇到了使用jQuery工具选项卡（AJAX）和jQuery UI对话框（手动为对话框执行AJAX加载）的问题。问题在于对话框被加载并专门为当前选项卡设置（通过AJAX加载选项卡请求以及选项卡的内容）。 jQuery UI在创建对话框时，将容器从原始位置移除，添加标记并将其附加到主体。带有AJAX选项卡的jQuery UI对话框问题

问题在于对话框现在超出了选项卡的内容，并且在随后的选项卡更改中不会被替换/删除。如果用户单击另一个选项卡或后退按钮（这些选项卡具有使用URL哈希的AJAX历史记录，因此该页面实际上没有重新加载），但由于jQuery UI对话框将其移出标签内容。它现在只出现在身体的底部。如果用户在物理上点击了关闭按钮，我写了一个'hack around'，但是如果按下后退按钮或者另一个标签通过AJAX加载并且jQuery UI实际上将其移回到身体（不知道如何/为什么这样做！）。有什么建议么？如果我对此不清楚，请让我知道。谢谢！（这是我现在得到，成功地消除它，当用户物理上关闭对话框）

$('.openMyDialog').click(function() { 

        // Create div for dialog 
     $('body').append('<div id="modalContainer"></div>'); 

     // Load dialog with AJAX 
     $('#modalContainer').load('loadMyAjaxContent.html').dialog({ 
      modal: true, 
      width: 850, 
      open: function(type,data) { 
       // Remove from bottom of body and put it back into the tab's content 
       $(this).parent().appendTo('.panes div:first'); 
      }, 
      close: function() { 
       $(this).dialog('destroy'); 
       $('#modalContainer').remove(); 
      } 
     }); 


    });

来源

2010-01-22 Ryan

假设有一束jQuery的Ajax选项卡，每个选项卡Ajax的负载一个主要页面的设置页面进入页面内容面板/ div。

page.html中

----/home\---/users\--- 
|<div id="page-content">| 
| page content gets | 
| loaded in here  | 
|</div>     |

在那得到由标签ajax'd页面，把这个顶部：

即。在users.html

$(document).ready(function() 
{ 
    $('.delete-user-form').each(function(){ 
     if($('.delete-user-form').length > 1) 
      $(this).detach(); 
    }); 

    $('#delete-user').dialog({ 
     autoOpen: false, 
     height: 200, 
     width: 300, 
     modal: true, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      }, 
      'Save': function() { 
       $('#delete-user-form').submit(); 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    $('#delete-user-button').click(function(){ 
     $('#delete-user').dialog('open'); 
    }); 
});

而这在users.html准备的形式，将变成对话框：

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;"> 
    <form action="/admin/users/delete" id="delete-user-form" method="POST"> 
     <input type="hidden" id="user-id" name="userID" /> 
     <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;"> 
      <tr> 
       <td> 
        Do you really want to delete: 
       </td> 
       <td> 
        <input type="text" id="user-name" /> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div>

现在作为OP介绍，每次标签之间的用户切换和回到这个页面，模式对话框div（id =“delete-user”）被复制。

JavaScript的第一个位遍历所有重复的对话框，并从DOM中删除除最后一个以外的所有对象，所以您最终只会根据需要选择一个。

在页面上放置一个按钮/链接/ etc，并按照最高位指定的ID打开对话框。

即。 <input type="button" id="delete-user-button" value="Delete User" />

以这种方式打开对话框可防止OP在省略时发现的重复：autoOpen：false，从对话框设置选项中直接调用对话框。

来源

2010-10-06 02:45:17

带有AJAX选项卡的jQuery UI对话框问题

回答

相关问题