重定向到dashboard页面并替换dashboard页面的div内容

问题描述 投票:0回答:1

主要问题是,当我单击 Countinue Shopping 按钮时,它将重定向到仪表板,然后将仪表板的 page-description div 替换为product-list.php 这是 Countinue 购物按钮事件的 ajax 请求,

我在 cart.js 中成功收到控制台响应,但无法更改 div,只能重定向到仪表板路由,如何更改仪表板的 div? 我使用了 ajax、jQuery、mvc Composer、核心 php

这是 cart.php 代码部分

//cart.php
<div class="row">
     <div class="col-md-9 text-start">
           <a href="#" class="btn btn-info text-light btn-block rounded-pill fw-bold px-5" id="go- to-shopping"><i class="fas fa-cart-plus mt-1" style="font-size:18px;border-width: 2px;"></i>&nbsp;&nbsp;Countinue Shopping</a>
     </div> 
     <div class="col-md-3">
           <a href="index.php?route=order-list" class="text-end d-flex justify-content-center btn btn-info btn-block rounded-pill fw-bold text-white px-5">CHECKOUT</a>
    </div>
</div>

这是 cart.js 代码部分

//cart.js
  $(document).on("click", "#go-to-shopping", function () {
    var moduleName = $(this).attr("id");
    console.log(moduleName);
    $.ajax({
      url: "../public/index.php",
      method: "POST",
      data: { moduleName: moduleName },
      success: function (response) {
        console.log(response);
         window.location.href = "index.php?route=dashboard";
        $("#page-description").html(response);
      },
      error: function (xhr, status, error) {
        console.error(error);
      },
    });
    return false;
  });

提前致谢

php jquery ajax model-view-controller bootstrap-5
1个回答
0
投票

问题似乎出在 JavaScript 代码的顺序上。在更新“#page-description”div 之前,您将重定向到“index.php?route=dashboard”。 window.location.href 行在 div 替换代码之前执行。

您应该交换这两行的顺序,以便在更新 div 内容后发生重定向。这是更正后的代码:

//cart.js
$(document).on("click", "#go-to-shopping", function () {
  var moduleName = $(this).attr("id");
  console.log(moduleName);
  $.ajax({
    url: "../public/index.php",
    method: "POST",
    data: { moduleName: moduleName },
    success: function (response) {
      console.log(response);
      $("#page-description").html(response, function() {
         window.location.href = "index.php?route=dashboard";
      });
    },
    error: function (xhr, status, error) {
      console.error(error);
    },
  });
  return false;
});
© www.soinside.com 2019 - 2024. All rights reserved.