提交带有Ajax的表单并将位置重新加载到当前选项卡中

Question

我有一个网页，其中包含一些不同的标签，其中一些包含表格。成功提交任何表单后，我都会重新加载页面，但它会一直转到默认的第一个选项卡。我正在尝试设置一个存储变量以帮助切换，如果它是第一次加载页面（打开默认选项卡）或正在通过表单提交重新加载（将该选项卡的ID作为变量传递并在重新加载时加载）

如何在特定标签上成功重新加载？

下面是我正在调用的带有ajax的表单提交功能

    //submit all forms on page
    const submitForm = (formID, targetTab) => {
        let theForm = document.getElementById(formID);

        //function will determine whichform is being passed and send data to PHP page
        //on reload trying to detect current tab and load to that location
        $.ajax({
            type: 'POST',
            url: $(theForm).attr("action"),
            data: $(theForm).serialize(),
            success: function (response) {
                location.reload()
                initFunction(targetTab)
            }
        });
    }

这是处理要重新加载的选项卡的函数，我最初在页面加载时将其称为问题所在？

   const initFunction = (tab) => {
        let reloading = sessionStorage.getItem("reloading");
        if (!reloading) {
            document.getElementById(tab).click();
            sessionStorage.setItem("reloading", 'true');
        } else {
            document.getElementById(tab).click();
        }
    };

    //clicks on default first tab
    window.onload = initFunction('defaultOpen');

这是我的导航标签按钮和一个表单提交按钮的示例

//nav
    <li class="nav-item">
        <a class="nav-link bg-primary tabLink text-white" href="#" id="defaultOpen" 
         onclick="changeTab(event, 'companytab')">
        <i class="fa fa-building"></i>&nbsp;Company</a>
     </li>

   <li class="nav-item ">
      <a class="nav-link bg-primary tabLink text-white" href="#"
          onclick="changeTab(event, 'contacttab')" id="contacttabbtn">
          <i class="fa fa-user"></i>&nbsp;Contacts</a>
  </li>

//button 
   <button onclick="submitForm('updateProspect', 'defaultOpen')"
              id="saveBtn"class="float-right d-none btn btn-sm btn-success"><i class="fa fa-save"> 
              </i>&nbsp;Save
   </button>

谢谢！

Answer 1

[也许尝试将选项卡的ID作为参数传递给PHP，然后从脚本中返回它。然后，您可以以ajax形式响应（成功：{}）到达它。然后，您可以根据需要使用PHP脚本返回的ID来操纵选项卡。