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

;)