Javascript is not working anymore[Answered] RSS

3 replies

Last post Nov 02, 2020 02:37 AM by PaulTheSmith

‹ Previous Thread|Next Thread ›

Shortcuts

georgeakpan2...

Member

66 Points

175 Posts

Javascript is not working anymore

Oct 31, 2020 07:50 PM|georgeakpan233|LINK

Hello Forum,

I recently updated my bootstrap to the latest version through the NuGet Package Manager and my Javascript is not working anymore. Before the update, the JavaScript on my web forms was working. The sidebar navigation could be closed and opened freely but since I updated the bootstrap, it has not been working again. Another issue is that I don’t know the previous version of bootstrap I had before the update. Please what should I do? I really need help.

Below is my HTML page, CSS and JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Create Receipt</title>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
    <!-- Bootstrap CSS CDN -->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <!-- Our Custom CSS -->
    <!-- <link rel="stylesheet" href="style.css"/>-->
    <!-- <link href="css2/style2.css" rel="stylesheet" />-->
    <!--<link rel="stylesheet" href="style2.css" />-->
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <!-- Font Awesome JS -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }
        #content{
            max-width: 100%;
        }

        #sidebar {
            min-width: 250px;
            max-width: 250px;
            min-height: 100vh;
        }

            #sidebar.active {
                margin-left: -250px;
            }

        a[data-toggle="collapse"] {
            position: relative;
        }

        .dropdown-toggle::after {
            display: block;
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }

        @media (max-width: 768px) {
            #sidebar {
                margin-left: -250px;
            }

                #sidebar.active {
                    margin-left: 0;
                }
        }

        body {
            font-family: Constantia;
            background-color: #DCDCDC;
        }

        p {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1em;
            font-weight: 300;
            line-height: 1.7em;
            color: #999;
        }

        a, a:hover, a:focus {
            color: inherit;
            text-decoration: none;
            transition: all 0.3s;
        }

        #sidebar {
            /* don't forget to add all the previously mentioned styles here too */
            background: #355171;
            color: #fff;
            transition: all 0.3s;
        }

        #topbar {
            background: #355171;
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background: #355171;
            font-size: medium;
            font-weight: bold;
            font-family:Nunito;
        }

        #sidebar ul.components {
            padding: 20px 0;
            border-bottom: 1px solid #47748b;
        }

        #sidebar ul p {
            color: #fff;
            padding: 10px;
            font-size: medium;
        }
        #sub-head:hover{
            color:#355171;
        }
        #navbarSupportedContent li a {
            color: #00003D;
            font-family: Constantia;
        }
        #sidebar ul li a {
            padding: 10px;
            font-size: 1.1em;
            display: block;
            font-size: 9pt;
            font-family:Gadugi;
        }
            #sidebar ul li a:hover {
                color: #7386D5;
                background: #fff;
            }

        #sidebar ul li.active > a, a[aria-expanded="true"] {
            color: #fff;
            background: #355171;
        }

        ul ul a {
            font-size: 0.9em !important;
            padding-left: 30px !important;
            background: #4682b4;
        }

        #sidebarCollapse {
            background-color: #355171;
            font-size: x-small;
            max-width: 25px;
            min-width: 25px;
            max-height: 25px;
            min-height: 25px;
        }

        #sideCollapse {
            background-color: #355171;
            font-size: x-small;
            max-width: 26px;
            min-width: 26px;
            max-height: 26px;
            min-height: 26px;
        }

        .navbar navbar-expand-lg {
            background-color: #355171;
        }
         #content {
            width: 100%;
            font-size: small;
        }
          #center-content {
           margin-right: 50%;
           position: center;
           font-size: small;
           width: 100%;
           height:100%;
       }
    </style>
    <style type="text/css" media="screen">
         .container-fluid1 {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            background-color: #ffffff;
            border: 1px solid #ccc;
          }
         .container-fluid2 {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            background-color: #ffffff;
            border: 1px solid #ccc;
           
         }
         .child {
            width: 100%;
            height: auto;
            padding: .5rem;
            border: 1px solid #ccc;
        }
         .child2{
            width: 100%;
            height: auto;
            padding: .5rem;
            border: 1px solid #ccc;
         }
         .company-address {
            border: 0px solid #ccc;
            float: left;
            width: 190pt;
            font-size:8pt;
        }
         .client-address {
            border: 0px solid #ccc;
            float: left;
            width: 190pt;
            font-size:8pt;
        }
         #ftxtname {
             border: none;
             border-bottom: 1pt solid #eeeeee;
             width: 150pt;
         }
         #ftxtaddress{
             border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         #ftxtmail{
             border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         #ftxtphone{
              border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         .total{
            float: right;
            width: 150pt;
            font-size: 7pt;
        }
          #midcont {
            position: relative;
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
           #midcont2 {
            position: relative;
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
           #securelbl {
               opacity: 0.2;
               font-size: 7pt;
           }
           #lblsec {
               opacity: 0.2;
               font-size: 7pt;
           }
           #Image2{
               font-size: 800px;
           }
    </style>
    </head>
