JQuery UI диалоговое окно - открыть внешний динамический файл php в диалоге - PullRequest
Новая
       38

JQuery UI диалоговое окно - открыть внешний динамический файл php в диалоге

4 голосов
/ 10 марта 2011

Я искал простые решения сегодня несколько часов, но не нашел.

У меня есть таблица (#example) с данными в ней и ссылкой на страницу (allinfo.php), где отображаются все данные конкретной строки (не все они показаны в таблице). Поэтому я хотел бы сделать это проще для пользователя. Я хотел бы, чтобы они могли щелкнуть ссылку и отобразить диалоговое окно с содержимым из allinfo.php.

мой скрипт в: 

$(document).ready(function() {


        $('#example a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                $dialog
                    .load($link.attr('href') + ' #content')
                    .dialog({
                        title: $link.attr('title'),
                        width: 500,
                        height: 300
                    });

                $link.click(function() {
                    $dialog.dialog('open');

                    return false;
                });

                return false;
            });
        });


    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
                "bJQueryUI": true,
        "sAjaxSource": "url.php",
        "fnServerData": fnDataTablesPipeline,
                "sPaginationType": "full_numbers",             


    } );




} );

Итак, проблема в том, что таблица генерируется в javascript, и я не могу добавить туда опцию диалогового окна. Если я напишу где-нибудь еще на сайте: всю информацию и нажму, все будет работать.

Единственное решение, которое я вижу, это использование команды "onclick", но я не знаю, как ее использовать?

поэтому в таблице должна быть вся информация

Спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 10 марта 2011

Я бы использовал комбинацию .live и $ (this) .attr ('href') и $ .ajax, вы также можете использовать функцию объекта события (event)

0 голосов
/ 10 марта 2011

Нечто подобное должно работать, но это немного сложно, так как я не могу ничего проверить: 

$(document).ready(function() {

    // As soon as the page loads, attach a div for showing content:
    $('body').append('<div id="dialogPopup"></div>');

    // Setup the dialog:
    $('#dialogPopup').dialog({
                        width: 500,
                        height: 300,
                        autoOpen: false});

    // Listen to ALL anchors in #example:
    $('#example a').live('click', function(e) {
        // Don't let the browser follow the link:
        e.preventDefault();
        // Store a link to the link clicked:
        var obj = $(this);
        // Store a link to the dialog:
        var dia = $('#dialogPopup');
        // Empty the content of the popup:
        dia.html('');
        // Load the contents into the dialog:
        dia.load(obj.attr('href') + ' #content')
           // Set the title:
           .dialog({title: obj.attr('title')})
           // Open the dialog:
           .dialog('open');
    });


    $('#example').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "sAjaxSource": "url.php",
        "fnServerData": fnDataTablesPipeline,
        "sPaginationType": "full_numbers",             
    });
});
...