locked
PDF File Viewer Opens Up by itself RRS feed

  • Question

  • User158811806 posted

    The code below is acting up and I am not sure what to do to fix it.

    In my form, I have 3 buttons... 1.  Upload File     2. Disabled Button    3.  ViewPDF

    When site is launch (MainPage),  I clik on "Upload File" which is opens up a modal form. I can close this modal form and get back to MainPage.

    Now on MainPage I click on "ViewPDF, it opens up PDF in a new Tab and I can close this PDF tab normally. So far, all is OK.

    Now I click on "Upload File" which is opens up the modal form. When I close this modal form, it closes but opens up the PDF file that was opened previously.

    <div id="div1" class="st-box" runat="server">
    	<button id="Button2" class="button; disabled" runat="server" style="enabled=false; width:100%" >
    	<span id="spanButton1" runat="server" >Disabled Button</span></button>	
    	<p>This is my paragraph</p>
    	<center>
    		<button id="Button7" class="button" runat="server" style="vertical-align:middle; width:35%" 
                        onserverclick="ViewPDF"><span id="span1" runat="server" >Load PDF File</span></button>
    	</center>
     </div>
    
    protected void ViewPDF(object sender, EventArgs e)
        {
            string url = "PdfViewer.aspx?FN=MyPdf.pdf";
            string script = "<script type='text/javascript'>window.open('" + url + "')</script>";
            this.ClientScript.RegisterStartupScript(this.GetType(), "script", script);
        }
    
    Thursday, July 16, 2020 5:57 AM

