locked
How to Change Modal Header Text RRS feed

  • Question

  • User1912965948 posted

    Hi guys,

    I hope you guys must be fine this afternoon.

    I want to change bootstrap Modal header text.

    AddEdit.cshtml

    @model Project.Models.CustomerModel
    @{
        Layout = null;
    }
    
    @using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post, new { onsubmit = "return SubmitForm(this)"}))
    {
        <div id="customerModal"class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHeader"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.HiddenFor(model => model.cusId)
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Customer Name</label>
                            @Html.EditorFor(model => model.cusName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.cusName)
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Contact No</label>
                            @Html.EditorFor(model => model.contactNo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.contactNo)
                        </div>
                        <div class="col-md-6">
                            <label>Email</label>
                            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.email)
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <input type="reset" value="Reset" class="btn btn-warning" />
                    <input type="submit" value="Submit" class="btn btn-primary" />
                </div>
            </div>
        </div>
    }
    
    

    Index.cshtml

    <a id="btnModal" class="btn btn-primary" onclick="PopupForm('@Url.Action("AddEdit", "Customer")')">
    
    jQuery(document).ready(function () {
    
                jQuery('#btnModal').on('click', function () {
                    jQuery('#modatHeader').text('Add New Customer');
                    alert('This is alert');
                });
    });

    Thanks in advance

    Regards

    Sunday, January 12, 2020 9:25 AM

All replies

  • User475983607 posted

    You have a typo in the jQuery selector.

    jQuery('#modatHeader').text('Add New Customer');

    It should be...

    jQuery('#modalHeader').text('Add New Customer');

    Sunday, January 12, 2020 2:14 PM
  • User1912965948 posted

    You have a typo in the jQuery selector.

    Sorry this is copy paste error :(

    The thing is that, AddEdit.cshtml is a Modal and button and jquery code is written in Index.cshtml

    Its working if I write in index.cshtml

    <h5 id="modalHeader"></h5>
    
    <script>
       jQuery(document).ready(function(){
          jQuery('#btnModal').on('click', function () {
                    jQuery('#modalHeader').text('Add New Customer');
                });   
       });
    </script>  

    and 

    it dose not work when I try to access any element from Index.cshtml

    Its hard to change whole scenario because of this.

    My English is not enough good but I hope you got my point.

    Sunday, January 12, 2020 8:47 PM
  • User409696431 posted

    Javascript/JQuery can't reference elements from a different pages.  You have two pages: AddEdit.cshtml and Index.cshtml.  Looking for "modalHeader" which is in AddEdit.cshtml will not work if you try to do it from Index.cshtml.

    What prevents you from putting the header directly in AddEdit.cshtml?  Why do you need to change it from within index.cshtml?

    Monday, January 13, 2020 1:00 AM
  • User1912965948 posted

    What prevents you from putting the header directly in AddEdit.cshtml?  Why do you need to change it from within index.cshtml?

    Because buttons are on index page. I've 2 buttons on index page 1st Add New 2nd Edit, I want to change popup's header and as well as button values.

     I don't know how to do this from AddEdit page when the buttons are on index page?

    Sorry for late reply I was busy with an exhibition.

    I'm not pretty good in coding trying learning.

     

    Tuesday, January 21, 2020 9:54 AM
  • User409696431 posted

    If you have two functions, Add and Edit, why not make them separate?  Two different actions, two different pop-ups.

    Tuesday, January 21, 2020 5:28 PM
  • User1912965948 posted

    If you have two functions, Add and Edit, why not make them separate?  Two different actions, two different pop-ups.

    Yes, good idea I try it 

    Tuesday, January 21, 2020 7:52 PM