-1

I have an ASP.Net web application (with Master Page) and I've created a jQuery Dialog on one of the child pages. This dialog is used to display error messages to the operator if and when they happen in the code behind (e.g. saving error, etc.). So there isn't any one button or control that opens this dialog. For testing purposes only, I created an ASP button on the page to be sure I could open the dialog from the code behind. If the jQuery dialog is set with autoOpen:true, that ASP button will open the dialog every time. Obviously the dialog is open initially on page load, but if I close it, I can open it back up with that button. However, if I set autoOpen:false, that ASP button will not show/open the dialog. So I know for sure that my code behind for opening the dialog is correct since it works as stated previously. I've got the jQuery dialog code wrapped in a function that I reference in a "$(document).ready", but it still isn't working. Not sure what I am doing wrong. The div for the dialog is NOT contained in an UpdatePanel. I've seen many other posts about "similar" issues with showing the dialog when autoOpen:false, but some of them don't apply and others I've already tried or incorporated their suggestions.

    $(document).ready(function ()
    {
        ShowPopup();            
    });


    function ShowPopup(msgBoxTitle) {
        $(function () {
            $("#UserMessageBox").dialog(
                {
                    autoOpen: false,
                    resizable: false,
                    height: "auto",
                    width: 600,
                    modal: true,
                    title: msgBoxTitle,
                    dialogClass: 'UserMessagBox',
                    buttons:
                    {
                        "Close": function () {
                            $(this).dialog("close");
                        },
                        "Next Message": function () {
                            var disableCloseBtn = ShowNextMessage();
                            if (disableCloseBtn) {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                            }
                            else {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                            }
                        },
                    },
                    open: function () {
                        $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                    },
                });
        });
    };
Pungo120
  • 105
  • 1
  • 13

2 Answers2

0

When "autoOpen" is "false" the dialog will not open when you initialize it like you do on your function. you need to use the "open" method for this:

$("#UserMessageBox").dialog("open");

Documentation is here:

autoOpen

open

Update: exactly like the link you provide in the comment. and works. you can actually call the open method where ever you want after you first initilized the dialog. so after you run ShowPopup, you can run "open" where ever you want on your app.

Update: i did some more changes like to match what you wrote. So now you initilize the dialog and then call it on your script "ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);" just to update the data and title and open it. i put the first open on load just to show that when you close it you can run the ShowPopup any time (on my test it was with the button) like in your script.

$(document).ready(function ()
    {
        InitPopup();
        
        
        //just for test
        //ShowPopup('My Test Message');
        //put this code where ever you want. like in the button i createed
        //$("#UserMessageBox").dialog("open");
    });


    function InitPopup() {
    //i removed the function you created here
            $("#UserMessageBox").dialog(
                {
                    autoOpen: false,
                    resizable: false,
                    height: "auto",
                    width: 600,
                    modal: true,
                    title: '',
                    dialogClass: 'UserMessagBox',
                    buttons:
                    {
                        "Close": function () {
                            $(this).dialog("close");
                        },
                        "Next Message": function () {
                            var disableCloseBtn = ShowNextMessage();
                            if (disableCloseBtn) {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                            }
                            else {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                            }
                        },
                    },
                    open: function () {
                        $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                    },
                });
    };
    
    function ShowPopup(msgBoxTitle) {
      $("#UserMessageBox").html('');
      $("#UserMessageBox").append('<p>' + msgBoxTitle + '</p>');
      $("#UserMessageBox").dialog("option", "title", msgBoxTitle);
      $("#UserMessageBox").dialog("open");
    }
    $('#btn').on('click', function() { ShowPopup('New Message.'); })
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id = "UserMessageBox"></div>
<button id="btn">button</button>
Yair I
  • 1,133
  • 1
  • 6
  • 9
  • Where exactly do I put that line? I'm still trying to learn and understand this jQuery / Javascript stuff. I tried putting it at the end of the ShowPopup function but that did not work – Pungo120 May 20 '21 at 14:33
  • I actually tried it just like the first answer suggested in this post: https://stackoverflow.com/questions/16924329/how-do-i-call-up-a-jquery-ui-dialog-from-asp-net-code-behind-without-a-client-si. It did not work. – Pungo120 May 20 '21 at 14:41
  • I added a snippet for you that show that it is working – Yair I May 20 '21 at 14:50
  • I copied and pasted your code in to my aspx page and the jQuery dialog shows every time on page load. Just like it did when autoOpen is set to true. I don't want the dialog displayed automatically like that. I also verified that I am not inadvertently opening the dialog from code behind. – Pungo120 May 20 '21 at 14:58
  • Ok, now i understand what you want, i removed the function you created. in the "ShowPopup" i just initialized the dialog then i call and some where else to open it – Yair I May 20 '21 at 15:05
  • i edited it again and added a button to show the idea, you can see that on the button you only need to run the "open" method – Yair I May 20 '21 at 15:07
  • This still isn't working. Remember the original question; I need to be able to display this dialog box from many different post back event handlers, and those event handlers will be from different controls. So there will not be one control (like a button) on the page that opens this dialog box. So your solution works great if there's one control where we want to display the dialog from the client side, but it does not work when displaying from server side using something like "ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);" – Pungo120 May 20 '21 at 15:21
  • I hope that now i understand it – Yair I May 20 '21 at 15:53
  • I tried out your latest changes and it's still doing the same thing. If I leave your "ShowPopup('My Test Message');" uncommented, I can close the message (after the page loads) manually and then re-open from code behind without any issue. As soon as I comment out that "ShowPopup('My Test Message');", I can no longer show the dialog from my code behind. Exactly what it was doing originally. – Pungo120 May 20 '21 at 18:14
  • Ok. I finally figured it out. I modified your code very slightly to match what the OP did in the following post. I will post another answer here that shows the full solution. https://stackoverflow.com/questions/12704225/how-do-i-open-a-jquery-ui-dialog-from-my-c-sharp-code-behind?rq=1 – Pungo120 May 20 '21 at 18:28
  • as i wrote this line "ShowPopup('My Test Message');" was only for test, you can remove it. what is important that the InitPopup() will run first on the page then any call to ShowPopup("") will open the dialog. include your script from the server. i removed the line. – Yair I May 20 '21 at 19:56
  • The issue was that you were missing "$(function () { ... });" wrapper inside your "function ShowPopup(msgBoxTitle)". See my final solution below! Thank you very much for all your help. I really appreciate it. I learned a lot on this one. – Pungo120 May 20 '21 at 20:23
