在链接点击上弹出pdf未显示在另一个模态弹出窗口

时间:2017-04-24 07:35:08

标签: javascript jquery ajax bootstrap-modal

我有一个功能,当点击一个按钮时,在模态弹出窗口上显示pdf。 我想在另一个模态弹出窗口上集成它。 但它不起作用。

我的代码在按钮单击

上弹出模式时显示pdf
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        var fileName = "AFarm.pdf";
        $("#btnShow").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: fileName,
                width: 540,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
                    var object = "<object data=\"http://vho.org/aaargh/fran/livres4/AFarm.pdf\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
                    object += "If you are unable to view file, you can download from <a href = \"http://vho.org/aaargh/fran/livres4/AFarm.pdf\">here</a>";
                    object += " or download <a target = \"_blank\" href = \"AFarm.pdf/\">Adobe PDF Reader</a> to view the file.";
                    object += "</object>";
                    object = object.replace(/{FileName}/g, "Files/" + fileName);
                    $("#dialog").html(object);
                }
            });
        });
    });
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>

以下功能我要整合这个

$('#manageApplicantModel').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var applicaitonid = button.data('id');
            var modal = $(this);

            $.get(getURL('ManageApplication/getApplicationDetailByid/' + applicaitonid), function (data) {
                var json = new Object();
                json = JSON.parse(data);
                modal.find('#name').text(json.name);
                modal.find('#email').text(json.email);
                modal.find('#phonenum').text(json.phone);
                modal.find('#propertyname').text(json.property_name);
                modal.find('#applieddate').text(json.date_applied);
                modal.find('#address').text(json.property_address);
                modal.find('#divrequirementchecks .reqcheckslbl').empty();
                $.each(json.check, function (index, value) {
                    //list-group-item
                    modal.find('#divrequirementchecks .reqcheckslbl').append(
                        '<li class="">'
                            + value
                            + '</li>');
                });

                modal.find('#divattacheddoc .attacheddoclst').empty();
                $.each(json.documents, function (index, value) {
                    modal.find('#divattacheddoc .attacheddoclst').append(
                        '<li class="list-group-item">'
                            + value.document_name
                            + '<a href="' + value.link + '" download class="pull-right">Download</a>'
                            +'<br>'
                             + '<a id="#mypdf" href="#" class="pull-right">View</a>'
                            + '</li>');
                });
            });

        }
    );

请参阅此功能中的视图链接。点击此链接。我想用pdf显示模态弹出窗口。谁知道请帮帮我

1 个答案:

答案 0 :(得分:0)

我写了一篇关于此的博客文章...有几个人使用这种技术让它工作...让我知道它是否有助于你的案例..

http://www.anujvarma.com/rendering-pdf-in-a-modal-popup-asp-net-mvc/