DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Roger has posted 34 posts at DZone. View Full User Profile

JQuery Tabs: Filtering Ajax Data Based On Drop-Down

  • submit to reddit
        // jQuery makes loading Ajax form data very simple. But what if you want to filter your 
// Ajax data based on HTTP GET parameters? Still pretty easy, it turns out.
// You can use the jQuery tabs "url" option to substitute the new target for the 
// GET request. 
// Things to note here: when you're within a tabs event, getting the target URL
// for the Ajax request is easy: var url = $.data(, 'load.tabs');
// It's a little more complicated when you're outside a tab event, but not by much.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<link rel="stylesheet" href="css/ui.all.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>


        select: function(event,ui) {
            var url = $.data(, 'load.tabs');
            var id = $('#teamId').attr("selectedIndex");
            var newName = $('#teamId')[0].options[id].text;
            var newUrl = url + "?id=" + id + "&name=" + newName;
            $(this).tabs("url", ui.index, newUrl);

        type: "POST",
        target: "#results"

        var id = $('#teamId').attr("selectedIndex");
        var newName = $('#teamId')[0].options[id].text;
        var selectedTab = $("#tabs").tabs().tabs("option", "selected");
        var href = $("#tabs a").get(selectedTab);
        var url = $.data(href, "href.tabs");
        var newUrl = url + "?id=" + id + "&name=" + newName;
        $("#tabs").tabs().tabs("url", selectedTab, newUrl);
        $("#tabs").tabs().tabs("load", selectedTab);



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <h1>Hello World!</h1>

        <form name="teamForm" action="showBeer.html" method="POST" id="teamForm">
            <select name="teamId" id="teamId">
                <option value="1">FirstThing</option>
                <option value="2">SecondThing</option>
                <option value="3">ThirdThing</option>
                <option value="4">FourthThing</option>

            <div id="tabs">
                    <li><a href="tab1.html">tab1</a></li>
                    <li><a href="tab2.html">tab2</a></li>
                    <li><a href="tab3.html">tab3</a></li>

            <input type="submit" value="Submit" />

        <div id="results"></div>


// Add a request-handler to the back end (I'm using servlets and JSP in this example), 
// and code your tab pages as follows:

<%@ taglib prefix="c" uri="" %>

<!-- results of choosing the drop-down -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<b>Successfully called tab one</b><br />
The chosen drop-down value is: <c:out value="${dropdown}" />