Show dialog on check changed : The Official Microsoft ASP.NET Forums

Reply

olson2334

Member

87 Points

58 Posts

Show dialog on check changed

Nov 29, 2012 03:58 PM|LINK

Hello,

I have an existing grid that I want a dialog to be displayed when a checkbox is checked. I first need to check to see if I need to display a dialog. If I need to display the box I need to display some custom dialog content/title/button text.

If the check says that I need to display the dialog on cancel I want it to uncheck the checkbox. If they click OK I need to maintain the checkbox.

I am trying to do this via jquery but having some issues. I am new to jquery so don’t have much familiarity with it or javascript.

I have a procedure right now that would populate the dialog content. It gets called on checkchanged event but by that time I think it is to late as the client side script has already fired. Also I found some code that does some of what I want but for some reason when I click the checkbox it shows the first time but not the next.

Any help would be appreciated.

Thanks.

Here is what I have thus far:

<script>

        var currentId;

        $(document).ready(function () {

            loadDialog();

            $('.cbxAction').click(function (myObject) {

                currentId = myObject.target.id;

                var isOtherCbxSelected = false

                $(".cbxAction :checked").each(function () {

                    var cbxIdentity = this.id;

                    if (cbxIdentity != currentId) isOtherCbxSelected = true;

                })

                if (isOtherCbxSelected) {

                    if (myObject.target.checked) {

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

                    }

                }

            });

        });

        function loadDialog() {

            $("#btnShowModal").dialog({

                resizable: false,

                height: 400,

                width: 400,

                modal: true,

                autoOpen: false,

                buttons: {

                    "OK": function () {

                        $(this).dialog("close");

                    },

                    Cancel: function () {

                        $('#' + currentId).attr('checked', false);

                        $(this).dialog("close");

                    }

                }

            });

        }

</script>

 

<div id="btnShowModal" title="Allow Checkbox Check?">

            <p>

                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>

                Are you sure that you want to check this checkbox?

                <asp:Label ID="lblDialogContent" runat="server" Text="Label"></asp:Label>

            </p>

        </div>

Reply

pro.shailend...

Participant

1000 Points

189 Posts

Re: Show dialog on check changed

Nov 30, 2012 08:09 AM|LINK

Try to put the method call loadDialog(); after the below statement like as:

currentId = myObject.target.id;

loadDialog();

in your method.

It may help you ..!!

.Net Professional & Cosultant
Blog: Dot Net Tricks Windows Apps
Please "Mark As Answer" if my suggestions helps you

Reply

olson2334

Member

87 Points

58 Posts

Re: Show dialog on check changed

Nov 30, 2012 01:30 PM|LINK

Thanks for the reply. I tried that but it doesn't seem to have done anything.

I have gotten it to open a dialog once you click a second check box. the first never opens the dialog. Also, I need to be able, on checked=true to change the dialog title and dialog content.

Any ideas what I am doing wrong?

Here is the oncheckchanged event currently:

protected void chbxEnroll_OnCheckedChanged(object sender, EventArgs e)
        {
            
                Gateway.DataSets.sp_Manager_Class_CheckStatus ds = new Gateway.DataSets.sp_Manager_Class_CheckStatus();
                Gateway.DataSets.sp_Manager_Class_CheckStatusTableAdapters.Manager_Class_CheckStatusTableAdapter ta = new Gateway.DataSets.sp_Manager_Class_CheckStatusTableAdapters.Manager_Class_CheckStatusTableAdapter();

                ta.Fill(ds.Manager_Class_CheckStatus, null, null);

                string strDialogTitle = "";
                string strDialogContent="";

                if (ds.Manager_Class_CheckStatus.Rows.Count > 0)
                {
                    
                    strDialogTitle=ds.Manager_Class_CheckStatus.Rows[0]["Title"].ToString();
                    strDialogContent = ds.Manager_Class_CheckStatus.Rows[0]["DialogText"].ToString();
                }

                ScriptManager.RegisterStartupScript(UpdatePanel2, typeof(UpdatePanel), "showSomeDialog", "checkChecked('" + strDialogTitle + "', '" + strDialogContent + "')", true);
                ScriptManager.RegisterStartupScript(UpdatePanel2, typeof(UpdatePanel), "showSomeDialog2", "loadDialog('" + strDialogTitle + "', '" + strDialogContent + "')", true);
            }
           
            
        }

Here is my jquery:

