locked
Modal Popup RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have 2 separate modal popup for Add & Update . Is it possible to use single Modal Popup for Both

    <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">
                            <div class="form-group">
                                <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>
                                </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>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="Select" class="col-sm-4 control-label">NMS Months</label>
                                <div class="col-sm-4">
                                    <asp:DropDownList ID="ddl_Months" runat="server"  CssClass="btn btn-default btn-sm">
                                    <asp:ListItem Text="1" Value ="1"/>
                                    <asp:ListItem Text="2" Value ="2"/>
                                    <asp:ListItem Text="3" Value ="3"/>
                                    <asp:ListItem Text="4" Value ="4"/>
                                    <asp:ListItem Text="5" Value ="5"/>
                                    <asp:ListItem Text="6" Value ="6"/>
                                    <asp:ListItem Text="7" Value ="7"/>
                                    <asp:ListItem Text="8" Value ="8"/>
                                    <asp:ListItem Text="9" Value ="9"/>
                                    <asp:ListItem Text="10" Value ="10"/>
                                    <asp:ListItem Text="11" Value ="11"/>
                                    <asp:ListItem Text="12" Value ="12"/>
                                    </asp:DropDownList>
                                </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" ValidationGroup="One" Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    
        <div class="modal fade" id="myEditModal" 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="H1">Update Record</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group row columnAdjust">
                                <asp:Label ID="lbl_Code0" runat="server" CssClass="col-sm-4 control-label" Text="Code"></asp:Label>
                                <div class="col-sm-5">
                                    <asp:TextBox ID="txt_Code0" CssClass="form-control" runat="server"></asp:TextBox>
    
                                </div>
                            </div>
                            <div class="form-group row">
                                <asp:Label ID="lbl_Description0" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                                <div class="col-sm-8">
                                    <asp:TextBox ID="txt_Description0"  CssClass="form-control" runat="server"></asp:TextBox>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="Select" class="col-sm-4 control-label">NMS Months</label>
                                <div class="col-sm-4">
                                    <asp:DropDownList ID="ddl_Months0" runat="server"    CssClass="btn btn-default btn-sm">
                                    <asp:ListItem Text="1" Value ="1"/>
                                    <asp:ListItem Text="2" Value ="2"/>
                                    <asp:ListItem Text="3" Value ="3"/>
                                    <asp:ListItem Text="4" Value ="4"/>
                                    <asp:ListItem Text="5" Value ="5"/>
                                    <asp:ListItem Text="6" Value ="6"/>
                                    <asp:ListItem Text="7" Value ="7"/>
                                    <asp:ListItem Text="8" Value ="8"/>
                                    <asp:ListItem Text="9" Value ="9"/>
                                    <asp:ListItem Text="10" Value ="10"/>
                                    <asp:ListItem Text="11" Value ="11"/>
                                    <asp:ListItem Text="12" Value ="12"/>
                                    </asp:DropDownList>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <asp:Button ID="btnUpdate" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" ValidationGroup="Edit" Text=" Update Record " OnClick="UpdateData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>

    Thanks

    Tuesday, August 14, 2018 6:08 PM

Answers

  • User-369506445 posted

    yes, if you see my last post , I said asp controls not html controls

    the content place just will change the asp controls ID

    asp control like

    <asp:Button

    Html control

    <input type="button" 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 3:34 PM

