Показать внешнюю ссылку на модальной панели - PullRequest
Новая
       16

Показать внешнюю ссылку на модальной панели

0 голосов
/ 25 сентября 2019

Я искал эту проблему, и хотя некоторые решения не работают, ни одно из них не подходит для моей проблемы.

Я создаю ссылки динамически, используя вызовы ajax.При нажатии на любую из ссылок (в стиле кнопки) мне нужно показать http:\\<IP-address> в модале.

Когда создаются ссылки, и я использую «проверять» и копировать то, что отображается, вставлять его в верхней части страницы и нажимать на него, он показывает содержимое в модальном всплывающем окне, так что я знаю сценарий, который отображаетсодержание в модальных работах.Но когда я нажимаю на фактические, динамически созданные ссылки, открывается всплывающее окно без содержимого.

Вот разбавленная версия того, что у меня есть, и того, что я пробовал:

Модальное всплывающее окно: 

<div class="modal fade" id="printerInfoModal" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    <asp:Label ID="lblModalTitle" runat="server" ClientIDMode="Static" Text=""></asp:Label></h4>
            </div>
            <div class="modal-body">
                <iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
            </div>
            <div class="modal-footer">
                <button id="btnCloseModal" class="btn btn-info" data-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>        

// Get a list of printers and for each get its status, printer property includes IP address
$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    url: "Services/ps.asmx/GetPrinterMapping",
    cache: false,
    data: "",
    success: function (response) {
        if (response !== "") {
            try {
                jResponse = JSON.parse(response.d);
                    $.each(jResponse, function (index, value) {
                        var printer = value;

                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            url: "Services/ps.asmx/GetPrinterStatus",
                            cache: false,
                            data: JSON.stringify({ PrinterHostnameIPAddress: printer.IPAddress }),
                            success: function (result) {
                                if (result !== "") {
                                    var printerIP = 'http://' + printer.IPAddress;
                                    //var redir = 'openInfo("' + printerIP + '")';

                                    if (status == "Ready") {
                                        $('<div/>', { class: 'col-sm-2' })
                                            .append($('<a/>', { id: 'printer' + printer.IDN, class: 'form-control btn btn-success btn-block extLink', style: 'margin-bottom:5px', href:printerIP, text: status.replace(/\"/g, '') }))
                                            .appendTo($('#printerStatusTable'));
                                        // Not sure if below two lines work!
                                        //It seems I cnnot add data-target: 'xxx' in attributes list part of "append"
                                        $('#printer' + printer.IDN).attr('data-target', '#printerInfoModal');
                                        $('#printer' + printer.IDN).attr('data-toggle', 'modal');

                            },
                            error: function (result) {
                            },
                            failure: function (result) {
                            }
                        });
                    })
$('#printerStatusTable').find('a').attr('data-target', '#printerInfoModal');
$('#printerStatusTable').find('a').attr('data-toggle', 'modal');

// Another think I tried
$('#printerStatusTable').find('a').attr('onclick', 'blah(' + $(this).attr('href') + ');');

JS: 

// this function is hit if I copy/paste the html of the the link/button and click it; otherwise it is not called
$('.extLink').click(function (e) {debugger
    e.preventDefault();
    var frametarget = $(this).attr('href');
    //clearIframe();
    targetmodal = '#printerInfoModal'; 
    $('#modeliframe').attr("src", frametarget );   
});

function blah(){debugger
    var frametarget = $(this).attr('href');
    targetmodal = '#printerInfoModal'; 
    clearIframe();
    $('#modeliframe').attr("src", frametarget );   
}

function blah(frametarget){debugger
    //var frametarget = $(this).attr('href');
    targetmodal = '#printerInfoModal'; 
    clearIframe();
    $('#modeliframe').attr("src", frametarget );   
}

function clearIframe() {
    var iframe = $('#modeliframe');
    var html = "";

    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
}

Это работает, когда я добавляю ссылку вручную;что я на самом деле вижу, когда нажимаю на ссылку / кнопку, созданную ajax, и выбираю «осмотреть»: 

<a class="form-control btn btn-block extLink btn-success" id="printer10" style="margin-bottom: 5px;" href="http://1.2.3.4" data-toggle="modal" data-target="#printerInfoModal">Ready</a>

Может кто-нибудь увидеть, что я делаю неправильно или чего мне не хватает?

1 Ответ

2 голосов
/ 25 сентября 2019

Итак, если вы добавляете кнопку динамически после загрузки страницы, вам нужно настроить таргетинг на документ с помощью обработчика кликов следующим образом: 

  $(document).on('click', '.extLink', function() {
    // Do what you want when the button is clicked.
  });

Это потому, что когда ваша страница загружает всеваши обработчики Jquery подключены к DOM.Если элемент не существует, то вы в принципе ни к чему его не привязываете.

...