<body style="font-family: Constantia; background-color: #eeeeee;">
    <form id="form1" runat="server">
        <div class="wrapper">
            <!-- Sidebar -->
             <nav id="sidebar">
                <div class="list-unstyled sidebar-header">
                    <li>
                        <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                    <li>
                        <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13"/>&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                    <li>
                        <a><img alt="" src="images/wallet-xxl.png" height="12" />&nbsp;<asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                </div>
                <ul class="list-unstyled components">
                    <li>
                        <a href="Index.aspx">Home</a>
                    </li>
                    <li>
                       <a href="Certificate.aspx">Certificate Document</a>
                    </li>
                    <li>
                        <a href="UploadID.aspx">ID Card</a>
                    </li>
                    <li>
                        <a href="Invoice.aspx">Invoice Documents</a>
                    </li>
                    <li>
                        <a href="Receipt.aspx">Reciept Documents</a>
                    </li>
                    &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                    <li>
                        <a href="BackgroundTemplates.aspx" style="font-size:8pt;">ID Card Templates</a>
                        <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                    </li>
                </ul>
                <ul class="list-unstyled components">
                    <li id="dashboard" runat="server"><a href="#">Profile</a>
                    </li>
                    <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                    </li>
                </ul>
            </nav>
            <div id="content">
                <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-align-left"></i>
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<h3 style="font-size: medium; font-weight: bolder; font: bolder; color: #00003D;"></h3>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-align-justify"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                </li>
                                <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                    <script src="https://js.paystack.co/v1/inline.js"></script>
                                    <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="wallet" Style="font-size: smaller;" OnClick="lipaybutton_Click" />
                                </li>
                                &nbsp;<li class="dropdown" style="margin-right: 10px;">
                                    <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <hr />
                <br />
                <div class="line"></div>
                &nbsp;&nbsp;&nbsp;&nbsp;<h6 style="font-size: small; margin-top: -3%; color: red;">Authenticate Receipt</h6>
                    <hr />
                 <asp:Label ID="labelid" runat="server" Text=""></asp:Label><asp:Label ID="createby" runat="server" Text=""></asp:Label><asp:Label ID="role" runat="server" Text=""></asp:Label>
                <div class="row" style="width: 100%; font-family:Nunito;">
                    <div class="col">
                        <div class="container-fluid" style="background-color: #ffffff; width: auto;">
                            <div class="child" id="midcont">
                            <div style="background-color: #DCDFE6; height: 4%;">
                                    <center>
                                    <div class="heading">
                                  <asp:Label ID="OrganName" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="Company Name"></asp:Label>
                                   <br />
                                     <asp:TextBox ID="addressbox" runat="server" CssClass="form-control" Font-Size="9pt" Width="300" Height="25" placeholder=" Contact Address"></asp:TextBox>
                                    <asp:TextBox ID="phonebox" runat="server" CssClass="form-control" Font-Size="9pt" Width="300" Height="25" placeholder="Phone N°"></asp:TextBox>
                                </div>
                                </center>
                                </div>
                                 <label style="opacity:0.2; font-size:7pt;">This is Receipt Belongs to</label>&nbsp;&nbsp;<asp:Label ID="securelbl" runat="server" ForeColor="#40576d" Text=""></asp:Label>
                                <div style="float: right;">
                                    <asp:Label ID="Label3" runat="server" Text="Receipt N°:" Font-Size="XX-Small"></asp:Label>&nbsp;<asp:Label ID="Labelreceipt" Font-Names="Stencil" Font-Size="9pt" runat="server" Text=""></asp:Label>
                                </div><br />
                                 <div class="company-address">
                                    <asp:TextBox ID="ftxtname" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Name of Customer" Width="150pt" Height="25px"></asp:TextBox>
                                    <asp:TextBox ID="ftxtaddress" runat="server" CssClass="form-control" Height="25px" placeholder="Address of Customer" Font-Size="8pt" Width="150pt"></asp:TextBox>
                                    <asp:TextBox ID="ftxtmail" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Email" Height="25px" Width="150pt"></asp:TextBox>
                                    <asp:TextBox ID="ftxtphone" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Phone N°" Height="25px" Width="150pt"></asp:TextBox>
                                </div>
                                <br />
                                <br />
                                <br />
                                <br />
                                 <br />
                                      <asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False" class="table table-striped table-condensed table-bordered"
                                         BorderStyle="None" Style="max-width: 100%" HeaderStyle-ForeColor="#00003D" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="#D3D9E5">
                                          <Columns>
                                        <asp:TemplateField HeaderText="ITEM" ItemStyle-Width="40%">
                                            <ItemTemplate>
                                                <asp:TextBox ID="textBox1" runat="server" Class="form-control" Width="100%" Font-Size="Small" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
                                                <script type="text/javascript">
                                                    function Resize(textbox) {
                                                        textbox.style.height = "";
                                                        textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
                                                    }
                                                </script>
                                            </ItemTemplate>
                                            <FooterStyle HorizontalAlign="Left" />
                                            <FooterTemplate>
                                                <asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Height="35px" Font-Size="12pt" Text="+" OnClick="ButtonAdd_Click" />
                                            </FooterTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="QUANTITY" ItemStyle-Width="13%">
                                            <ItemTemplate>
                                                <asp:TextBox CssClass="form-control" ID="txtQuantity" Height="25" Font-Size="Small" runat="server" Width="100%"></asp:TextBox>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="RATE" ItemStyle-Width="19%">
                                            <ItemTemplate>
                                                <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                <asp:TextBox ID="txtRate" Height="25" runat="server" Width="80%"></asp:TextBox>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                              <asp:TemplateField HeaderText="AMOUNT" ItemStyle-Width="17%">
                                            <ItemTemplate>
                                                <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                <asp:Label ID="lblAmount" runat="server" Text="" Font-Bold="True"></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                              <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton1" ForeColor="Red" runat="server" OnClick="LinkButton1_Click">
                                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/del6.png" Height="25" />
                                                </asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <HeaderStyle Height="10px" />
                                      </asp:GridView>
                                <div class="total">
                                    <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Total:"></asp:Label>
                                    <asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
                                    <br />
                                    <div class="row">
                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>
                                        &nbsp;&nbsp;<asp:TextBox ID="txtVAT" runat="server" CssClass="form-control" Height="20px" Width="90px" Font-Size="6pt" placeholder="Value Added Tax"></asp:TextBox>
                                        <asp:Label ID="warnlbl" runat="server" ForeColor="Red" Font-Size="Small" Font-Bold="true" Text=""></asp:Label>
                                    </div>
                                    <br />
                                    <asp:Label ID="Label6" runat="server" Font-Bold="true" Text="Total Amount:"></asp:Label>
                                    <asp:Label ID="lblGrandTotal" runat="server" Text=""></asp:Label>
                                    <br />
                                </div>
                                <br />
                                <br />
                                <br />
                                <br />
                            </div>
                        </div>
                         <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Create Receipt" style="background-color: steelblue;" ID="createbtn" OnClick="createbtn_Click"/>
                    </div>
                    <!--End of Edited Receipt -->

                    <!-- Start of Finished Receipt -->
                    <div class="col">
                       
                        <div class="container-fluid2" style="background-color: #ffffff; width: auto;">
                                <div class="child2" id="midcont2">
                                    <asp:Panel ID="printpanel" runat="server">
                                 <center>
                                <div class="receipt-head">
                                  <asp:Label ID="Orgname" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="Company Name"></asp:Label>
                                   <br />
                                  <asp:Label ID="orgaddress" runat="server" Font-Bold="true" Font-Size="8pt" ForeColor="#000066" Text="Address"></asp:Label>
                                    <br />
                                    <asp:Label ID="lblphone" runat="server" Font-Size="8pt" ForeColor="#000066" Text="phone"></asp:Label>
                                    <hr />
                                </div>
                                </center>
                                    <label style="opacity: 0.2; font-size: 7pt;">This is Receipt Belongs to</label>&nbsp;&nbsp;<asp:Label ID="lblsec" runat="server" ForeColor="#40576d" Text=""></asp:Label>
                                    <div style="float: right;">
                                        <asp:Label ID="Label10" runat="server" Text="Receipt N°:" Font-Size="XX-Small"></asp:Label>&nbsp;<asp:Label ID="reference" Font-Names="Stencil" Font-Size="9pt" runat="server" Text=""></asp:Label>
                                    </div>
                                    <br />
                                    <div class="client-address">
                                        <asp:Label ID="client" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Name"></asp:Label>
                                        <asp:Label ID="clientaddrs" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Address"></asp:Label>
                                        <asp:Label ID="clientmail" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Mail"></asp:Label>
                                        <asp:Label ID="clientmobile" runat="server" Font-Names="Gadugi" Font-Size="8pt" Width="150pt" Height="25px" Text="mobile"></asp:Label>
                                        <asp:Label ID="lbldate" runat="server" Font-Names="Lucida" Font-Size="8pt" Width="150pt" Height="25" Text="Date"></asp:Label>
                                    </div>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <asp:GridView ID="Gridview2" runat="server" Font-Size="10pt" AutoGenerateColumns="False" Style="max-width: 100%" RowStyle-Height="40px" HeaderStyle-ForeColor="#00003D"
                                        BorderStyle="None" GridLines="Horizontal" Height="50px" HeaderStyle-Height="28px" HeaderStyle-BackColor="#D3D9E5">
                                        <Columns>
                                            <asp:BoundField DataField="items" HeaderText="ITEM DESCRIPTION" ItemStyle-Width="70%" />
                                            <asp:BoundField DataField="qty" HeaderText="QUANTITY" ItemStyle-Width="15%" />
                                            <asp:BoundField DataField="rate" HeaderText="RATE" ItemStyle-Width="19%" />
                                            <asp:BoundField DataField="amount" HeaderText="AMOUNT" ItemStyle-Width="20%" />
                                        </Columns>
                                        <HeaderStyle Height="25px" />
                                    </asp:GridView>
                                    <hr />
                                    <br />
                                    <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">
                                        <asp:Image ID="Image2" BorderStyle="Solid" BorderWidth="1px" runat="server" Width="70px" Height="70px" />
                                    </div>
                                    <div class="total" style="float: right;">
                                        <asp:Label ID="Label12" runat="server" Font-Bold="true" Text="Total:"></asp:Label>
                                        <asp:Label ID="totallbl" runat="server" Text=""></asp:Label>
                                        <br />
                                        <div class="row">
                                            <asp:Label ID="Label14" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>
                                            &nbsp;&nbsp;<asp:Label ID="lblvat" runat="server" Height="20px" Width="100px" Text="Value Added Tax"></asp:Label>
                                        </div>
                                        <asp:Label ID="Label15" runat="server" Font-Names="Constantia" Font-Bold="true" Text="Total Amount:"></asp:Label>
                                        <asp:Label ID="amountlbl" runat="server" Text=""></asp:Label>
                                        <br />
                                    </div>
                                    <br />
                                    <br />
                                    <br />
                                   </asp:Panel>
                                </div>
                        </div>
                        <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Download Receipt" style="background-color: steelblue;" ID="dwnldbtn" OnClick="dwnldbtn_Click"/>
                     <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Send Receipt to Mail" style="background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click"/>
                    </div>
                </div>
                 <br />
                 <br />
               <!-- Footer -->
                 <footer class="page-footer font-small bg-light" style="background-color: #D1D1D1; font-family: Nunito;">
                    <br />
                    <hr />
                    <div class="footer-copyright text-center py-3">
                     © Copyright <%=DateTime.Now.Year %>&nbsp;&nbsp;&nbsp;<a href="http://www.excelasoft.com/" style="font-weight:bold; color:#00003D;">JosCode.com</a>
                    </div>
                </footer>
           <!-- Footer -->
            </div>
            </div>
    </form>
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
     <script type="text/javascript">

        $(function () {
            CalculateTotal();
        });
        $("body").on("change keyup", "[id*=txtQuantity],[id*=txtRate],[id*=txtVAT]", function () {
            var row = $(this).closest("tr");
            //Check whether Quantity value is valid Float number.
            var quantity = parseFloat($.trim($(row).find("[id*=txtQuantity]").val()));
            if (isNaN(quantity)) {
                quantity = 0;
            }
 
            var rate = parseFloat($.trim($(row).find("[id*=txtRate]").val()));
            if (isNaN(rate)) {
                rate = 0;
            }
            //Calculate and update Row Total.
            $("[id*=lblAmount]", row).html(quantity * rate);
            CalculateTotal();
        });
        function CalculateTotal() {
            //Calculate and update Grand Total.
            var grandTotal = 0;
            $("[id*=lblAmount]").each(function () {
                var amount = 0;
                if (!isNaN($(this).html()) && $(this).html() != "") {
                    amount = $(this).html();
                }
                grandTotal = grandTotal + parseFloat(amount);
            });
 
            $("[id*=lblTotal]").html(grandTotal);
            var vat = parseInt($("[id*=txtVAT]").val()) / 100;
            grandTotal = grandTotal + (grandTotal * vat);
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#sidebar").mCustomScrollbar({
                theme: "minimal"
            });

            $('#sidebarCollapse').on('click', function () {
                // open or close navbar
                $('#sidebar').toggleClass('active');
                // close dropdowns
                $('.collapse.in').toggleClass('in');
                // and also adjust aria-expanded attributes we use for the open/closed arrows
                // in our CSS
                $('a[aria-expanded=true]').attr('aria-expanded', 'false');
            });

        });
    </script>
