# Solved: Jquery UI Ajax tabs?



## Gesp (Nov 29, 2008)

Hi there,

Using the JQuery UI Ajax Tabs, how can I load external content on another place on the page?

Thanks in advance


----------



## ehymel (Aug 12, 2007)

Unless I don't understand your question, I think the answer is well documented on the jqueryui.com website. Try this link. Let us know if this isn't what you are wanting.


----------



## Gesp (Nov 29, 2008)

Where? If you make an ajax tab plugin it loads the ajax info right below or where your buttons are. What if I want a button on a different place of the page open the same content?


----------



## ehymel (Aug 12, 2007)

OK, I understand now.

I use the jqueryui button element to do this. Works great for me.


----------



## Gesp (Nov 29, 2008)

I don`t think I`m being very clear.

How can I use the JQuery UI Button to do this?


----------



## ehymel (Aug 12, 2007)

My understanding of what you want is to click on something that looks like one of the tabs from the jquery ui tabs method and have this load content in another part of the page using ajax. So, just turn something on your page to a nice-looking button. Then bind a click event to that button that updates another part of the page via ajax.

Here is some code from one of my sites. I turn a series of links to good looking buttons. The last link in the list updates the div element of id "codesList".


```
<div id="pt_buttons">
    <a href="/start.php">Open another</a>
    <a href="/start.php?ptid=1&show=summary">Summarize</a>
    <a href="#" id="showCodesToolbar">Codes toolbar</a>
</div>
<div id="codesList"></div>

...


<script type="text/javascript"> 
    $('#pt_buttons a').button();

    $('#showCodesToolbar).click(function(){
        $.get('includes/codesSelectorBox.php', {addCourse: '1'},
            function(data) {
                $('#codesList').html(data);
            });
    });
</script>
```
Hopefully this is what you are looking for?


----------



## Gesp (Nov 29, 2008)

hmm, could you make the same example in an Jquery ajax tab context, please?


----------



## ehymel (Aug 12, 2007)

I've not used the tabs feature of jqueryui, so I would have to play with it to see how to exactly implement what you want. From what I understand from the documentation, the html markup for the container element that gets modified after clicking on a tab is generated on the fly. That's why it's confusing to figure out how to modify an existing page element in the way that I have done with the buttons in my above example.

However, skimming the documentation page again it looks like there is a way to specify the container element to be an existing page element. From the documentation page:



> Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:
> 
> [*] ...
> and a container like:
> ...


Seems like a real hack, but worth a try if you're really wanting to use the tabs feature.


----------



## Gesp (Nov 29, 2008)

Thats good stuff, but it attaches the element where you load o the one with the buttons, at least for me.


----------



## Gesp (Nov 29, 2008)

Never mind, Its perfect now, Thanks


----------



## ehymel (Aug 12, 2007)

Fantastic! Do you mind sharing which approach worked?


----------



## Gesp (Nov 29, 2008)

Its what you told me, the title of a link should be the same as the element where your want it to load.

But as the element gets automatically atached to the button you are using, you should then give the one thats displaying the content "position:absolute", to show him every where you want.


----------

