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

Question

所以我有一个使用 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 的所有内容，我错过了什么？我如何做到这一点？

Answer 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');
        }); 
});