Answers

  • User1535942433 posted

    Hi njehan01,

    Accroding to your description,as far as I think,your problem is window.location.reload().The  original page is reloaded.

    So,I suggest you could use hide the dialog replace window.location.reload().

    More details,you could refer to below codes:

        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
     
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
        <script>
            $(function () {
                $("#Button1").click(function (event) {
                    event.preventDefault();
                    opendialog2("http://localhost:50186/MyUploder.aspx");
                })
    
                function opendialog2(page) {
                    var $dialog = $('#somediv')
                        .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                        .dialog({
                            title: "Upload Files",
                            autoOpen: false,
                            dialogClass: 'dialog_fixed,ui-widget-header',
                            modal: true,
                            height: 600,
                            width: 1000,
                            minWidth: 400,
                            minHeight: 400,
                            draggable: true,
                            close: function (ev, ui) { $(this).hide(); },
                            buttons: {
                                "Ok": function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    $dialog.dialog('open');
                }
            })
        </script>
    
    
    
      <div>
                <asp:Button ID="Button1" runat="server" Text="Upload Files"
                    BackColor="#990000" Font-Bold="True" Font-Size="Large" ForeColor="Yellow" />
            </div>
    
            <div id="somediv"></div>
    
            <div class="container-fluid">
                <div class="first">
                    <div class="row">
    
    
                        <div class="col-lg-4">
                            <div id="div1" class="st-box" runat="server">
                                <button id="Button2" class="button; disabled" runat="server" style="enabled=false; vertical-align: middle; width: 100%">
                                    <span id="spanButton1" runat="server">Disabled Button</span>
                                </button>
                                <p>
                                    This is my paragraph
                                </p>
                                <center>
                                <button id="Button7" class="button" runat="server" style="vertical-align:middle; width:35%" 
                                    onserverclick="ViewPDF"><span id="span1" runat="server" >Load PDF File</span></button>
                            </center>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 17, 2020 7:00 AM

All replies

  • User1535942433 posted

    Hi njehan01,

    Accroding to your description and codes, I have create a test and works fine.I couldn't reproduce your problems.

    Could you post your full  codes about the "Upload File" button to us?It will help us to solve your problem.

    My codes:

     <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
     
    <div id="div1" class="st-box" runat="server">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Launch demo modal
                </button>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="Button2" class="button; disabled" runat="server" style="enabled=false; width: 100%">
                    <span id="spanButton1" runat="server">Disabled Button</span></button>
                <p>This is my paragraph</p>
                <center>
    		<button id="Button7" class="button" runat="server" style="vertical-align:middle; width:35%" 
                        onserverclick="ViewPDF"><span id="span1" runat="server" >Load PDF File</span></button>
    	</center>
            </div>

    Code-behind:

     protected void ViewPDF(object sender, EventArgs e)
            {
                string url = "SLA.aspx?FN=1.pdf";
                string script = "<script type='text/javascript'>window.open('" + url + "')</script>";
                this.ClientScript.RegisterStartupScript(this.GetType(), "script", script);
            }

    Best regards,

    Yijing Sun

    Thursday, July 16, 2020 7:30 AM
  • User158811806 posted

    Hi,

    Here is the code for button "Upload File":

        <div>
            <asp:Button ID="Button1" runat="server" Text="Upload Files" 
                BackColor="#990000" Font-Bold="True" Font-Size="Large" ForeColor="Yellow" />
            </div>
    
            <div id="somediv"></div>
    
            <div class="container-fluid">
                <div class="first">
                     <div class="row">
    
    
                    <div class="col-lg-4">
                        <div id="div1" class="st-box" runat="server">
                                <button id="Button2" class="button; disabled" runat="server" style="enabled=false; vertical-align:middle; 
                                    width:100%" >
                                    <span id="spanButton1" runat="server" >Disabled Button</span>
                                </button>
                            <p>
    				This is my paragraph
                            </p>
                            <center>
                                <button id="Button7" class="button" runat="server" style="vertical-align:middle; width:35%" 
                                    onserverclick="ViewPDF"><span id="span1" runat="server" >Load PDF File</span></button>
                            </center>
                      </div>
                    </div>
        <script>
                $(function () {
                    $("#Button1").click(function (event) {
                        event.preventDefault();
                        opendialog2("http://MyServer/MySite/LoadModal.aspx");
                    })
    
                    function opendialog2(page) {
                        var $dialog = $('#somediv')
                            .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                            .dialog({
                                title: "Upload Files",
                                autoOpen: false,
                                dialogClass: 'dialog_fixed,ui-widget-header',
                                modal: true,
                                height: 600,
                                width: 1000,
                                minWidth: 400,
                                minHeight: 400,
                                draggable: true,
                                close: function (ev, ui) { window.location.reload() },
                                buttons: {
                                    "Ok": function () {
                                        $(this).dialog("close");
                                    }
                                }
                            });
                        $dialog.dialog('open');
                    }
    
    Thursday, July 16, 2020 2:22 PM
  • User1535942433 posted

    Hi njehan01,

    Accroding to your description,as far as I think,your problem is window.location.reload().The  original page is reloaded.

    So,I suggest you could use hide the dialog replace window.location.reload().

    More details,you could refer to below codes:

        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
     
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
        <script>
            $(function () {
                $("#Button1").click(function (event) {
                    event.preventDefault();
                    opendialog2("http://localhost:50186/MyUploder.aspx");
                })
    
                function opendialog2(page) {
                    var $dialog = $('#somediv')
                        .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                        .dialog({
                            title: "Upload Files",
                            autoOpen: false,
                            dialogClass: 'dialog_fixed,ui-widget-header',
                            modal: true,
                            height: 600,
                            width: 1000,
                            minWidth: 400,
                            minHeight: 400,
                            draggable: true,
                            close: function (ev, ui) { $(this).hide(); },
                            buttons: {
                                "Ok": function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    $dialog.dialog('open');
                }
            })
        </script>
    
    
    
      <div>
                <asp:Button ID="Button1" runat="server" Text="Upload Files"
                    BackColor="#990000" Font-Bold="True" Font-Size="Large" ForeColor="Yellow" />
            </div>
    
            <div id="somediv"></div>
    
            <div class="container-fluid">
                <div class="first">
                    <div class="row">
    
    
                        <div class="col-lg-4">
                            <div id="div1" class="st-box" runat="server">
                                <button id="Button2" class="button; disabled" runat="server" style="enabled=false; vertical-align: middle; width: 100%">
                                    <span id="spanButton1" runat="server">Disabled Button</span>
                                </button>
                                <p>
                                    This is my paragraph
                                </p>
                                <center>
                                <button id="Button7" class="button" runat="server" style="vertical-align:middle; width:35%" 
                                    onserverclick="ViewPDF"><span id="span1" runat="server" >Load PDF File</span></button>
                            </center>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 17, 2020 7:00 AM
  • User158811806 posted

    it worked, thanks

    Friday, July 17, 2020 3:21 PM