• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 334
  • Last Modified:

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
0
mgmhicks
Asked:
mgmhicks
  • 3
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now