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

Question

Context

I have a bootstrap tabbed nav-bar. The last tab uses khakiout's answer here to dynamically generate new tabs;however I've extended that functionality so that "+tab" contains a drop down. The drop down in turn is generates distinctly different tabs (using data-target). When clicked, a tab is generated and an ajax call is fired to load a php form (defined by the drop down) into that tab.

The Problem

When the drop down's option is clicked, the tab is generated, but the form is not loaded in.

Attempted Fixes

1. I've tried varying my path variable to accommodate relative or absolute paths. Nothing happens.
2. I've added a callback function that console.logs the request if successful. Nothing is logged.
3. I've wrapped the offending load statement in a try/catch. No error is caught, so the console.log(err) is never run.
4. I also added a console.log(path+form) and console.log(F) before the try block to confirm the variables are instantiated. They are; and F was matched to the correct selection.
5. Using Chrome's debugging tool, I can confirm that .load() is running; though, I can't make sense of what it's doing since most of the logic is in the return statement w/ obfuscated variable names.

Other Notes

1. Due to how other developers wrote the php form the <form> tags exist immediately outside the form.
2. The form must be php because it loads selectors dependent on php variables instantiated with the route.

Snippet

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>

</div>

Answer 1

Turns out there were 2 issues:

Selector Falure

F = $("Form" + id); should have been F = $("#Form" + id);. The original selector was missing # match against ids. This resulted in the selector grabbing the wrong form. Fixing this allows the console.logs to catch the errors.

Path Failure

The URL passed to .load() was incorrect, thus generating 404 errors. Accessing it directly in the browser confirmed what the proper path should've been. My mistake was confusing localhost/ as my application root, instead of public_html/.