使用 jQuery Dialog 根据表格动态显示信息

Posted 2023-03-05

【中文标题】使用 jQuery Dialog 根据表格动态显示信息

【英文标题】：Use jQuery Dialog to dynamically show information based on a table

【发布时间】：2015-12-19 13:54:06

【问题描述】：

所以我有一个使用 AngularJS 的即时搜索表。在表的最右侧，我有一个超链接格式的 ID 列，它将用户带到他们选择的链接上的特定页面，以便用户可以修改与唯一主键关联的数据。

现在我想使用 jQuery 在对话框中显示页面。我以前做过这个，但由于某种原因，我想应用它的格式不起作用。

我的 PHP/AngularJS/HTML 代码：

    <div>
       <table>
           <tbody>                 
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>data.first_name data.last_name</td>
                <td>data.team_name</td>
                <td>data.role</td>
                <td>data.phone</td>
                <td>data.to_date</td>
                <td>data.email</td>
                <td><a id="modifyLink" href="admin/admin_edit.php?id=data.id">data.id</a></td>   
            </tr>
            </tbody>
        </table>        
    </div>

    <div class="col-md-12" ng-show="filteredItems == 0">
        <div class="col-md-12">
            <h4>No data found</h4>
        </div>
    </div>
    <div class="col-md-12" ng-show="filteredItems > 0">    
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
    </div>
</div>
<div id="modify" class="divider"></div> 

我的 AngularJS 代码：

$(document).ready(function()  
         var dlg=$('#modify').dialog(
           title: 'Modify',
           resizable: true,
           autoOpen:false,
           modal: true,
           hide: 'fade',
           width:600,
           height:500
         );


         $('#modifyLink').click(function(e) 
           dlg.load('admin/admin_edit.php');
           e.preventDefault();
           dlg.dialog('open');
        ); 
); 

再一次，我希望这个页面弹出一个对话框，并在同一个对话框中显示 admin_edit.php 的所有内容，我错过了什么？我如何做到这一点？

【问题讨论】：

那么到底出了什么问题呢？ XHR 运行成功了吗？对话框是空的还是充满了乱码？控制台中有 JS 错误吗？

@НЛО 什么都没有发生，当我点击动态链接时，它会将我发送到静态页面，并且根本没有使用 jQuery Dialog 脚本

【参考方案1】：

几件事：

不要为链接使用 id（因为你会有很多链接，而且它们都共享相同的 id 是不健康的），而是使用 class。

此外，e.preventDefault(); 必须是单击处理程序上的第一个语句，因为它会阻止导航到不同的页面（您希望留在当前页面并显示对话框）。

html/AngularJS

<div>
       <table>
           <tbody>                 
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>data.first_name data.last_name</td>
                <td>data.team_name</td>
                <td>data.role</td>
                <td>data.phone</td>
                <td>data.to_date</td>
                <td>data.email</td>
                <td><a class="modifyLink" href="admin/admin_edit.php?id=data.id">data.id</a></td>   
            </tr>
            </tbody>
        </table>        
    </div>

    <div class="col-md-12" ng-show="filteredItems == 0">
        <div class="col-md-12">
            <h4>No data found</h4>
        </div>
    </div>
    <div class="col-md-12" ng-show="filteredItems > 0">    
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
    </div>
</div>
<div id="modify" class="divider"></div> 

jQuery 代码

$(document).ready(function()  
         var dlg=$('#modify').dialog(
           title: 'Modify',
           resizable: true,
           autoOpen:false,
           modal: true,
           hide: 'fade',
           width:600,
           height:500
         );


         $('.modifyLink').click(function(e) 
           e.preventDefault();
           dlg.load(this.href).dialog('open');
        ); 
); 

【讨论】：

感谢您的尝试，但它似乎不起作用。页面admin_edit.php需要在对话框中加载。