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 Turnau

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

JQuery Tabs: Filtering Ajax Data Based On Drop-Down

09.01.2009

| 5070 views |

        // 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(ui.tab, '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"
    "http://www.w3.org/TR/html4/loose.dtd">

<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>
<script>

$(document).ready(function(){

    $("#tabs").tabs({
        select: function(event,ui) {
            var url = $.data(ui.tab, '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);
        }
    });

    $("#teamForm").ajaxForm({
        type: "POST",
        target: "#results"
    });

    $('#teamId').change(function(){
        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);
    });

});

</script>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <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>
            </select>

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


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

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

    </body>
</html>



// 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="http://java.sun.com/jsp/jstl/core" %>

<!-- results of choosing the drop-down -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

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

Tags: