Используйте jQuery Dialog в тегах href, которые генерируются динамически

0

Таким образом, у меня есть динамически сгенерированная таблица, в последней строке таблицы есть href с уникальным идентификатором каждого человека в базе данных, и он под гиперссылкой, чтобы я мог собрать идентификатор человека, перенести его на другую страницу и посмотреть подробности лица, связанного с конкретным идентификатором. admin_edit.php указывает на admin_edit.php, это страница, где гиперссылка направляет уникальный идентификатор. Теперь в текущем состоянии после нажатия на гиперссылку он физически перейдет на страницу. Но я хочу, чтобы страница отображалась в диалоговом окне jQuery. Теперь я делал такие вещи раньше, но с кнопками. По какой-то причине я не могу реализовать это в виде гиперссылок.

Мой код HTML/PHP/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 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> '

Мой код 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) {
           dlg.load('admin/admin_edit.php');
           e.preventDefault();
           dlg.dialog('open');
        }); 
});

Как получить гиперссылки для открытия в admin_edit.php в диалоговом окне вместо перехода на физический URL?

  • 0
    Вы передаете свой <a> идентификатор и вызываете это .load ID .load при click на страницу php, передавая что-то вроде dlg.load('admin/admin_edit.php?id='+id)
  • 0
    Можете ли вы предоставить код решения?
Показать ещё 8 комментариев
Теги:

2 ответа

0

Поскольку вы используете угловой, используйте ng-click вместо использования jQuery onClick. Затем вы можете передать data.id функции в своей $scope.

<a href ng-click="showDialog(data.id);" id="modifyLink">{{data.id}}</a>

Затем в вашем угловом контроллере создайте функцию showDialog чтобы сделать то же самое, что делал ваш jQuery onClick.

$scope.showDialog = function(id) {
    var dlg=$('#modify').dialog({
        title: 'Modify',
        resizable: true,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width:600,
        height:500
    });
    dlg.load('admin/admin_edit.php?id='+id);
    dlg.dialog('open');
};
Поделиться
  • 0
    Дайте это попробовать, но он не открывает никаких диалоговых окон и даже не перенаправляет на admin_edit.php
  • 0
    Вы поместили метод $scope.showDialog в контроллер?
Показать ещё 2 комментария
0

Вот пример

$(function() {
    $("a").click(function(e) {
        // Prevent default
        e.preventDefault();
        
        // Grab the url and do what you want with it
        alert($(this).attr("href"));
        
        // Grab the custom attribute
        alert($(this).data("id"));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="//raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md" data-id="test" target="_blank">link</a>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню