jQuery UI - Tab Issues

**sciguyryan** · Dec 14th, 2009, 06:26 PM

Hi guys.

This has been irritating me for a while so hopefully someone here can help me out with it.

I'm setting up a tab bar where I want each tab to open the URL in the current page (not via ajax). I've tried the code given in the jQuery UI documents:

Code:

$(function() {
  $('#tab-bar').tabs({
    select: function(event, ui) {
      var url = $.data(ui.tab, 'load.tabs');
      if (url)
      {
        location.href = url;
        return false;
      }
      return true;
    }
  });
});

But it doesn't seem to work. When the tab is clicked, the URL does not load in the current page and instead the AJAX preview still shows. Any idea what could be going on here?

**SambaNeko** · Dec 14th, 2009, 07:35 PM

Hmm, just tried it myself and had no problems. Could you post your markup perhaps?

**sciguyryan** · Dec 15th, 2009, 03:10 AM

Sure. You can see the test page here.

**SambaNeko** · Dec 15th, 2009, 12:13 PM

This is a guess, but it may be problematic that you're loading the home page into the first tab on the home page. As a result, after it loads, there are two elements with id="tab-bar", and the loaded-in home page will run your jQuery again and mess things up.

Try using very simple pages for the tab links (like just "<p>Hello World</p>") to test things out.

**sciguyryan** · Dec 15th, 2009, 12:39 PM

You could have a point there but I was hoping to have the "home" page displayed first. Hmm. I'll have to figure out how to do that another way since that seems to have solved it. Thanks for the tip.

Do you know of a way to make it so that none of the tabs load their content automatically?

Cheers.

**SambaNeko** · Dec 15th, 2009, 03:55 PM

I'm not really familiar with this plugin, so I don't know how to stop the auto-loading, but it may be more beneficial to work around it instead...

I've found that this is actually a frequent "problem" when using AJAX - needing pages to load in one way when requested directly, and in another way when requested via AJAX. I don't know if this is the best approach, but I deal with it by setting up my AJAX-loaded pages like this:

Code:

<?php
//include any globally necessary files
require_once("global-file.php");

//make a function that shows the page's content
function writePage(){
  ?>
  <h1>Hello, this is my page</h1>
  <p>Paragraph!</p>
  <?php
}

//if the page was requested by AJAX, just spit out the content and stop here
if(isset($_GET['ajaxCall'])){
  writePage();
  exit;
}

//otherwise, continue with the page as normal
?>
<html>
<head>
<!-- etc. -->

<?php
//echo the content here as well, for when this page is requested normally
writePage();
?>

</body>
</html>

It may not be entirely intuitive, but it works. You'd need to append the "ajaxCall" (or whatever you want to call it) variable to your page requests, which you could do like so:

Code:

$('#tab-bar ul a').each(function(){
  var newURL = $(this).attr("href") + "?ajaxCall=1";
  $(this).attr("href",newURL)
});

It's important to append the variable via Javascript rather than manually adding it yourself, because you only want the variable to be there if Javascript is enabled.

**sciguyryan** · Dec 16th, 2009, 06:13 AM

That's an interesting solution SambaNeko. I was thinking of something along those lines myself actually. I've had similar problems with AJAX in the past and found solutions like that to be invaluable.

**sciguyryan** · Dec 20th, 2009, 07:16 AM

I'm having more issues with the jQuery UI tabs than I wanted so I think I'll do the long way around and write my own tab system.

**SambaNeko** · Dec 20th, 2009, 11:47 AM

If you Google "jquery tabs" you can find others' implementations that may be more suitable to your needs. Or you can certainly write your own.

Thread: jQuery UI - Tab Issues

Thread Tools

Display

jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Re: jQuery UI - Tab Issues

Posting Permissions