</body>
</html>

bruce (sqlwo...

All-Star

58254 Points

15675 Posts

Re: Javascript is not working anymore

Oct 31, 2020 08:06 PM|bruce (sqlwork.com)|LINK

Why ref 3 different versions of bootstrap css. Also you include the js more than once.

<link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

bruce (sqlwork.com)

georgeakpan2...

Member

66 Points

175 Posts

Re: Javascript is not working anymore

Oct 31, 2020 09:03 PM|georgeakpan233|LINK

Hi bruce,

I omitted the css and js and this is what I have; its still giving the same problem When I minimize the window and try to use both span buttons, the sidebar will not open and the top navbar will open but will immediately close itself. Please what else have I not not done. I am new to Javascript. please help

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Create Receipt</title>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
    <!-- Bootstrap CSS CDN -->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <style type="text/css">
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }
        #content{
            max-width: 100%;
        }

        #sidebar {
            min-width: 250px;
            max-width: 250px;
            min-height: 100vh;
        }

            #sidebar.active {
                margin-left: -250px;
            }

        a[data-toggle="collapse"] {
            position: relative;
        }

        .dropdown-toggle::after {
            display: block;
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }

        @media (max-width: 768px) {
            #sidebar {
                margin-left: -250px;
            }

                #sidebar.active {
                    margin-left: 0;
                }
        }

        body {
            font-family: Constantia;
            background-color: #DCDCDC;
        }

        p {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1em;
            font-weight: 300;
            line-height: 1.7em;
            color: #999;
        }

        a, a:hover, a:focus {
            color: inherit;
            text-decoration: none;
            transition: all 0.3s;
        }

        #sidebar {
            /* don't forget to add all the previously mentioned styles here too */
            background: #355171;
            color: #fff;
            transition: all 0.3s;
        }

        #topbar {
            background: #355171;
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background: #355171;
            font-size: medium;
            font-weight: bold;
            font-family:Nunito;
        }

        #sidebar ul.components {
            padding: 20px 0;
            border-bottom: 1px solid #47748b;
        }

        #sidebar ul p {
            color: #fff;
            padding: 10px;
            font-size: medium;
        }
        #sub-head:hover{
            color:#355171;
        }
        #navbarSupportedContent li a {
            color: #00003D;
            font-family: Constantia;
        }
        #sidebar ul li a {
            padding: 10px;
            font-size: 1.1em;
            display: block;
            font-size: 9pt;
            font-family:Gadugi;
        }
            #sidebar ul li a:hover {
                color: #7386D5;
                background: #fff;
            }

        #sidebar ul li.active > a, a[aria-expanded="true"] {
            color: #fff;
            background: #355171;
        }

        ul ul a {
            font-size: 0.9em !important;
            padding-left: 30px !important;
            background: #4682b4;
        }

        #sidebarCollapse {
            background-color: #355171;
            font-size: x-small;
            max-width: 25px;
            min-width: 25px;
            max-height: 25px;
            min-height: 25px;
        }

        #sideCollapse {
            background-color: #355171;
            font-size: x-small;
            max-width: 26px;
            min-width: 26px;
            max-height: 26px;
            min-height: 26px;
        }

        .navbar navbar-expand-lg {
            background-color: #355171;
        }
         #content {
            width: 100%;
            font-size: small;
        }
          #center-content {
           margin-right: 50%;
           position: center;
           font-size: small;
           width: 100%;
           height:100%;
       }
    </style>
    <style type="text/css" media="screen">
         .container-fluid1 {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            background-color: #ffffff;
            border: 1px solid #ccc;
          }
         .container-fluid2 {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            background-color: #ffffff;
            border: 1px solid #ccc;
           
         }
         .child {
            width: 100%;
            height: auto;
            padding: .5rem;
            border: 1px solid #ccc;
        }
         .child2{
            width: 100%;
            height: auto;
            padding: .5rem;
            border: 1px solid #ccc;
         }
         .company-address {
            border: 0px solid #ccc;
            float: left;
            width: 190pt;
            font-size:8pt;
        }
         .client-address {
            border: 0px solid #ccc;
            float: left;
            width: 190pt;
            font-size:8pt;
        }
         #ftxtname {
             border: none;
             border-bottom: 1pt solid #eeeeee;
             width: 150pt;
         }
         #ftxtaddress{
             border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         #ftxtmail{
             border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         #ftxtphone{
              border: none;
             border-bottom: 1pt solid #eeeeee;
         }
         .total{
            float: right;
            width: 150pt;
            font-size: 7pt;
        }
          #midcont {
            position: relative;
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
           #midcont2 {
            position: relative;
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
           #securelbl {
               opacity: 0.2;
               font-size: 7pt;
           }
           #lblsec {
               opacity: 0.2;
               font-size: 7pt;
           }
           #Image2{
               font-size: 800px;
           }
    </style>
    </head>
