Results 1 to 2 of 2

Thread: Modal popup button not hiding in the master page asp.net

  1. #1

    Thread Starter
    Member
    Join Date
    Sep 2020
    Location
    Kampala
    Posts
    40

    Modal popup button not hiding in the master page asp.net

    Please help iam trying to open my page but the button are not hidding yet they are supposed to be hidden on to popu when needed please help

    Code:
    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Forms/Site1.Master" CodeBehind="Student.aspx.vb" Inherits="UNIFORMSWEBAPP.Student" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
            <style type="text/css">
            body
            {
                font-family: Arial;
                font-size: 10pt;
            }
            </style>
    
         <div>
    </div>
    
    <div class="container">
        <div class="table-responsive">
            <asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server"
                CssClass="table table-bordered table-hover table-striped thead-dark GridCustomers" ShowFooter="True" Height="246px">
                <Columns>
                    <asp:TemplateField HeaderText="admno">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("admno") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="admno" runat="server" Text='<%# Bind("admno") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="Fname" runat="server" Text='<%# Bind("Name") %>' Width="216px"></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Name" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Class">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Class") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="ClassdllF" runat="server">
                                <asp:ListItem>NONE</asp:ListItem>
                                <asp:ListItem>P1</asp:ListItem>
                                <asp:ListItem>P2</asp:ListItem>
                                <asp:ListItem>P3</asp:ListItem>
                                <asp:ListItem>P4</asp:ListItem>
                                <asp:ListItem>P5</asp:ListItem>
                                <asp:ListItem>P6</asp:ListItem>
                                <asp:ListItem>P7</asp:ListItem>
                                <asp:ListItem>PRE</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Class" runat="server" Text='<%# Bind("Class") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Stream">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Stream") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Stream" runat="server" Text='<%# Bind("Stream") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Sex">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("Sex") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="DropDownList2" runat="server">
                                <asp:ListItem>NONE</asp:ListItem>
                                <asp:ListItem>MALE</asp:ListItem>
                                <asp:ListItem>FEMALE</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Sex" runat="server" Text='<%# Bind("Sex") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SType">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("STDTYPE") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="Button1" runat="server" Text="AddNew"  CssClass="btn btn-primary" Height="25px" OnClick="Button1_Click" />
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Stdype" runat="server" Text='<%# Bind("STDTYPE") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Colour">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("House") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="House" runat="server" Text='<%# Bind("House") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Rclass">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Rclass") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Rclass" runat="server" Text='<%# Bind("Rclass") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" data-toggle="modal"
                                runat="server">Edit</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Pay">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info"
                                OnClick="Display"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
        
        <div id="MyPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">
                            Update Payments
                        </h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered table-hover table-striped thead-dark">
                            <tr>
                                <td>
                                    admno
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="admno" CssClass="form-control" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Name
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Class
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="txtCountry" CssClass="form-control" />
                                </td>
                            </tr>
                                  <tr>
                                <td>
                                    Stream
                                </td>
                                <td>
               
                            <asp:DropDownList ID="Streamddl" runat="server" DataSourceID="SqlDataSource2" DataTextField="stream" DataValueField="stream" CssClass="dropdown"  AutoPostBack="true"  OnSelectedIndexChanged="OnUpdate2000"   >
            </asp:DropDownList>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:UNIFORMConnectionString %>" SelectCommand="SELECT stream FROM streamdata GROUP BY stream"></asp:SqlDataSource>
                  
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Pay Date
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="TDate" CssClass="form-control" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                   Amount
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Pay" CssClass="form-control" />
                                </td>
                            </tr>
                                <tr>
                                <td>
                                 Reciept No/ Bank Slip No
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Reciept" CssClass="form-control" />
                                </td>
                            </tr>  
    
                              <td>
                                  Details
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Comment" CssClass="form-control" />
                                </td>
                       
    
                            <tr>
                                    <td>Sex</td>
                                    <td>
                                        <asp:DropDownList ID="Sexdll" runat="server" CssClass="form-control" Height="30px" Width="125px" >
                                            <asp:ListItem>NONE</asp:ListItem>
                                            <asp:ListItem>MALE</asp:ListItem>
                                            <asp:ListItem>FEMALE</asp:ListItem>
                             
                                        </asp:DropDownList>
                                    </td>
    
                             <asp:Panel ID="Panel1" runat="server" Width="261px">
                           
                                <tr>
                                    <td>Transaction Details</td>
                                    <td>
                                        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Height="30px" Width="125px" OnSelectedIndexChanged="Colourdll2000" AutoPostBack="true">
                                            <asp:ListItem>NONE</asp:ListItem>
                                            <asp:ListItem>CASH</asp:ListItem>
                                            <asp:ListItem>TROPICAL</asp:ListItem>
                                            <asp:ListItem>DFCU BANK</asp:ListItem>
                                        </asp:DropDownList>
                                    </td>
    
                                    <td>House </td>
                                    <td>
                                        <asp:DropDownList ID="Colourdll" runat="server" CssClass="form-control">
                                            <asp:ListItem>NONE</asp:ListItem>
                                            <asp:ListItem>Red</asp:ListItem>
                                            <asp:ListItem>Green</asp:ListItem>
                                            <asp:ListItem>Blue</asp:ListItem>
                                             <asp:ListItem>Yellow</asp:ListItem>
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                   
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            </table>
                        </asp:Panel>
           
                         <tr>
                                                   <td>
                                    <asp:TextBox runat="server" ID="Sexd" CssClass="form-control" Visible="false" />
                                                           </td>
                             <td>
                                    <asp:TextBox runat="server" ID="Rclassd" CssClass="form-control" Visible="false" />
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Stdype" CssClass="form-control" Visible="false" />
                                </td>
                            </tr>
                          <div class="modal-footer">
                        <asp:Button ID="btnUpdate" Text="Update" runat="server" CssClass="btn btn-primary "
                            OnClick="OnUpdate"  />
                        <input type="button" value="Close" class="btn btn-danger" data-dismiss="modal"  />
                    </div>
                </div>
                       
                    </div>
                  
            </div>
        </div>
         
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
                    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
                    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
                    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
                        type="text/css" />
            
           <link rel="stylesheet" href="../BootStrap/Css/BootStrap3.3.2.css" />
        <script type="text/javascript" src="../BootStrap/Jquery3.4.1.js"></script>
         <script type="text/javascript" src="../BootStrap/Bootstrap3.3.2.min.js"></script>
         <script type="text/javascript" src="../BootStrap/Jquery.Datatables.1.10.20.js"></script>
        <link href="../BootStrap/Css/1.10.20.jquery.dataTables.css" rel="stylesheet"  type="text/css" />
    
         <script src="../Scripts/inputmask.min.js"></script>
          <script src="../Scripts/inputmask.date.extensions.min.js"></script>
          <script src="../Scripts/inputmask.extensions.min.js"></script>
              <link rel="stylesheet" type="text/css" href="../Scripts/inputmask.css"/>
                 
                         
          <script type="text/javascript">
                        $(function () {
                            var inputmask = new Inputmask("99/99/9999", { placeholder: 'dd/mm/yyyy' });
                            inputmask.mask($('[id*=TDate]'));
    
                            $(".GridCustomers").DataTable({
                                bLengthChange: true,
                                lengthMenu: [[10, 15, -1], [10, 15, "All"]],
                                bFilter: true,
                                bSort: true,
                                bPaginate: true
                            });
    
                $("[id*=lnkEdit]").click(function () {
                    $('[id*=admno]').val($(this).closest('tr').find('td').eq(0).html());
                    $('[id*=txtName]').val($(this).closest('tr').find('td').eq(1).html());
                    $('[id*=txtCountry]').val($(this).closest('tr').find('td').eq(2).html());
                    $('[id*=Streamddl]').val($(this).closest('tr').find('td').eq(3).html());
                    $('#MyPopup').modal('show');
                    return false;
                });
            });
        </script>
    
        <script type='text/javascript'>
                    function openModal() {
                        $('[id*=MyPopup]').modal('show');
                    }  
                </script>
    
    </asp:Content>
    Name:  Screenshot 2023-12-20 at 22-05-41 Screenshot.jpg