0

Using @Yair solution, I modified it slightly to include what the OP did in the this post

Here is the final working script code:

<script type="text/javascript">

    $(document).ready(function () {
        InitPopup();
        //just for test
        //ShowPopup('My Test Message');
    });


    function InitPopup() {
        
        $("#UserMessageBox").dialog(
            {
                autoOpen: false,
                resizable: false,
                height: "auto",
                width: 600,
                modal: true,
                title: '',
                dialogClass: 'UserMessagBox',
                buttons:
                {
                    "Close": function () {
                        $(this).dialog("close");
                    },
                    "Next Message": function () {
                        var disableCloseBtn = ShowNextMessage();
                        if (disableCloseBtn) {
                            $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                        }
                        else {
                            $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                        }
                    },
                },
                open: function () {
                    $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                },
            });
    };

    function ShowPopup(msgBoxTitle)
    {
        $(function ()
        {
            $("#UserMessageBox").dialog("option", "title", msgBoxTitle);
            $("#UserMessageBox").dialog("open");
        });
        return false;

    }
</script>

Here is the other markup (minus master page stuff):

<asp:Button ID="ShowPopupMsgTestBtn" runat="server" Text="Show Popup" OnClick="ShowPopupMsgTestBtn_Click" />

<asp:HiddenField ID="NextMessageIndexHF" runat="server" />
<asp:HiddenField ID="userMessagesHF" runat="server" ValidateRequestMode="Disabled"/>
<asp:HiddenField ID="UserDialogVisableHF" runat="server" />


<%--the following div makes up a dialog box used by the jQuery dialog--%>
<div id="UserMessageBox" title="User Message" style="display:none; ">
    <div style="text-align: left; margin-bottom: 5px; border-bottom: 2px solid black; padding: 5px 5px 5px 10px">
        <asp:Label ID="popupMsgHeaderLbl" runat="server" Text="Message" ForeColor="Black"></asp:Label>
    </div>
    <div style="text-align: left; padding: 10px; margin-bottom:40px">
        <asp:Label ID="popupMsgLbl" runat="server" Text="Here is a message" ValidateRequestMode="Disabled"></asp:Label>
    </div>
</div>

And here is the code behind for the ASP button control I was using only for testing purposed to show I could open the jQuery dialog box from code behind.

    protected void ShowPopupMsgTestBtn_Click(object sender, EventArgs e)
    {
        string message = "Test Message";//not used right now but we may use this later as a parameter to "ShowPopup2()" below
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }
Pungo120
  • 105
  • 1
  • 13