jQuery UI and loading data into a tab

Question

I'm using JQuery UI to create a tab, and I want to the contents of my php file to be entered into this tab. I start by creating a tab, and then selecting it.

function createTab2() {
       //create a tab
       $("#tabs").tabs("add","#tabs-2","Second Tab");
       $("#tabs-2").css("display","block");   
       $('#tabs').tabs('select', "#tabs-2");        
       $.get('tab2.php', function(data) {
            $('.result').html(data);
            alert('Load was performed.');
        });
}

I tried using the JQuery .get function to return the data and it works fine as an alert appears. However, the contents are not entered into the tab - I just see them listed in my Javascript console.

How can I make the contents of the php file appear in this tab?

When you say contents do you mean raw data or data formatted in html ? — BentOnCoding
– BentOnCoding, Commented Apr 2, 2012 at 19:12
in jqueryui.com, there is a demo to load content via ajax. check it out jqueryui.com/demos/tabs/#ajax — DG3
– DG3, Commented Apr 2, 2012 at 19:13
@DG3 Nice - I missed that. Do you know how I combine that with the creation of a tab? I can see how I use it in the loading of an existing tab. There are no divs within the tab after I create it (another problem that I did not notice). — djq
– djq, Commented Apr 2, 2012 at 19:21

jarchuleta · Accepted Answer · 2012-04-02 19:22:20Z

1

In your markup for tab 2 you need add an href to the source html.

<div id="tabs">
 <ul>
     <li><a ><span>Content 1</span></a></li>
     <li><a href="tab2.php"><span id="tabs-2">Content 2</span></a></li>
     <li><a ><span>Content 3</span></a></li>
 </ul>
</div>

or you can try load the tab directly.

$("#tabs-2").load('tab2.php');

source

answered Apr 2, 2012 at 19:22

jarchuleta

1,2398 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

djq Over a year ago

wow! $("#tabs-2").load('tab2.php'); works. Unfortunately it does not seem to pick up on the css styles.

jarchuleta Over a year ago

it will only pick up styles that are included in the calling page.

djq Over a year ago

The styles are picked up if I have a static page. If I replace this tab 2 with php, the styles are no longer applied.

Collectives™ on Stack Overflow

jQuery UI and loading data into a tab

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related