Question

Beginner. I have a tab control that has content loaded dynamically via links. These are simple text files. So you click tab 3, it grabs the content from the text file and loads it. real basic.

On tab 2 i have a button that I want to get to tab 3 with passing an ID value. I can do this in the worst way possible to make it work but I have another issue. If i use:

$('#myTabs').tabs({selected:2});

it opens tab3 but it will not load the content. Everything else works fine, I just don’t know what I am missing, or doing wrong in order to get the content to load.

Appreciate any help as always!

This is what I have for loading the tabs

$(document).ready(function () {
   $('#myTabs').tabs({selected: '0'});  
});

<div id='myTabs'>
<ul>
<li><a href="#tabs-1">Overview</a></li>
<li><a href="/scripts/content2.txt">Content Area 2</a></li>
<li><a href="/scripts/content3.txt">Content Area 3</a></li>
</ul>
</div>

won’t bother with the content for tab 1…all this works. I can click any tab and get what I am suppose to get. so lets say that content3.txt contains this (also each text contain links to libraries and style sheets):

$(document).ready(function() {
     $('#testing').text('Hello World');
});

and content2.txt contains a button click event that switches to content3.txt:

$('#thisBtn').click(function () {
$('#myTabs').tabs({selected:2});
$('#myTabs').load('/scripts/content3.txt', function () {
   alert('worked');
});

the above wipes out the tabs…i guess because I am using the div that the tabs are contained within and loading different content to it? So my issue is that the div ‘texting’ is within the text file and doesn’t get loaded until the tab is selected? does that make sense.

finally how to I change this/ improve this? etc.

Answer 1

You are not loading any content from what you have given us, you are only switching tabs. You would have to use something like jquery load(). The below code will load the contents of myTextFile.txt into the element with the id of result.

$('#result').load('myTextFile.txt', function() {
  alert('Load was performed.');
});

The general layout of jquery ui tabs is the following html:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div> <--- Load content into these divs
    <div id="tabs-3"></div>
</div>

As you can see each tab has an id assigned to it. You need to load the content into the correct div that corresponds with the tab you are wanting to load.