How to load Dynamic data in Tabs

(JQUERY)


Hi,
In this article, i will discuss about how to load dynamic data to the tab. On the click of the tab i got the tabname and tabindex,based on that i made ajax call and loaded  the dynamic data to the clicked tab.

View:-

@{
    ViewBag.Title = "loadingtabsDynamically";
}


    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

<h2>loadingtabsDynamically</h2>

<div id="div_tab">
    <ul>
        <li>
            <a href="#div_tab1">Tab1</a>
        </li>
        <li>
            <a href="#div_tab2">Tab2</a>
        </li>
        <li>
            <a href="#div_tab3">Tab3</a>
        </li>
    </ul>

    <div id="div_tab1">
        <h1>Inside tab1</h1>
    </div>
    <div id="div_tab2">
        <h1>Inside tab2</h1>
    </div>
    <div id="div_tab3">
        <h1>Inside tab3</h1>
    </div>
</div>


<script type="text/javascript">
    $(function () {

        $('#div_tab').tabs();

    });

    //In the tab select event, get the selected tab
    $("#div_tab").on("tabsselect", function (event, ui) {
        var tabnumber = ui.index;
        var tabName = $(ui.tab).text();

        if (tabName == "Tab1") {
            //make ajax call here to load data dynamically for tab1
            $('#div_tab1').html('<b>tab1 data loaded dynamically</b>');
        }
        else if (tabName == "Tab2") {
            //make ajax call here to load data dynamically for tab2
            $('#div_tab2').html('<b>tab2 data loaded dynamically</b>');
        }
        else if (tabName == "Tab3") {
            //make ajax call here to load data dynamically for tab3
            $('#div_tab3').html('<b>tab3 data loaded dynamically</b>');
        }

    });
</script>

Controller:-


  public ActionResult loadingtabsDynamically()
        {
            return View();
        }

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/20/2013
7/20/2013
Download PDF

Comments