'Clicking a text is not expanding table
I am having problem in my JS code. I tried much but was unable to solve it. The problem is that i have a dashboard which have multiple pages. We can switch from one page to another without reloading the page. Code of switching the pages without refresh
$(sidebar_a).click(function (e) {
// load another page without reloading
if ($(sidebar_a).hasClass("active")) {
$(sidebar_a).removeClass("active");
}
e.preventDefault();
$(this).addClass("active");
setTimeout(() => {
let url = $(this).attr("data-href");
// show page content and change the url
$(".recent-orders").load(url + " .recent-orders", function () {
window.history.replaceState(null, null, url);
});
}, 500);
$(".recent-orders").load("./inc/preloader.html");
});
I have multiple pages which includes dashboard orders customers etc. Each page has table which loads when we switch from one page to another. I have limited the tbody with 4 customers. If user wants to see all the customers he have to press show all button As shown in picture See Here
Table doesnot expand on pressing show all button if we switch between pages . If we switch to another page we have to reload the page than show-all button works well. And after reloading if we switch to another page as I told without reloading and come back to previous it doesnot work neither on previous page nor on next page.Each page contain table as shown above in picture with show-all button. Each time I have to reload page if I switch from one page to another. I want to solve it and make it work without reloading page. Here is My Both Pages code between which I am switching. 1st Page
<div class="recent-orders">
<h2>Recent Orders</h2>
<table id="recent-orders-table">
<thead>
<tr>
<th>Product Name</th>
<th>Product Number</th>
<th>Payment</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone 12</td>
<td>0002</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>iPhone 12</td>
<td>0003</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>Apple Tab</td>
<td>0004</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>iPhone 12</td>
<td>0001</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
</tbody>
<tbody class="hidetbody">
<tr>
<td>iPhone 2</td>
<td>0003</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>iPhone 12</td>
<td>0003</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>Apple Tab</td>
<td>0004</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
<tr>
<td>iPhone 12</td>
<td>0001</td>
<td>Due</td>
<td class="warning">Pending</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<a href="./index?detail_customer=">
<td class="primary"> <a href="./index?detail_customer="> Details </a> </td>
</a>
</tr>
</tbody>
</table>
<a href="javascript:void(0);" class="show-all-text">Show All</a>
</div>
2nd Page
<div class="recent-orders">
<h2>Customers</h2>
<table id="recent-orders-table">
<thead>
<tr>
<th>Customer Id</th>
<th>Customer Name</th>
<th>City</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>2</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>3</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=32"> Details </a> </td>
</tr>
</tbody>
<tbody class="hidetbody">
<tr>
<td>1</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>2</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>3</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=32"> Details </a> </td>
</tr>
</tbody>
</table>
<a href="javascript:void(0);" class="show-all-text">Show All</a>
</div>
My All JS Code
$(document).ready(function () {
let sideMenu = document.querySelector("aside");
let menuBtn = document.querySelector("#menu-btn");
let closeBtn = document.querySelector("#close-btn");
let themeToggler = document.querySelector(".theme-toggler");
let detailCustomerEach = document.querySelectorAll(".detail_c_each");
let sidebar_a = document.querySelectorAll(".sidebar_a");
let alerts = document.querySelectorAll(".alert");
// hide alerts
$(".alert-success").hide();
$(".alert-danger").hide();
$(".hidetbody").hide();
// show .hidetr when click on show-all
$(".show-all-text").click(function () {
$(".hidetbody").show();
// toggle the text of #show-all
$(".show-all-text").text(function (i, text) {
return text === "Show All" ? "Hide" : "Show All";
});
// toggle class of .hidetr
$(".hidetbody").toggleClass("show-all");
// if tbody has class show-all than show all tr
if ($("tbody").hasClass("show-all")) {
$(".hidetbody").show();
} else {
$(".hidetbody").hide();
}
});
// slide the menu for mobile
$(menuBtn).click(function () {
sideMenu.style.display = "block";
$(sideMenu).removeClass("animate__animated animate__slideOutLeft");
$(sideMenu).addClass("animate__animated animate__slideInLeft");
});
$(sidebar_a).click(function (e) {
// load another page without reloading
if ($(sidebar_a).hasClass("active")) {
$(sidebar_a).removeClass("active");
}
e.preventDefault();
$(this).addClass("active");
setTimeout(() => {
let url = $(this).attr("data-href");
// show page content and change the url
$(".recent-orders").load(url + " .recent-orders", function () {
window.history.replaceState(null, null, url);
});
}, 500);
$(".recent-orders").load("./inc/preloader.html");
});
$("form").on("submit", function (e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
success: function (data) {
$(".alert-success").show();
// hide alerts after 3 seconds
$(".alert-success").fadeOut(3000);
},
error: function (data) {
$(".alert-danger").show();
},
});
});
// close the menu for mobile
$(closeBtn).click(function () {
// sideMenu.style.display = "none";
$(sideMenu).removeClass("animate__animated animate__slideInLeft");
$(sideMenu).addClass("animate__animated animate__slideOutLeft");
});
$(".add-product").click(function () {
window.open("./index", "_self");
});
// change theme
$(themeToggler).click(function () {
document.body.classList.toggle("dark-theme-variables");
themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
});
});
And I more point is that all the files are included through php file by passing parameter in url and by using $_GET in php to include files.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Sharp" />
<link rel="stylesheet" href="css/style.css">
<title>Dashboard</title>
</head>
<script>
let sales = document.getElementsByClassName("sales");
let expenses = document.getElementsByClassName("expenses");
let income = document.getElementsByClassName("income");
function fadeCards() {
$(sales).addClass("animate__animated animate__zoomIn");
$(expenses).addClass("animate__animated animate__zoomIn");
$(income).addClass("animate__animated animate__zoomIn");
}
</script>
<body onload="fadeCards();">
<div class="container">
<!-- START OF LEFT SIDEBAR -->
<?php
include('inc/left_sidebar.php');
?>
<!-- END OF LEFT SIDEBAR -->
<!-- Main Section Start -->
<?php
include('inc/main.php');
?>
<!-- Main Section End -->
<!-- START OF RIGHT SIDEBAR -->
<?php
include('inc/right_sidebar.php');
?>
<!-- END OF RIGHT SIDEBAR -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</html>
main.php in which all files are included by passing paramter in url:
<main>
<h1>Dashboard</h1>
<div class="date">
<input type="date" name="" id="">
</div>
<div class="insights">
<div class="sales">
<span class="material-symbols-sharp">
analytics
</span>
<div class="middle">
<div class="left">
<h3>Total Sales</h3>
<h1>$250000</h1>
</div>
<div class="progress">
<svg>
<circle cx="38" cy="38" r="36">
</circle>
</svg>
<div class="number">
<p>80%</p>
</div>
</div>
</div>
<small class="text-muted">Last 24 Hours</small>
<!-- End Of Sales -->
</div>
<div class="expenses">
<span class="material-symbols-sharp">
bar_chart
</span>
<div class="middle">
<div class="left">
<h3>Total Expenses</h3>
<h1>$250000</h1>
</div>
<div class="progress">
<svg>
<circle cx="38" cy="38" r="36">
</circle>
</svg>
<div class="number">
<p>62%</p>
</div>
</div>
</div>
<small class="text-muted">Last 24 Hours</small>
<!-- End Of Expenses -->
</div>
<div class="income">
<span class="material-symbols-sharp">
stacked_line_chart
</span>
<div class="middle">
<div class="left">
<h3>Total Income</h3>
<h1>$4840</h1>
</div>
<div class="progress">
<svg>
<circle cx="38" cy="38" r="36">
</circle>
</svg>
<div class="number">
<p>44%</p>
</div>
</div>
</div>
<small class="text-muted">Last 24 Hours</small>
<!-- End Of Expenses -->
</div>
</div>
<?php
if (isset($_GET['dashboard'])) {
include "dashboard.php";
}
if (isset($_GET['customers'])) {
include "customers.php";
}
if (isset($_GET['detail_customer'])) {
include "detail_customer.php";
}
?>
</main>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|