• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 429
  • Last Modified:

List Categories and Subcategories using AJAX

I have a list of categories in a table, (4 cells across and 10 rows deep).

I want a list of subcategories to appear in a div, that will appear below the Category, using AJAX., when the Category is clicked.

Then when a sub category is clicked, I would like the other sub-categories to vanish, and sub-categories of the sub-category to appear, again using AJAX to pull the data from the database.

I am using PHP, MySQL and jQuery on the page.

I'd appreciate your guidance on this. I am a pretty good PHP coder, but jQuery and Javascript is new to me.
0
birwin
Asked:
birwin
1 Solution
 
robastaCommented:
In the example below, I used Province (as Category) and City (as SubCategory). So a Province will have x-number of Cities. You will need to add the URLS that return the JSON Data.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <select id="ddlProvinces" name="ddlProvinces" class="inputWidth">
        <option value="0" title="Select a Province"></option>
    </select>
    <select id="ddlCities" name="ddlCities" class="inputWidth hideList">
        <option value="0" title="Select a City"></option>
    </select>

    <script type="text/javascript">

        $.ready(function () {
            $("select[id='Provinces'] option[value='@ViewBag.currProvince']").attr('selected', 'selected');
        });

        $(document).ready(function () {
            var provinceList = $("#ddlProvinces"); //get the province drop downlist
            
            //The Url (/Branches/GetProvinces) returns a JSON list of provinces
            $.getJSON("/Branches/GetProvinces"), function (data) {
                $.each(data, function (i, province) {
                    var option = new Option(province.title, province.id); //for each of the provinces returned, create an Option
                    provinceList.append(option); //Append the Option to your dropdownlist
                });
            });


            //When-ever the Province dropDownlist's change event fires, Get the cities for that provinces (by running the GetCittiesInProvince(int province) method)
            provinceList.change(function () {
                if (provinceList.val() != null) {

                    GetCitiesInProvince(provinceList.val());
                }
                else {
                    $("#error").html("select a province"); // require the user to select something from the province dropdown list

                }

            });

            //Given a ProvinceID, get the cities that correspond
            function GetCitiesInProvince(province) {
                var cityList = $("#ddlCities"); // get the City DropDownList
                cityList.find('option').remove();
                if (province == 0) {
                    cityList.addClass('hideList').removeClass('showListhideList');
                }
                else {
                //the URL at Branches/GetCitiesInProvince?id=12 will return a JSON list of Cities (or Sub-Categories in your case) whose ProvinceID is 12
                    $.getJSON("Branches/GetCitiesInProvince?id=") + province, function (data) {
                        $.each(data, function (i, city) {
                            var option = new Option(city.title, city.id);
                            cityList.append(option);//append the options to the subcategory list 
                        });
                    });
                    cityList.addClass('showList').removeClass('hideList'); //if there are no items returned, hide the dropdownlis for sub categories
                }
            };
    </script>
</body>
</html>

Open in new window

0
 
birwinAuthor Commented:
Thank you. I apologize for the delay awarding points.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now