<body style="font-family: Constantia; background-color: #eeeeee;">
    <form id="form1" runat="server">
        <div class="wrapper">
            <!-- Sidebar -->
             <nav id="sidebar">
                <div class="list-unstyled sidebar-header">
                    <li>
                        <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                    <li>
                        <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13"/>&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                    <li>
                        <a><img alt="" src="images/wallet-xxl.png" height="12" />&nbsp;<asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                    </li>
                </div>
                <ul class="list-unstyled components">
                    <li>
                        <a href="Index.aspx">Home</a>
                    </li>
                    <li>
                       <a href="Certificate.aspx">Certificate Document</a>
                    </li>
                    <li>
                        <a href="UploadID.aspx">ID Card</a>
                    </li>
                    <li>
                        <a href="Invoice.aspx">Invoice Documents</a>
                    </li>
                    <li>
                        <a href="Receipt.aspx">Reciept Documents</a>
                    </li>
                    &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                    <li>
                        <a href="BackgroundTemplates.aspx" style="font-size:8pt;">ID Card Templates</a>
                        <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                    </li>
                </ul>
                <ul class="list-unstyled components">
                    <li id="dashboard" runat="server"><a href="#">Profile</a>
                    </li>
                    <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                    </li>
                </ul>
            </nav>
            <div id="content">
                <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-align-left"></i>
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<h3 style="font-size: medium; font-weight: bolder; font: bolder; color: #00003D;"></h3>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-align-justify"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                </li>
                                <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                    <script src="https://js.paystack.co/v1/inline.js"></script>
                                    <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="wallet" Style="font-size: smaller;" OnClick="lipaybutton_Click" />
                                </li>
                                &nbsp;<li class="dropdown" style="margin-right: 10px;">
                                    <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <hr />
                <br />
                <div class="line"></div>
                &nbsp;&nbsp;&nbsp;&nbsp;<h6 style="font-size: small; margin-top: -3%; color: red;">Authenticate Receipt</h6>
                    <hr />
                 <asp:Label ID="labelid" runat="server" Text=""></asp:Label><asp:Label ID="createby" runat="server" Text=""></asp:Label><asp:Label ID="role" runat="server" Text=""></asp:Label>
                <div class="row" style="width: 100%; font-family:Nunito;">
                    <div class="col">
                        <div class="container-fluid" style="background-color: #ffffff; width: auto;">
                            <div class="child" id="midcont">
                            <div style="background-color: #DCDFE6; height: 4%;">
                                    <center>
                                    <div class="heading">
                                  <asp:Label ID="OrganName" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="Company Name"></asp:Label>
                                   <br />
                                     <asp:TextBox ID="addressbox" runat="server" CssClass="form-control" Font-Size="9pt" Width="300" Height="25" placeholder=" Contact Address"></asp:TextBox>
                                    <asp:TextBox ID="phonebox" runat="server" CssClass="form-control" Font-Size="9pt" Width="300" Height="25" placeholder="Phone N°"></asp:TextBox>
                                </div>
                                </center>
                                </div>
                                 <label style="opacity:0.2; font-size:7pt;">This is Receipt Belongs to</label>&nbsp;&nbsp;<asp:Label ID="securelbl" runat="server" ForeColor="#40576d" Text=""></asp:Label>
                                <div style="float: right;">
                                    <asp:Label ID="Label3" runat="server" Text="Receipt N°:" Font-Size="XX-Small"></asp:Label>&nbsp;<asp:Label ID="Labelreceipt" Font-Names="Stencil" Font-Size="9pt" runat="server" Text=""></asp:Label>
                                </div><br />
                                 <div class="company-address">
                                    <asp:TextBox ID="ftxtname" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Name of Customer" Width="150pt" Height="25px"></asp:TextBox>
                                    <asp:TextBox ID="ftxtaddress" runat="server" CssClass="form-control" Height="25px" placeholder="Address of Customer" Font-Size="8pt" Width="150pt"></asp:TextBox>
                                    <asp:TextBox ID="ftxtmail" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Email" Height="25px" Width="150pt"></asp:TextBox>
                                    <asp:TextBox ID="ftxtphone" runat="server" CssClass="form-control" Font-Size="8pt" placeholder="Phone N°" Height="25px" Width="150pt"></asp:TextBox>
                                </div>
                                <br />
                                <br />
                                <br />
                                <br />
                                 <br />
                                      <asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False" class="table table-striped table-condensed table-bordered"
                                         BorderStyle="None" Style="max-width: 100%" HeaderStyle-ForeColor="#00003D" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="#D3D9E5">
                                          <Columns>
                                        <asp:TemplateField HeaderText="ITEM" ItemStyle-Width="40%">
                                            <ItemTemplate>
                                                <asp:TextBox ID="textBox1" runat="server" Class="form-control" Width="100%" Font-Size="Small" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
                                                <script type="text/javascript">
                                                    function Resize(textbox) {
                                                        textbox.style.height = "";
                                                        textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
                                                    }
                                                </script>
                                            </ItemTemplate>
                                            <FooterStyle HorizontalAlign="Left" />
                                            <FooterTemplate>
                                                <asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Height="35px" Font-Size="12pt" Text="+" OnClick="ButtonAdd_Click" />
                                            </FooterTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="QUANTITY" ItemStyle-Width="13%">
                                            <ItemTemplate>
                                                <asp:TextBox CssClass="form-control" ID="txtQuantity" Height="25" Font-Size="Small" runat="server" Width="100%"></asp:TextBox>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="RATE" ItemStyle-Width="19%">
                                            <ItemTemplate>
                                                <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                <asp:TextBox ID="txtRate" Height="25" runat="server" Width="80%"></asp:TextBox>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                              <asp:TemplateField HeaderText="AMOUNT" ItemStyle-Width="17%">
                                            <ItemTemplate>
                                                <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                <asp:Label ID="lblAmount" runat="server" Text="" Font-Bold="True"></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                              <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton1" ForeColor="Red" runat="server" OnClick="LinkButton1_Click">
                                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/del6.png" Height="25" />
                                                </asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <HeaderStyle Height="10px" />
                                      </asp:GridView>
                                <div class="total">
                                    <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Total:"></asp:Label>
                                    <asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
                                    <br />
                                    <div class="row">
                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>
                                        &nbsp;&nbsp;<asp:TextBox ID="txtVAT" runat="server" CssClass="form-control" Height="20px" Width="90px" Font-Size="6pt" placeholder="Value Added Tax"></asp:TextBox>
                                        <asp:Label ID="warnlbl" runat="server" ForeColor="Red" Font-Size="Small" Font-Bold="true" Text=""></asp:Label>
                                    </div>
                                    <br />
                                    <asp:Label ID="Label6" runat="server" Font-Bold="true" Text="Total Amount:"></asp:Label>
                                    <asp:Label ID="lblGrandTotal" runat="server" Text=""></asp:Label>
                                    <br />
                                </div>
                                <br />
                                <br />
                                <br />
                                <br />
                            </div>
                        </div>
                         <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Create Receipt" style="background-color: steelblue;" ID="createbtn" OnClick="createbtn_Click"/>
                    </div>
                    <!--End of Edited Receipt -->

                    <!-- Start of Finished Receipt -->
                    <div class="col">
                         <asp:Panel ID="printpanel" runat="server">
                        <div class="container-fluid2" style="background-color: #ffffff; width: auto;">
                                <div class="child2" id="midcont2">
                                 <center>
                                <div class="receipt-head">
                                  <asp:Label ID="Orgname" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="Company Name"></asp:Label>
                                   <br />
                                  <asp:Label ID="orgaddress" runat="server" Font-Bold="true" Font-Size="8pt" ForeColor="#000066" Text="Address"></asp:Label>
                                    <br />
                                    <asp:Label ID="lblphone" runat="server" Font-Size="8pt" ForeColor="#000066" Text="phone"></asp:Label>
                                    <hr />
                                </div>
                                </center>
                                    <label style="opacity: 0.2; font-size: 7pt;">This is Receipt Belongs to</label>&nbsp;&nbsp;<asp:Label ID="lblsec" runat="server" ForeColor="#40576d" Text=""></asp:Label>
                                    <div style="float: right;">
                                        <asp:Label ID="Label10" runat="server" Text="Receipt N°:" Font-Size="XX-Small"></asp:Label>&nbsp;<asp:Label ID="reference" Font-Names="Stencil" Font-Size="9pt" runat="server" Text=""></asp:Label>
                                    </div>
                                    <br />
                                    <div class="client-address">
                                        <div>
                                            <asp:Label ID="client" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Name"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="clientaddrs" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Address"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="clientmail" runat="server" Font-Size="8pt" Width="150pt" Height="25px" Text="Mail"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="clientmobile" runat="server" Font-Names="Gadugi" Font-Size="8pt" Width="150pt" Height="25px" Text="mobile"></asp:Label>
                                        </div>
                                        <div>
                                            <asp:Label ID="lbldate" runat="server" Font-Names="Lucida" Font-Size="8pt" Width="150pt" Height="25" Text="Date"></asp:Label>
                                        </div>
                                    </div>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <asp:GridView ID="Gridview2" runat="server" Font-Size="10pt" AutoGenerateColumns="False" Style="max-width: 100%" RowStyle-Height="40px" HeaderStyle-ForeColor="#00003D"
                                        BorderStyle="None" GridLines="None" Height="50px" HeaderStyle-Height="28px" HeaderStyle-BackColor="#D3D9E5">
                                        <Columns>
                                            <asp:BoundField DataField="items" HeaderText="ITEM DESCRIPTION" ItemStyle-Width="70%" />
                                            <asp:BoundField DataField="qty" HeaderText="QUANTITY" ItemStyle-Width="15%" />
                                            <asp:BoundField DataField="rate" HeaderText="RATE" ItemStyle-Width="19%" />
                                            <asp:BoundField DataField="amount" HeaderText="AMOUNT" ItemStyle-Width="20%" />
                                        </Columns>
                                        <HeaderStyle Height="25px" />
                                    </asp:GridView>
                                    <hr />
                                    <br />
                                    <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">
                                        <asp:Image ID="Image2" BorderStyle="Solid" BorderWidth="1px" runat="server" Width="70px" Height="70px" />
                                    </div>
                                    <div class="total" style="float: right;">
                                        <asp:Label ID="Label12" runat="server" Font-Bold="true" Text="Total:"></asp:Label>
                                        <asp:Label ID="totallbl" runat="server" Text=""></asp:Label>
                                        <br />
                                        <div class="row">
                                            <asp:Label ID="Label14" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>
                                            &nbsp;&nbsp;<asp:Label ID="lblvat" runat="server" Height="20px" Width="100px" Text="Value Added Tax"></asp:Label>
                                        </div>
                                        <asp:Label ID="Label15" runat="server" Font-Names="Constantia" Font-Bold="true" Text="Total Amount:"></asp:Label>
                                        <asp:Label ID="amountlbl" runat="server" Text=""></asp:Label>
                                        <br />
                                    </div>
                                    <br />
                                    <br />
                                    <br />
                                </div>
                        </div>
                             </asp:Panel>
                        <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Download Receipt" style="background-color: steelblue;" ID="dwnldbtn" OnClick="dwnldbtn_Click"/>
                     <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="9pt" text="Send Receipt to Mail" style="background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click"/>
                    </div>
                </div>
                 <br />
                 <br />
               <!-- Footer -->
                 <footer class="page-footer font-small bg-light" style="background-color: #D1D1D1; font-family: Nunito;">
                    <br />
                    <hr />
                    <div class="footer-copyright text-center py-3">
                     © Copyright <%=DateTime.Now.Year %>&nbsp;&nbsp;&nbsp;<a href="http://www.excelasoft.com/" style="font-weight:bold; color:#00003D;">JosCode.com</a>
                    </div>
                </footer>
           <!-- Footer -->
            </div>
            </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript">

        $(function () {
            CalculateTotal();
        });
        $("body").on("change keyup", "[id*=txtQuantity],[id*=txtRate],[id*=txtVAT]", function () {
            var row = $(this).closest("tr");
            //Check whether Quantity value is valid Float number.
            var quantity = parseFloat($.trim($(row).find("[id*=txtQuantity]").val()));
            if (isNaN(quantity)) {
                quantity = 0;
            }
 
            var rate = parseFloat($.trim($(row).find("[id*=txtRate]").val()));
            if (isNaN(rate)) {
                rate = 0;
            }
            //Calculate and update Row Total.
            $("[id*=lblAmount]", row).html(quantity * rate);
            CalculateTotal();
        });
        function CalculateTotal() {
            //Calculate and update Grand Total.
            var grandTotal = 0;
            $("[id*=lblAmount]").each(function () {
                var amount = 0;
                if (!isNaN($(this).html()) && $(this).html() != "") {
                    amount = $(this).html();
                }
                grandTotal = grandTotal + parseFloat(amount);
            });
 
            $("[id*=lblTotal]").html(grandTotal);
            var vat = parseInt($("[id*=txtVAT]").val()) / 100;
            grandTotal = grandTotal + (grandTotal * vat);
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#sidebar").mCustomScrollbar({
                theme: "minimal"
            });

            $('#sidebarCollapse').on('click', function () {
                // open or close navbar
                $('#sidebar').toggleClass('active');
                // close dropdowns
                $('.collapse.in').toggleClass('in');
                // and also adjust aria-expanded attributes we use for the open/closed arrows
                // in our CSS
                $('a[aria-expanded=true]').attr('aria-expanded', 'false');
            });

        });
    </script>
</body>
</html>

- Reply
PaulTheSmith
Participant

1630 Points

930 Posts
Re: Javascript is not working anymore

Nov 02, 2020 02:37 AM|PaulTheSmith|LINK
I think that the intent of Bruce's post might have been to reduce the number of times that you include bootstrap to 1. You have brought it down to 2.

Javascript twice
georgeakpan233
```
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
```
and css twice
georgeakpan233
```
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
```
Also, you might want to check that the version of the .css and the version of the .js are the same/compatible.

‹ Previous Thread|Next Thread ›