use jquery to refresh div tab onclick?

Question

I'm using tabs, but wondering if it's possible to "refresh" tab content onclick?

Answer 1

Yes it is possible, but you dont need onClick event for this I think

use this

<div id="example">
     <ul>
         <li><a href="ajaxpage1.php"><span>Content 1</span></a></li>
         <li><a href="ajaxpage2.php"><span>Content 2</span></a></li>
         <li><a href="ajaxpage3.php"><span>Content 3</span></a></li>
     </ul>
</div>

Notice that: instead of giving the id of the tab's division, a page link given so every time you click on the tabs, it updates it

this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.

ps: I am assuming that you having a working tabs

Answer 2

here's how i do it with ajax in asp.net mvc:

<div id="content">
    <ul>
        <li><a href="#tab0"><span>Details</span></a></li>
        <li><a href="#tab1"><span>Cost</span></a></li>
        <li><a href="#tab2"><span>Bookings</span></a></li>
    </ul>
    <div id="tab0"></div>
    <div id="tab1"></div>
    <div id="tab2"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            var $tabs = $("#content").tabs({
                select: function(e, ui) {
                    var thistab = ui;
                    runMethod(thistab.index);
                }
            });
        });
    });

    function runMethod(tabindex) {
        switch (tabindex) {
            case 0:
                getTabZeroData();
                break;

            case 1:
                getTabOneData();
                break;

            case 2:
                getTabTwoData();
                break;
        }
    }
</script>

<script type="text/javascript">
// ajax getTabnnn methods here...
</script>

each of the getTabnnnData methods runs it's own little ajax routine and the div is populated. This is quite effective as you can also get a little clever and only run the method if the target div is still empty etc..

hope that gives another slant on things.

jim

Answer 3

Simple: http://docs.jquery.com/UI/Tabs

;)