Open new pages/links inside the tab

Question

I found interesting how the system opens the pages "within tabs" and I’m trying to make a similar.

I’m having trouble opening the links, but it doesn’t work, what my mistake?

$(document).ready(function() {
  //add ajax tabs
  $("#addNewAjaxTab").dynatabs({
    tabBodyID: "addajaxtabbody",
    showCloseBtn: true,
    confirmDelete: true
  });
});

function addNewTab(e) {
  $.addDynaTab({
    tabID: 'myTab',
    type: 'ajax',
    url: e + '.php',
    method: 'get',
    dtype: 'html',
    params: {},
    tabTitle: 'New Ajax Tab'
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/jQuery-Tabbed-Interface-With-Dynamic-Closeable-Tabs-Dynatabs/tabs.css" rel="stylesheet" />
<script src="https://www.jqueryscript.net/demo/jQuery-Tabbed-Interface-With-Dynamic-Closeable-Tabs-Dynatabs/tdi.tabs.js"></script>

<p>
  <a href="#" id="addNewAjaxTab" onclick="javascript:addNewTab('pedido');">Link 1</a><br />
  <a href="#" id="addNewAjaxTab" onclick="javascript:addNewTab('pdvInterno');">Link 2</a><br/>

</p>


<div class="tabbable">
  <ul id="myTab" class="nav nav-tabs">
    <li class="active">
      <a href="#tabview1" data-toggle="tab">Home</a>
    </li>
    <li>
      <a href="#tabview2" data-toggle="tab">Messages</a>
    </li>
  </ul>

  <div id="addajaxtabbody" class="tab-content tabcontents">
    <div class="tab-pane in active" id="tabview1">
      home tab content
    </div>
    <div class="tab-pane" id="tabview2">
      profile tab content
    </div>
  </div>
</div>

Answer 1

The first problem is to insert pages into hrefs of the links:

<a href="link1.php"...
<a href="link2.php"...
<a href="link3.php"...

The use of multiple links to create a tab only makes sense when you want to pass some individual parameter of each link, creating a tab with a specific content passed via parameter to Ajax.

Another nonsense is to use a page .html in Ajax using multiple links, as seen above. The page .html will not be able to receive parameters and return code according to these parameters. The code returned in Ajax will be the contents of the tab.

Let’s fix this:

First thing is to put # us hrefs, not to leave the current page:

<p>
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab();">Link 1</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab();">Link 2</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab();">Link 3</a>
</p>

If you want each link to send its own content to the new tab, add a parameter in onclick="javascript:addNewTab();", in this way:

onclick="javascript:addNewTab('algum_parametro');"

This parameter will be sent via Ajax to a page (see below) that will return a value or code according to this parameter.

So that part of the code would be:

<p>
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('algum_parametro');">Link 1</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('outro_parametro');">Link 2</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('mais_um_parametro');">Link 3</a>
</p>

See that each link is sending its own parameter, which will be received in Ajax this way:

function addNewTab(e) {

  $.addDynaTab({
    tabID: 'addajaxtab',
    type: 'ajax',
    url: 'pagina.php',
    method: 'get',
    dtype: 'html',
    params: { parametro: e },
    tabTitle: 'New Ajax Tab'
  });
}

I added a parameter e in the function that will be the variable sent by the links and passed in Ajax params: { parametro: e },.

See that the target page of Ajax is a .php, that will receive the variable parametro via $_GET['parametro']; and return what you want based on the sent parameter, and this return will be the contents of the new tab.

I noticed that this plugin is not compatible with newer versions of jQuery. I tested in version 3 and it didn’t work.

If you want to call Ajax on different pages (and not just one pagina.php), the logic is the same: send in javascript:addNewTab(); a parameter that can be the page you want to use, for example:

<p>
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('link1');">Link 1</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('link2');">Link 2</a><br />
  <a href="#" name="addNewAjaxTab" id="addNewAjaxTab" onclick="javascript:addNewTab('link3');">Link 3</a>
</p>

And in Ajax, change the target page dynamically:

function addNewTab(e) {

  $.addDynaTab({
    tabID: 'addajaxtab',
    type: 'ajax',
    url: e+'.php', // <-- aqui
    method: 'get',
    dtype: 'html',
    params: {},
    tabTitle: 'New Ajax Tab'
  });
}

This is all very flexible and you can use it as you wish. If you are going to explain everything here will give a huge answer, more than is already. For example, you can use buttons instead of links <a> to add the tabs, is even better in my opinion.