change look of bootstrap modal after button click

I have a modal that is show using the following code behind statement
Private Sub btnConfirm_Click(sender As Object, e As EventArgs) Handles btnConfirm.Click
        ' ClientScript.RegisterClientScriptBlock(Me.GetType(), "ClientScript", "$('#ConfirmModal').modal('show');", True)
        cnAcctNo.Text = "*****" + CStr(Right(txtAcctNo.Text, 4))
        cnRouteNo.Text = "*****" + Right(txtRouteNo.Text, 4)
        cnAmt.Text = FormatCurrency(txtAmt.Text, 2)
        cnCheckNo.Text = txtChkNo.Text
        ScriptManager.RegisterStartupScript(Page, Me.GetType(), "ClientScript", "$('#ConfirmModal').modal('show');", True)
    End Sub

Open in new window


the modal looks like this.

  <div class="modal fade" id="ConfirmModal" tabindex="-1" role="dialog"  >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalTitle">Check Payment Confirmation</h4>
                </div>
                <div class="modal-body" id="bdMain">
                    
                    <div class="row">
                        <div class="col-md-4 col-sm-2">
                        <label for="cnAcctNo">Acct No.</label>
                        <asp:label ID="cnAcctNo" runat="server"></asp:label>
                            </div>
                        <div class="col-md-4 col-sm-2">
                            <label for ="cnRouteNo">Route No.</label>
                            <asp:Label runat="server" ID="cnRouteNo"></asp:Label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-2">
                            <label for="cnCheckNo">Check No.</label>
                            <asp:Label  runat="server" ID="cnCheckNo"></asp:Label>

                        </div>
                        <div class="col-md-4 col-sm-2">
                            <label for= "cnAmt" >Check Amt.</label>
                            <asp:Label runat="server" ID="cnAmt"></asp:Label>
                        </div>
                    </div>
                    <hr />
                    <div class="row">
                        <div class="col-md-3 col-sm-1 ">
                            <b>Are you Sure ?</b>
                        </div>
                                           
                           <div class="col-md-9 col-sm-1 ">
                               <asp:Button runat="server" ID="btnChk" CssClass="btn-primary" Text="Yes" ValidationGroup="Checks" />     
                               <asp:Button runat="server" ID="btnCancel"  CssClass="btn" Text="No" />

                           </div>
                        </div>
                    
                </div>
                <div class="modal-body" id="bdProgress">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar"
                            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            40%
                        </div>
                    </div>

                </div>
            </div>


        </div>



        </div>

Open in new window


so when btnChk is clicked I have code behind running. But what I need is to hide the 'dbMain' div and show the 'bdProgress' div when the btnChk is clicked.  It only seems to run the code behind.  I see no errors in google chrome.

Here is the jquery I am using to try to hide the item.

this is within a documentready statmentment

 $('#MainContent_btnChk').click(function () {
                $('bdMain').hide();
                $("bdProgress").show();
            })

Open in new window


thanks for the help
mgmhicksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Duy PhamFreelance IT ConsultantCommented:
This was wrong:

$('bdMain').hide();
$("bdProgress").show();

Open in new window


It should be:

$('#bdMain').hide();
$("#bdProgress").show();

Open in new window

0
mgmhicksAuthor Commented:
doesn't seem to be even hitting those lines, when the btnChk is clicked.
0
Duy PhamFreelance IT ConsultantCommented:
Maybe the static ID of btnChk you provided is not valid. That cause

In your code:

$('#MainContent_btnChk').click(function () {
                $('bdMain').hide();
                $("bdProgress").show();
            })

Open in new window


You can use this instead:

$('#<%=btnChk.ClientID%>').click(function () {
                $('#bdMain').hide();
                $("#bdProgress").show();
            })

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mgmhicksAuthor Commented:
Thank you that worked!  As a followup should I always use that for rather that the masterpage content id.  It works in all other areas of the page?
0
Duy PhamFreelance IT ConsultantCommented:
You'd better use that <%=serverControl.ClientID%>, it not only gives you the exact clientID of the control but also can be used as error detection tool in case you type in wrong serverControl which doesn't exist in your page.

It works for most of the cases, except when controls are placed inside a template column of a grid control or inside similar controls support content templating.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.