use jquery to refresh div tab onclick?

I'm using tabs, but wondering i开发者_如何学运维f it's possible to "refresh" tab content onclick?

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

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

Please understand that it is very likely not the best way to do this. But this is what he asked for.

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

<button onclick="tabrefresh()">Refresh Tabs</button>

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

;)