How to display a table of selected items once I select a value from the first drop down list using classic asp, jquery and ajax?

Question

I have a drop down list which is pulled from the product table. Now I need to display a table with the columns of product name and its image but only when the specific product type is clicked from the drop down option. Right now my code is displaying all products when the page loads. The table should display the values Where product = selected product from the drop down list.Currently its not filtering. It is showing up all the products and I realized I need ajax for it. As I am very new to ajax, I tried my best to work well with it but it is not working. Can any one please help me? Here is the code I am working on:

<script>
    $("#ProdID").change(function(){
    var productId = $(this).find('option:selected').val();
    if (productId != '') {
        .ajax({
        async: false,
        type : 'POST',
        url : 'ajax/imageflip.asp',
        data : { productId: productId},
        success : function(responseData) {
        try {
            if (responseData == 1) { //Successful input
                alert("Images shown!");
                $("#wcurdata").html(responseData);
                } else {
                alert("ERROR! No Images!");
                }
                } catch(e) {
            }
                                        }
        });
            } else {
            alert("Please Check the deconstructed Images!");
            }
        });
</script>   

<div id="main">
    <div id="PChoice">
        <% 
        Dim rsbrnd
        SQL = "SELECT DISTINCT(brand) as brand FROM product"
        SET rsbrnd = objConn.Execute(SQL)

        IF NOT (rsbrnd.EOF) THEN

        %>

         Product:
            <select id='ProdID'>
                <option value=1>---- SELECT ----</option>
                <%
                    WHILE NOT rsbrnd.EOF
                        Response.Write "<option value="& rsbrnd("brand")                                    
                        Response.Write ">" & rsbrnd("brand") &"</option>"
                        rsbrnd.MoveNext
                    WEND
                    %>
            </select>
            <% 
                END IF
                rsbrnd.close
                Set rsbrnd = Nothing
                %>
    </div>
    <div id="curtbl">
        <div id="wcurdata">
            <%                                                          
                StrC= "SELECT TOP (200) np.Id, np.imgName, np.brand"&_
                    "FROM NewProduct"&_
                    "WHERE (np.brand = '"& rsbrnd("brand") &"')  

                    set RsC  = Objconn.execute(StrC)
                        IF NOT RsC.EOF THEN                                                         
                            Response.write "<table id= ""details"" width=""100%"" border=1 cellpadding=4 cellspacing=0>"
                                    Response.write "<tr>"   
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>#</b></font>"
                                        Response.write "</td>"                                      
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>Name</b></font>"
                                        Response.write "</td>"
                                        Response.write "<td align=center>"
                                            Response.write "<font color=#ffffff><b>Image</b></font>"
                                        Response.write "</td>"
                                    Response.write "</tr>"
                            countc = 1
                            While NOT RsC.EOF  
                                Response.Write "<tr>"
                                        Response.Write "<td align=center>"
                                            Response.Write "<b>"& countc &".</b>"
                                            countc = countc + 1
                                        Response.Write "</td>"
                                        Response.Write "<td align=center>"
                                            Response.Write RsC("imgname")
                                        Response.Write "</td>"
                                        Response.Write "<td align=center><img style= 'height: 65px; width:65px;' src='http://www.example.com/images/products/"& RsC("imgName") &"'>"
                                        Response.Write "</td>"
                                    Response.Write "</tr>"

                                RsC.Movenext
                            Wend                    
                                Response.Write "</table>"
                            END IF
                            RsC.Close
                            Set RsC = Nothing
                %>
        </div>  
    </div>  
</div>                      

Answer 1

From your description, I don't see that an AJAX call is at all necessary to achieve your aims. It looks like all your table data is available on page load. In order to "filter" it via the select dropdown, you can use good old CSS to show/hide the appropriate rows.

Since you don't want to show the table on page load, just hide it with either a CSS class or an inline style:

<div id="curtbl" class="hidden">

Of course you'll need some CSS:

.hidden {
    display: none;
}

Now you'll need a hook in each table row to identify which product it is -- I recommend a data attribute, since it is data we're identifying. When you write your row, add an attribute:

Response.Write("<tr data-product='" & RsC("imgName") & "' class='hidden'>")

Notice we're also hiding the rows on page load with that same CSS class we're using on the table div.

Ok, here's the dynamic filtering part. In your javascript, when a change event happens on the select element, show the table and the selected product rows:

$("#ProdID").on("change", function() {
    var $select = $(this),
        selected_product = $select.val(),
        $table = $("#details"),
        $selected_rows = $table.find("tr[data-product='" + selected_product + "']");

    // show the table if its still hidden
    $table.removeClass("hidden");
    // hide all the rows 
    $table.find("tr").addClass("hidden");
    // show your selected product rows
    $selected_rows.removeClass("hidden");

});