Open new pages / links within tab

Question

Open new pages / links within tab

Navigation

#1 by (1 votes)

3

I found it interesting how the system opens the pages "inside tabs" and I'm trying to make a similar one.

I'mhavingtroubleopeningthelinks,butitdoesnotwork,what'smyerror?

$(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><linkhref="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><ahref="#" 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>

php javascript jquery

asked by anonymous 29.12.2017 / 22:16

1 answer

How to make two Retrofit calls in jail with RxJava? Entity Framework Core 2.0 - Add-Migration does not work

score 1 · Answer 1

The first problem is to insert pages in hrefs of links:

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

Using 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 the Ajax parameter.

Another pointless thing is to use a .html page in Ajax using multiple links, as seen above. The .html page 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 # in hrefs , so you do not 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();" , like this:

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

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

So this part of the code would look like this:

<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 e parameter to the function that will be the variable sent by the links and passed in Ajax in params: { parametro: e }, .

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

I noticed that this plugin is not compatible with newer versions of jQuery. I tested it on version 3 and it did not work.

If you want to call Ajax on different pages (and not just a 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 very flexible and you can use whatever you want according to your needs. If you're going to explain everything here, you're going to have a huge answer, more than you already have. For example, you can use buttons instead of <a> links to add the tabs, it looks even better in my opinion.