locked
Modal Label & Button Text RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code . I want when user clicks on btnEdit Modal label should get changed to Update & btnInsert text should get changed to Update Record. I tried this but not working - 

    $("#myModalLabel").val("Update");

    I am using Content page

    protected void gvwCategories_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "EditRow")
                {
                    ViewState["op"] = "Edit";
                    GridViewRow row = (GridViewRow)((LinkButton)e.CommandSource).NamingContainer;
                    HiddenField hdf_EntryNo = (row.FindControl("hdfEntryNo") as HiddenField);
                    txt_Code.Text = (row.FindControl("lblCode") as Label).Text;
                    txt_Description.Text = (row.FindControl("lblDescription") as Label).Text;
                    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
                }
            }
    
    
    
    <div class="modal fade" id="myAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title " id="myModalLabel">Add New </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal" role="form">
                            <div class="form-group">
                                <asp:HiddenField ID="hdf_EntryNo" runat="server" />
                                <asp:Label ID="lbl_Code" runat="server" CssClass="col-sm-4 control-label" Text="Code"></asp:Label>
                                <div class="col-sm-5">
                                    <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
                                </div>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lbl_Description" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                                <div class="col-sm-8">
                                    <asp:TextBox ID="txt_Description"  CssClass="form-control" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Description"></asp:RequiredFieldValidator>
    <%--                                <asp:RegularExpressionValidator ID="rev1" runat="server" ControlToValidate="txt_Description" ValidationExpression="^[a-zA-Z\s]*$" ErrorMessage="*Valid characters: Alphabets and space." />--%>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary"  Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
    
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvwCategories').dataTable({
                });
    
            function openModal() {
                $('[id*=myAddModal]').modal('show');
                $("#myModalLabel").val("Update");
            }
        </script>

    Thanks

    Tuesday, August 21, 2018 5:06 PM

Answers

  • User-893317190 posted

    Hi JagjitSingh,

    In the case of button, its the val method that works.

    So you should write your code as follows.

    function openModal() {
                    $('#myEditModal').modal('show')
                    $("#btnInsert").val("Update Record");
                     $("#myModalLabel").html("Update");
    
                }

    As to when to use the html or text method and when to use the val method,  it depends on how the control shows the text. 

     <h4>Add New</h4>'s text is written in the middle of the two tags, so you should use the text or html method.

    asp: button is rendered as  <input type="button"  value="" /> ,so the text is decided by the value property of the input  and you should use  val method.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 22, 2018 9:09 AM

All replies

  • User2103319870 posted

    $("#myModalLabel").val("Update");

    You need to use text property instead of val. Try with below code

    $("#myModalLabel").text("Update");

    Tuesday, August 21, 2018 6:19 PM
  • User-1499457942 posted

    Hi

        How the text of btnInsert can be changed .

    Thanks

    Wednesday, August 22, 2018 4:28 AM
  • User-893317190 posted

    Hi JagjitSingh,

    In the case of button, its the val method that works.

    So you should write your code as follows.

    function openModal() {
                    $('#myEditModal').modal('show')
                    $("#btnInsert").val("Update Record");
                     $("#myModalLabel").html("Update");
    
                }

    As to when to use the html or text method and when to use the val method,  it depends on how the control shows the text. 

     <h4>Add New</h4>'s text is written in the middle of the two tags, so you should use the text or html method.

    asp: button is rendered as  <input type="button"  value="" /> ,so the text is decided by the value property of the input  and you should use  val method.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 22, 2018 9:09 AM