Modal Popup

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

Answer 1

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

Answer 2

User-1499457942 posted

Hi

  Can u pls provide help with some code

Thanks

Answer 3

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 
            }
        }

Answer 4

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

Answer 5

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>

Answer 6

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

Answer 7

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>

Answer 8

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

Answer 9

User-369506445 posted

Please put here your complete code

Answer 10

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

Answer 11

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"/> 

Answer 12

User-1499457942 posted

Hi

  I will try . What does 

ClientIDMode="Static" does

Thanks

Answer 13

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

Answer 14

User-1499457942 posted

Hi

 Thanks , but btn-Add is also in PlaceHolder

Thanks

Answer 15

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"