Page reloading even after preventDefault

Question

Hi Here Below Is My jS code. The problem is that it works fine when we load .recent-orders div for changing pages but when i click on the details text it reloads the page and dont show preloader instead it loads and move towards next page. I want it not to reload and move towards next page showing preloader for 1 sec.

Desire page to come but shouldnot reload page

JS:

$(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");

  $(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("href");
      // show page content and change the url
      $(".recent-orders").load(url + " .recent-orders", function () {
        window.history.pushState(null, null, url);
      });
    }, 1000);
    $(".recent-orders").load("./inc/preloader.html");
  });

  $(detailCustomerEach).click(function (e) {
    // load section detail customer without reloading
    e.preventDefault();
    let url1 = $(this).attr("href");
    setTimeout(() => {
      $(".recent-orders").load(url1 + " .recent-orders", function () {
        window.history.pushState(null, null, url1);
      });
    }, 5000);
  });

  // hide alert after 2 seconds
  $(alerts).each(function () {
    setTimeout(
      function () {
        $(this).fadeOut("slow");
      }.bind(this),
      2000
    );
  });

  $(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");
  });
});

HTML Main

<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=30"> 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:;" id="show-all">Show All</a>
</div>

Html to move

<?php


$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";

$conn = mysqli_connect($server, $username, $pass, $dbname);



if (isset($_GET['detail_customer'])) {
    $quest_id = $_GET['detail_customer'];

    $get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
    $getting_quest = mysqli_query($conn, $get_quest);

    while ($row = mysqli_fetch_assoc($getting_quest)) {
        $quest_title = $row['quest_title'];
        $category_id = $row['category_id'];
    }
}



?>


<div class="recent-orders cust_det ">
    <h2> Customer Detail</h2>
    <div class="customer_detail">
        <form id="form" method="POST" action="" class="c_form animate__animated animate__fadeIn">

            <?php
            if (isset($_GET['success'])) {
                echo "<div class='alert alert-success'>
                            <strong>Success!</strong> Your question has been submitted.
                        </div>";
            }
            if (isset($_GET['error'])) {
                echo "<div class='alert alert-danger'>
                            <strong>Sorry!</strong> Your question has not been submitted.
                        </div>";
            }
            ?>

            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="cat_id" value="<?php echo $category_id  ?>" id="">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="quest_t" value="<?php echo $quest_title  ?>" id="quest_t">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="" id="">
                </div>

                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <button id="submit-btn" class="btn-primary" type="submit" name="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

<?php
if (isset($_POST['submit'])) {
    $quest_t = $_POST['quest_t'];

    $update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
    $run_update = mysqli_query($conn, $update);

    if ($run_update) {
        echo "<script>window.open('index?detail_customer=$quest_id&success', '_self')</script>";
    }
}
?>

Answer 1

when you define URL to href it will being always redirect to that page

<a class="detail_c_each" href="./index?detail_customer=31"> Details </a>

alternate solution

HTML code

<a class="detail_c_each" herf="javascript:void(0)" data-href="./index?detail_customer=31"> Details </a>

JS code

$(detailCustomerEach).click(function (e) {
    // load section detail customer without reloading
    e.preventDefault();
    let url1 = $(this).attr("data-href");
    setTimeout(() => {
      $(".recent-orders").load(url1 + " .recent-orders", function () {
        window.history.pushState(null, null, url1);
      });
    }, 5000);
  });

I hope this solution will work for you