试图 ajax 在引导选项卡中加载 php 表单

Question

上下文

我有一个引导选项卡式导航栏。最后一个选项卡使用 khakiout 的答案 here 动态生成新选项卡；但是我扩展了该功能，以便“+tab”包含一个下拉列表。下拉列表依次生成明显不同的选项卡（使用数据目标）。单击时，会生成一个选项卡并触发 ajax 调用以将 php 表单（由下拉列表定义）加载到该选项卡中。

问题

单击下拉选项时，会生成选项卡，但没有加载表单。

尝试修复

1. 我尝试改变路径变量以适应相对或绝对路径。什么都没有发生。
2. 我添加了一个回调函数，如果成功，控制台记录请求。没有任何记录。
3. 我已将有问题的加载语句包装在 try/catch 中。没有发现任何错误，因此 console.log(err) 永远不会运行。
4. 我还在 try 块之前添加了一个 console.log(path+form) 和 console.log(F) 以确认变量已实例化。他们是;并且 F 与正确的选择相匹配。
5. 使用 Chrome 的调试工具，我可以确认 .load() 正在运行；不过，我无法理解它在做什么，因为大部分逻辑都在带有混淆变量名的 return 语句中。

其他说明

1. 由于其他开发人员编写 php 表单的方式，<form> 标记直接存在于表单之外。
2. 表单必须是 php，因为它加载依赖于使用路由实例化的 php 变量的选择器。

片段

if (window.location.pathname === "/foo/bar") { //aplication route
  $(document).ready(generalFormReady);
}

function generalFormReady() {
  $("#tabTabs")
    //nav to tab
    .on("click", "a", function(e) {
      e.preventDefault();
      if (!$(this).hasClass('add-tab')) {
        $(this).tab('show');
      }
    })
    //remove tab
    .on("click", "span", function() {
      var anchor = $(this).siblings('a');
      $(anchor.attr('href')).remove();
      $(this).parent().remove();
      $(".nav-tabs li").children('a').first().click();
    });
  $('.add-tab')
    //create tab
    .click(function(e) {
      e.preventDefault();
      tabgroup = $("#tabTabs");
      var id = tabgroup.children().length;
      var path = "/path/to/php/includes/";
      var formFile = $(this).data("target") + ".php";
      var title = $(this).text();
      //append tab button
      tabgroup.children().last().before(
        '<li><a href="#leg_' + id + '">' +
        title + ' (id:' + id + ')' +
        '</a> <span class="glyphicon glyphicon-remove"></span></li>'
      );
      //append tab content
      $('.tab-content').append(
        '<div class="tab-pane" id="leg_' + id + '">' +
        '<form id="Form' + id + '">' +
        "<h1>foo</h1>" +
        '</form>' +
        '</div>'
      );
      F = $("Form" + id);
      try {
        F.load(path + formFile, function(response, status, xhr) {
          console.log(response, status, xhr);
        });
      } catch (err) {
        console.log(err);
      }
      //nav to new tab
      $('a[href$=' + id + ']').click();
    });
}

.container {
  margin-top: 10px;
}

.nav-tabs>li {
  position: relative;
}

.nav-tabs>li>a {
  display: inline-block;
}

.nav-tabs>li>span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}

.nav-tabs>li:hover>span {
  display: inline-block;
}

#legs {
  border-color: #dddddd;
  border-width: 1px;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<ul id="tabTabs" class="nav nav-tabs" role="tablist">
  <li>
    <a id="addTab" href="#" class="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ Add tab <span class="caret"></span></a>
    <ul class="dropdown-menu" aria-labelledby="addTab">
      <li><a href="#" class="add-tab" data-target="phpform1">+ type 1</a></li>
      <li><a href="#" class="add-tab" data-target="phpform2">+ type 2</a></li>
      <li><a href="#" class="add-tab" data-target="phpform3">+ type 3</a></li>
      <li><a href="#" class="add-tab" data-target="phpform4">+ type 4</a></li>
    </ul>
  </li>
</ul>
<div class="tab-content">
</div>

Answer 1

原来有两个问题：

选择器失败

F = $("Form" + id); 本来应该 F = $("#Form" + id);。原始选择器缺少 # 与 id 的匹配。 这导致选择器抓取了错误的表单。修复此问题允许 console.logs 捕获错误。

路径失败

传递给.load() 的 URL 不正确，因此产生 404 错误。直接在浏览器中访问它确认了正确的路径应该是什么。我的错误是将localhost/ 混淆为我的应用程序根，而不是public_html/。