CODEWITHSUNDEEP
c#javascriptasp.net
Mirza Sahaib
Mirza Sahaib

Reputation: 137

pop up does not go for post back in asp.net

I have button called sales and it have a JavaScript popup when I click on cancel it postback and the values in the form are inserted but when i click on ok it does not post back and the values in the form does not go in the database ( the JavaScript button is actually print call and when button is clicked it asks for print when print dialog box is open it does not post back and data is not inserted in the database)

here is the javascript code 

function confirmAction(printable) {
    var r = confirm("You want to Print Invoice?");
    if (r == true) {
        var printContents = document.getElementById(printable).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;

        __doPostBack();
    }
    else {
        __doPostBack();
    }
}

here is the code for button click

 <asp:Button ID="btnaddsale" runat="server" Text="Sale" OnClick="btnaddsale_Click"  OnClientClick="javascript:confirmAction('printable')"/>

Upvotes: 1

Views: 2343

Answers (1)

Dmitriy Khaykin
Dmitriy Khaykin

Reputation: 5258

Ok, couple of notes for you:

  1. You want a postback in either case.

  2. Your <asp:Button> will automatically do a postback either way, so you don't need to call __doPoskBack(); in this scenario.

  3. Major issue here is that, if you want a postback, it will happen immediately when the function exits, effectively canceling out the print dialog too soon. To avoid this, we will use a JavaScript trick that will check if the document has focus, and only when it does (when user exits print dialog in the browser) will we return and allow the postback to occur.

To fix the issue,

First: Make the function return true; when user cancels, and wait for focus and then return true if the user wants to print:

function confirmAction(printable) {
    var r = confirm("You want to Print Invoice?");
    if (r == true) {
        var printContents = document.getElementById(printable).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;

        // Check focus after user exits print dialog and then return true for the postback
        var document_focus = false;
        $(document).focus(function () { document_focus = true; });
        setInterval(function () { if (document_focus === true) { return true; } }, 500);
    }
    else {
        return true;
    }
}

Then, change the JavaScript code to use the return statement in the OnClientClick event:

<asp:Button ID="btnaddsale" runat="server" Text="Sale" 
    OnClick="btnaddsale_Click"  
    OnClientClick="javascript:return confirmAction('printable')"/>

Update based on comments and your changed requirement:

Here's a snippet to make the script pop up after the postback. So you will insert values to database, and then add the print script / confirm dialog on page load using Page.ClientScript.RegisterStartupScript()

Note I don't recommend to embed the script in your C# code, so I'd suggest to take your confirmAction() function and place it (if not already) into a separate "yourScripts.js" file and then just call the function name when the page is loaded using jQuery. Here's an example:

In your master page or page header: This file should contain the confirmAction() function

<script type="text/javascript src="path/to/yourScriptsFile.js">

Then, in code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    // Only display script on PostBack, not initial page load
    if (IsPostBack)
    {
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), 
            "confirmAction", 
            @"<script type=""Text/Javascript"">$(document).ready(function() { confirmAction('printable'); });</script>");
    }
}

Also note, since you will NOT want a postback now, the confirmAction function should no longer return true; or use the trick code I posted above, and will just return false:

function confirmAction(printable) {
    var r = confirm("You want to Print Invoice?");
    if (r == true) {
        var printContents = document.getElementById(printable).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }
    return false;
}

Upvotes: 1

Related Questions