Views: 574
Size:  24.0 KB

  2. #2
    Hyperactive Member
    Join Date
    Jul 2022
    Posts
    347

    Re: Modal popup button not hiding in the master page asp.net

    I am wondering why you are listing these twice? You have the web reference and then a local reference. Maybe remove the second local reference.

    For testing I used this and it worked fine:
    Code:
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <h2>
            Welcome to ASP.NET!
        </h2>
        <p>
            To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
        </p>
        <p>
            You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
                title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
            <input type="button" value="Open" class="btn btn-danger" onclick="javascript: $('#MyPopup').modal('show');"  />
            <asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" data-toggle="modal" runat="server">Edit</asp:LinkButton>
    
        </p>
    
        <div id="MyPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">
                            Update Payments
                        </h4>
                    </div>
                    
                    <div class="modal-body">
                        <p>This is the body</p>
                    </div>
                    <input type="button" value="Close" class="btn btn-danger" data-dismiss="modal"  />
                </div>
            </div>
        </div>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css?parameter=1" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
       
        <script type="text/javascript">
            $(document).ready(function () {
                
                $("[id*=lnkEdit]").click(function () {
                    $('#MyPopup').modal('show');
                    return false;
                });
            });
            
    
        </script>
    
    </asp: Content>
    You can use the developer tools (press F12 in the browser) in the browser as well, check the console to see if there are any client-side errors preventing the modal from executing.
    https://developer.chrome.com/docs/devtools/javascript/

    EDIT: one screenshot I clicked a generic button with in-line javascript onclick event and the linkbutton I copied from your source, I like using document ready to assign functions.
    Attached Images Attached Images   

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width