var currentId;
function checkChecked(DialogTitle, DialogContent) {
            
            $(document).ready(function () {
                $('.cbxAction').click(function (myObject) {
                    currentId = myObject.target.id;
                    loadDialog(DialogTitle, DialogContent);
                    var isOtherCbxSelected = false
                    $(".cbxAction").each(function () {
                        var cbxIdentity = this.id;
                        if (cbxIdentity != currentId) isOtherCbxSelected = true;
                    })
                    if (isOtherCbxSelected) {
                        if (myObject.target.checked) {
                            $("#btnShowModal").dialog("open");
                        }
                    }
                });
            });
        }
        function loadDialog(DialogTitle, DialogContent) {
            $("#btnShowModal").dialog({
                resizable: false,
                height: 400,
                width: 400,
                modal: true,
                autoOpen: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $('#' + currentId).attr('checked', false);
                        $(this).dialog("close");
                    }
                }
            });
            $('#<%= lblDialogContent.ClientID %>').html(DialogContent);
            $('#btnShowModal').html(DialogTitle);
        }

Here is my markup:

 <div id="btnShowModal" title="" style="display:none" >
                <asp:HiddenField ID="hdnDialogTitle" runat="server" />
                <p>
                    <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>

                    
                    <div id="lblDialogContent" runat="server"></div>
                    <%--<asp:Label ID="lblDialogContent2" runat="server" Text=""></asp:Label>--%>
                </p>
            </div>

Reply

menononnet

Member

258 Points

45 Posts

Re: Show dialog on check changed

Dec 02, 2012 08:11 AM|LINK

please refer this http://www.jquery4u.com/forms/jquery-check-checkbox-checked/

if ($('#ckbox').attr('checked') == true) {
    //popup dialog
}

Regards,
Sanal Menon Kalipurayath
w: www.MenonOn.Net

NB: Please click "Mark as Answer" if this helped you.

Reply

olson2334

Member

87 Points

58 Posts

Re: Show dialog on check changed

Dec 03, 2012 08:30 PM|LINK

menononnet thanks for the reply but unfortunately it did not work.

Currently I have it at a point where I can get the dialog to come up successfully and fill it based on a custom title and custom body. What I am having issues with now is getting the OK button on the dialog to trigger a server side click event. I have tried the following with no luck:

$('#MyButtonID').click();

but it never tirggers. If i open a new page and add 2 buttons, one hidden with the sever side event to be triggered I can get it to work in this fashion. Anyone have any ideas why this is not triggering?

I even went to far as to mimic what i have in my bear bones page where this works on the page where I want it to occur and it will not trigger.

Reply

menononnet

Member

258 Points

45 Posts

Re: Show dialog on check changed

Dec 08, 2012 04:01 AM|LINK

olson2334

menononnet thanks for the reply but unfortunately it did not work.

Currently I have it at a point where I can get the dialog to come up successfully and fill it based on a custom title and custom body. What I am having issues with now is getting the OK button on the dialog to trigger a server side click event. I have tried the following with no luck:

$('#MyButtonID').click();

but it never tirggers. If i open a new page and add 2 buttons, one hidden with the sever side event to be triggered I can get it to work in this fashion. Anyone have any ideas why this is not triggering?

I even went to far as to mimic what i have in my bear bones page where this works on the page where I want it to occur and it will not trigger.

I am not sure, I hope you want to pass the click event from the popup to the parent... if so

send the href value to the javascript function

<a id="btnDelete" href="javascript:__doPostBack(&#39;ctl00$MainContentPlaceHolder$lvServiceCategory$ctrl1$btnDelete&#39;,&#39;&#39;)">Delete</a>

and try "this.href" property in javascript function

this.href

please refer this to get the clear understanding, maybe you need to workaround to modify it in your way.. hope it helps... http://menononnet.wordpress.com/2012/11/09/asp-net-listview-item-delete-confirmation-using-jquery-colorbox/

Regards,
Sanal Menon Kalipurayath
w: www.MenonOn.Net

NB: Please click "Mark as Answer" if this helped you.

Edited by menononnet on Dec 08, 2012 04:02 AM

Show dialog on check changed RSS

5 replies

olson2334

Show dialog on check changed

pro.shailend...

Re: Show dialog on check changed

olson2334

Re: Show dialog on check changed

menononnet

Re: Show dialog on check changed

olson2334

Re: Show dialog on check changed

menononnet

Re: Show dialog on check changed

olson2334

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft