Selection tab and onselect code conflict - infinite reloading of page

Question

I use JQueryUI TABS plugin.

There is my tabs structure.

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

I use such code to select and load first link in tab, when tab is selected. It works itself.

$(function() {
    $( "#tabs" ).tabs();

        // Activate first link on tab
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
     window.location.href = $(ui.panel).find('a:first').attr('href');
   });  
});

BUT in my task addition code for selecting tab by URL parameters strongly nessesary. So if visitor opened link from second tab-group, second tab must be showed opened, not default first one.*

I have working code which show correct tab when link from this tab is loaded (no AJAX or such, just ussual links). $URL['part'] is variable I recieve from my URL in engine, this works fine separately.

<?php if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} ?>

BUT when I use both these code-blocks it cause page repeatedly infinite reload :-(

UPDATED:

Notice, that both of blocks of code use SELECT event, that why the looping occurs.

UPDATED2:

I suppose, if use ONCLICK for loading link when tab is selected, and SELECT on activation tab due to URL settings, it can solve the problem. But I don't know how to write this in code.

Answer 1

This is complete final solution I found, which WORKS (crossbrowser)!

Creates tabs

$(function() {
    $( "#tabs" ).tabs();
});

Select the tab which must be active for the current URL we have

<?php 
if(@$URL['part']=='part1'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-1"); });'; 
} 
if(@$URL['part']=='part2'){
    echo '$(function() { $("#tabs").tabs("select","#tabs-2"); });'; 
} 
?>

The below code MUST be after we started tabs and selected which one is now active, otherwise we will recieve infinite url-reloading!

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            window.location.href = $(ui.panel).find('a:first').attr('href');
        }
    });
});

So, when I moved tab selection based on URL to the begining of code, this solved all the issues and make solution this simple!

Answer 2

Does this work if you move the processing inside the tabs creation:

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.href = $(ui.panel).find('a:first').attr('href');
    }
});

In a study of you code, it might be better to check the URL and not go anywhere if it is the same page, either by link OR by tab select:

$('#tabs').tabs({
    select: function(event, ui) {
        checkUrl(event, ui.panel);
    }
});
// handle link click on current tab
$('div>a').click(function(event) {
    checkUrl(event, event.target);
});

function checkUrl(event, ui) {
    var ehref = $(event.target).attr('href');
    var wl = window.location.href;
    var currentLocation = typeof ehref == "undefined" ? wl: ehref;
    var newLocation = $(ui.panel).find('a:first').attr('href');
    if (currentLocation != newLocation) {
        window.location.href = newLocation;
    }
};

In reference to your comment, there is a create handler so you would have the bind inside that:

$('#tabs').tabs({
    create: function(event, ui) {
       $( "#tabs" ).bind( "tabsselect", function(event, ui) {
           window.location.href = $(ui.panel).find('a:first').attr('href');
       });
    }
});

but I am unsure of the event firing on the creation sequence, and if the select of the tab occurs before or after the create event (I would think after) as I have not tested this.

Answer 3

---

UPDATED:

This solution isn't correct! I keep it for historical reasons and comments are below it. https://stackoverflow.com/a/10642137/1368570 - this is working correct solution: clear and simple

---

I have found solution very close to task:

<script language="JavaScript" type="text/javascript">
function MySelect(event, ui){
    // selected - currently selected tab (string)
    var clicked_tab = '' + ui.index //clicked tab

    if(selected !== clicked_tab ){
        //So this code will works ONLY when another tab is selected, so no infinite loop        
        //alert(selected+'/'+ui.index);

            // Activate first link on tab
       $( "#tabs" ).bind( "tabsselect", function(event, ui) {
         window.location.href = $(ui.panel).find('a:first').attr('href');
       });
    }
}   

$(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            MySelect(event, ui);
        }
     });
});

        //retrieve the index of the currently selected tab
var tabs = $('#tabs').tabs();
var selected = '' + tabs.tabs('option', 'selected'); // from zero 0
</script>

Code to acrivate propper TAB basing on the URL parameter processed in my engine

<?php 
if(@$URL['part']=='part1'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-1"); });</script>';    
} 
if(@$URL['part']=='part2'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-2"); });</script>';    
} 
if(@$URL['part']=='part3'){
    echo '<script>$(function() { $("#tabs").tabs("select","#tabs-3"); });</script>';    
}
?>

PROBLEM:

When I go from 1-st tab to 2-d or 3-d, window.location.href don't work, URL dont changes.

If I go from any tab except frist, all works perfectly.

I am too tired today to find solution to this issue, if any one have ideas, will be glad to hear them!

Also, when I uncomment alert in my code, I see that selected var is [object Object]. So if I compare object with non-object, why this complete solution works well in most cases?

Answer 4

If I read it right, then you will be having same code in the HTMLs in the link, i.e.

<div id="tabs">
    <ul>
        <li><a href='#tabs-1'>TabGroup1</a></li>
        <li><a href='#tabs-2'>TabGroup2</a></li>            
    </ul>
    <div id='tabs-1'>
        <a href='tab1_link1.html'>TabGroup1-link1</a>
        <a href='tab1_link2.html'>TabGroup1-link2</a>
    </div>
    <div id='tabs-2'>
        <a href='tab2_link1.html'>TabGroup2-link1</a>
        <a href='tab2_link2.html'>TabGroup2-link2</a>
    </div>
</div>

and you will be calling the $( "#tabs" ).tabs() on that page. IF so, why not use $( "#tabs" ).tabs({ active: 1 }) in the page where the link is supposed to redirect?