Search code examples
javascriptphpjqueryajax

'get' variables in easytabs loaded by ajax


Normally in PHP I can use variables passed in like this:

http://localhost:88/myapp/mypage.php?id=552200

$_GET['id'];

I now switched a page to use easytabs (https://os.alfajango.com/easytabs/)

The tabs are initialized on index.php, which has 2 tabs, page1.php and page2.php. in index.php, I have this code to initialize the tabs:

jQuery(function($) {

  var container = $('#ajax-tab-container');

  container.easytabs({
    animate: false,
    cache: false,
    updateHash: true,
    defaultTab: $('#selectedTab').val()
  }).bind('easytabs:after', function(event, $clicked, $targetPanel, response, status, xhr) {
    $('input, textarea, select, button', $('.disable-fields')).prop('readonly', true).prop('disabled', true);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rawgit.com/JangoSteve/jQuery-EasyTabs/master/lib/jquery.easytabs.js"></script>

<div id="ajax-tab-container" class='tab-container'>

  <ul class='etabs'>
    <li class='tab'>
      <a href="Verloop_meldingen.php" data-target="#tab-1">Verloop meldingen</a>
    </li>
    <li class='tab'>
      <a href="openstaande_meldingen.php" data-target="#tab-2">Openstaande meldingen</a>
    </li>
  </ul>

  <div class='panel-container'>
    <div id="tab-1"></div>
    <div id="tab-2"></div>
  </div>
</div>

The problem I have is that in index.php the $_GET variables are available, but in the pages that are loaded in the tabs, they are not.

Any idea how I can get the variables in the subpages?


Solution

  • In the a href's you can just pass the id like you normally would

    like so:

     <a href="Verloop_meldingen.php?id=1" data-target="#tab-1">Verloop meldingen</a> 
     <a href="openstaande_meldingen.php?id=1" data-target="#tab-2">Openstaande meldingen</a>
    

    in your other pages you can get the variables like you normally would with $_GET

    if you need this to change dynamicly you can use javascript to change the href like so:

    $('yourhref selector class/id here').attr('href', 'new href');