All replies

  • User-369506445 posted

    hi

    yes, you can, for example, you can set a hidden field for your operation(Edit or Add)

    then in code behind check the hidden field for Edit or Add

    Wednesday, August 15, 2018 4:27 AM
  • User-1499457942 posted

    Hi

      Can u pls provide help with some code

    Thanks

    Wednesday, August 15, 2018 5:27 AM
  • User-369506445 posted

    you can try below code, it is a sample that shows you how to do it 

    I highlighted the lines that you need to change them

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function () {
    $("#btnAdd").click(function () {
    $("#op").val("add")
    })
    $("#btnEdit").click(function () {
    $("#op").val("edit")
    })
    })
    </script>


    <button id="btnAdd" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myAddModal">Open Add</button> <button id="btnEdit" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myAddModal">Open Edit</button> <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"> <div class="form-group"> <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> </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> </div> </div> <div class="form-group"> <label for="Select" class="col-sm-4 control-label">NMS Months</label> <div class="col-sm-4"> <asp:DropDownList ID="ddl_Months" runat="server" CssClass="btn btn-default btn-sm"> <asp:ListItem Text="1" Value="1" /> <asp:ListItem Text="2" Value="2" /> <asp:ListItem Text="3" Value="3" /> <asp:ListItem Text="4" Value="4" /> <asp:ListItem Text="5" Value="5" /> <asp:ListItem Text="6" Value="6" /> <asp:ListItem Text="7" Value="7" /> <asp:ListItem Text="8" Value="8" /> <asp:ListItem Text="9" Value="9" /> <asp:ListItem Text="10" Value="10" /> <asp:ListItem Text="11" Value="11" /> <asp:ListItem Text="12" Value="12" /> </asp:DropDownList> </div> </div> <div class="form-group"> <div class="col-sm-4"></div> <div class="col-sm-4"> <asp:HiddenField runat="server" ID="op" ClientIDMode="Static" /> <asp:Button ID="btnInsert" CssClass="btn btn-primary" runat="server" class="btn btn-primary" ValidationGroup="One" Text=" Save Record" OnClick="btnInsert_Click"></asp:Button> </div> </div> </div> </div> </div> </div> </div>

    code behind

    protected void btnInsert_Click(object sender, EventArgs e)
            {
                if (op.Value.Equals("add"))
                {
                    // insert
                }
                else
                {
                    // edit 
                }
            }

    Wednesday, August 15, 2018 5:42 AM
  • User-1499457942 posted

    Hi

      I want to change modal title also according. If add

    it should display "Add New" . If Edit it should display "Update"

    <h4 class="modal-title " id="myModalLabel">Add New </h4>

    Thanks

    Friday, August 17, 2018 7:45 AM
  • User-369506445 posted

    You can set it in the script

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $("#btnAdd").click(function () {
    $("#myModalLabel").val("add");
                    $("#op").val("add")
                })
                $("#btnEdit").click(function () {
    $("#myModalLabel").val("edit");
                    $("#op").val("edit")
                })
            })
        </script>

    Friday, August 17, 2018 8:16 AM
  • User-1499457942 posted

    Hi

      I have below code but it is not working. It is not showing alert also

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $("#btnAdd").click(function () {
                    alert('in');
                    $("#myModalLabel").val("Add New");
                })
                $("#btnEdit").click(function () {
                    alert('in');
                    $("#myModalLabel").val("Update");
                })
            });
        </script>

    Thanks

    Friday, August 17, 2018 12:03 PM
  • User-369506445 posted

    Did you add below reference in your view ?

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Friday, August 17, 2018 12:15 PM
  • User-1499457942 posted

    Hi

      Now in Add it is showing alert message but not in btnEdit . In Add slso i just checked it is displaying alert message but not changing label value

    <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:linkbutton id="btnEdit"  CommandName="EditRow" runat="server" CssClass="clslnkbutton"/> 
                            </ItemTemplate>
                        </asp:TemplateField>

    Thanks

    Friday, August 17, 2018 1:05 PM
  • User-369506445 posted

    Please put here your complete code

    Friday, August 17, 2018 1:19 PM
  • User-1499457942 posted
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvwInflator').dataTable({
                    order: [],
                    columnDefs: [{ orderable: false, targets: [3] }]
                });
                
                $("#btnAdd").click(function () {
                    //$("#op").val("add")
                    alert('in');
                    $("#myModalLabel").val("Add");
                })
                $("#btnEdit").click(function () {
                    //$("#op").val("edit")
                    alert('in');
                    $("#myModalLabel").val("Update");
                })
            });
            function openModal() {
                $('[id*=myAddModal]').modal('show');
            }
        </script>
    </asp:Content>
    
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <button type="button" id="btnAdd" class="btn btn-primary" data-toggle="modal" data-target="#myAddModal">Add New</button><br /><br />
        <div class="row">  
            <div class="col-lg-12 "> 
                <div class="table-responsive">
                    <asp:GridView ID="gvwInflator" OnPreRender="gvwInflator_PreRender" runat="server" 
                    CssClass="table table-bordered table-striped" AutoGenerateColumns="false" OnRowCommand="gvwInflator_RowCommand"
                    ClientIDMode="Static" BorderWidth="1px" BorderStyle="None" BorderColor="#DEBA84" HeaderStyle-CssClass="GridHeader" 
                    EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty" >
                    <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                    <Columns>
                        <asp:TemplateField HeaderText="Code">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblCode" Text='<%#Eval("Code") %>'></asp:Label>
                                <asp:HiddenField ID="hdfEntryNo" runat="server" Value='<%# Bind("EntryNo") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Inflator">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblInflator" Text='<%#Eval("Inflator") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:linkbutton id="btnEdit"  ToolTip="Update Record" CommandName="EditRow" runat="server" CssClass="clslnkbutton"/> 
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    </asp:GridView>
                </div>
            </div>
        </div>
    
        <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:Label ID="lbl_Code" runat="server" CssClass="col-sm-4 control-label" Text="Code"></asp:Label>
                                <div class="col-sm-4">
                                    <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="Code Cannot Be Blank !" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>
                                </div>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lbl_Inflator" runat="server" CssClass="col-sm-4 control-label" Text="Inflator"></asp:Label>
                                <div class="col-sm-5">
                                    <asp:TextBox ID="txt_Inflator"  CssClass="form-control" runat="server"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="Inflator Value Cannot Be Blank !" ControlToValidate="txt_Inflator"></asp:RequiredFieldValidator>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-5">
                                    <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" ValidationGroup="One" Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    </asp:Content>

    Thanks

    Friday, August 17, 2018 1:27 PM
  • User-369506445 posted

    your problem <g class="gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="23" data-gr-id="23">happend</g> when your controls are inside a content place

    when you use <g class="gr_ gr_42 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="42" data-gr-id="42">a asp</g> control inside a content place in render time add the content place ID to the controls

    for <g class="gr_ gr_244 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="244" data-gr-id="244">example</g> you have a content place

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
    

    in render the textbox id be 

    MainContent_txt_Code

    for this reason the jquery not working

    here are 2 <g class="gr_ gr_294 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="294" data-gr-id="294">solution</g> <g class="gr_ gr_299 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="299" data-gr-id="299">for</g> <g class="gr_ gr_305 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="305" data-gr-id="305">solve</g> <g class="gr_ gr_315 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="315" data-gr-id="315">it ,</g> 

    Add the content place ID to your Edit button like above

    or add ClientIDMode to your Edit button

    I <g class="gr_ gr_401 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="401" data-gr-id="401">perfer</g> the second

    so change your Edit button in the GridView to

          <asp:linkbutton id="btnEdit"  ToolTip="Update Record" CommandName="EditRow" runat="server"  ClientIDMode="Static"/> 
    

    Friday, August 17, 2018 2:14 PM
  • User-1499457942 posted

    Hi

      I will try . What does 

    ClientIDMode="Static" does

    Thanks
    Friday, August 17, 2018 2:22 PM
  • User-369506445 posted
    ClientIDMode="Static"

    it's doesn't change your id inside a <g class="gr_ gr_22 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="22" data-gr-id="22">place holder</g>

    int your jquery you use

     $("#btnEdit").click(function () {

    when you put your control inside a place <g class="gr_ gr_128 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="128" data-gr-id="128">holde ,</g> the ID will be

    HeadContentPlaceHolder_btnEdit

    and your jquery can't find the <g class="gr_ gr_275 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="275" data-gr-id="275">control ,</g> but if you use ClientIDMode="Static"

    your ID will be same namely btnEdit

    Friday, August 17, 2018 2:55 PM
  • User-1499457942 posted

    Hi

     Thanks , but btn-Add is also in PlaceHolder

    Thanks

    Friday, August 17, 2018 3:30 PM
  • User-369506445 posted

    yes, if you see my last post , I said asp controls not html controls

    the content place just will change the asp controls ID

    asp control like

    <asp:Button

    Html control

    <input type="button" 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 3:34 PM