jQuery dialog not opening on button click - asp.net web page

Question

I'm new to jQuery and am struggling with opening a jQuery dialog when a user clicks the page submit button; any help would be greatly appreciated!

I've searched other posts, google, etc, but apparently still don't quite understand. I'm including the relevant parts of code below. Just fyi, I'm using Telerik controls, and the submit button is within a table. This is one page within a rather large asp.net/vb.net web app which does use a master page.

Ultimately I'd like to provide the user a Yes, No, Cancel dialog, but at this point I'm just trying to get a dialog to simply open.

<script type="text/javascript">
function confirmSubmit2(sender, args) {
    var rblNextStep = document.getElementById("<%= cbNextStep.ClientID %>");
    var radioButtons = rblNextStep.getElementsByTagName('input');
    var selectedButton = radioButtons.length - 1;

    if (radioButtons[selectedButton].checked) {
        var hasItems = document.getElementById('<% =hfHasItems.ClientId %>').value

        if (parseInt(hasItems) != 0)
            jQuery("#dialog").dialog('open');
    }
}

    $(function () {
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete all items": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });

<td style="font-family: Times New Roman; font-size: medium; width: 33%; text-align: left;">
    <div id="dialog">
     <asp:Panel ID="btnSubmitWrapper" runat="server">
        <telerik:RadButton ID="btnSelSubmit" runat="server" Skin="Sunset" Text="Submit"
            ValidationGroup="Review" Width="98%" OnClientClicked="confirmSubmit2"
            SingleClick="true" SingleClickText="Submitting..." DisabledButtonCssClass="btnDisable">
        </telerik:RadButton>
    </asp:Panel>
    </div>
</td>

Thanks!

You're already using jQuery. Why bother with document.getElementById? — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Feb 4, 2013 at 19:20
You had, but you missed adding it as a code block - { } in the editor. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Feb 4, 2013 at 19:23
Hi :) The 'confirmsumbit2' javascript function already existed as I was originally just alerting the user that Items existed. However, I'd like to give the users a chance to do yes, no, cancel, and so am trying to utilize jQuery's dialog box since javascript's confirm box only has the ok and cancel options. So I took out the line of code in the confirmsubmit2 function that displayed the alert and replaced it with the jquery dialog open call. — AmyW
– AmyW, Commented Feb 4, 2013 at 19:26

Chris Hammond · Accepted Answer · 2013-02-04 20:00:17Z

1

It looks like you aren't really calling the dialog plugin correctly.

To get the Dialog to open, why not just use jquery and do something like this to wire up the click event.

$("#<%=btnSelSubmit.ClientID %>").click(function () {
    var dlg = $("#Dialog").dialog({
        title: "Something here",
        autoOpen: true,
        width: 600,
        modal: true
        }
    });

answered Feb 4, 2013 at 20:00

Chris Hammond

8,9581 gold badge29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AmyW Over a year ago

Chris, thank you for your response. :) When a user submits the page, I want to present a popup asking the user a question. Unless they choose to cancel, I then need to do some server-side processing. So I was wanting to use a client-side onclick event to present the popup, and use the server-side click event to perform the logic for submission. If I understand correctly, your suggestion would have the dialog open on the button click event, correct?

Chris Hammond Over a year ago

That is the code I provided, but you could just as easily change that to a client side only event (using another object rather than a btn that has a server side event). Getting server side events from within the dialog in jquery can be rather tricky due to the way the the dialogs are loaded in the page, they are actually moved to the end of the page, which tends to play tricks with the DOM

AmyW Over a year ago

I was able to display a dialog box with the code below. I now get 'TypeError: a[b] is not a function' message when I cancel out of the dialog. I'm still playing around with the code and doing some searches. :) I think I understand what you're saying as far as being tricky; I may end up going a different route, but plan to work through this a little more as I'm learning a lot from the experience. ...sorry about the formatting, apparently I'm also still learning how to post on this site, lol.

AmyW Over a year ago

jQuery(function () { jQuery(".confirm").dialog({ resizable: true, height: 300, width: 300, modal: true, buttons: { "Delete all items": function () { jQuery(this).dialog("close"); }, "Leave all items": function () { jQuery(this).dialog("close"); }, Cancel: function () { jQuery(this).dialog("close"); } } }); }); jQuery(".confirm").dialog({ autoOpen: false });

Chris Hammond Over a year ago

You can update your original post (edit) with new code, the comments don't really take code well

Collectives™ on Stack Overflow

jQuery dialog not opening on button click - asp.net web page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related