Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
I want to show total images on load so its getting succesfully but now want to show on condition base like if color is 'red' then should show only red color images in datalist..I tried and getting perticular data but showing all images.. so how to show only those images which getting data in Jquery?

/asp.net datalist control/

<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="6">
    <ItemTemplate>
        <table class="item">
            <tr>
                <td>
                    <img id="Image1" alt='<%# Eval("ImagePath") %>' src='<%# Eval("ImagePath") %>' class="image" height="60px" width="100px" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label class="postal" Height="20px" Width="100px" runat="server" Text='<%# Eval("ImageAssignedName") %>' Font-Size="10px"></asp:Label>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>


/*on page load showing these below data images*/

$(function () {
        $("[id*=dlCustomers]").hide();
        $.ajax({
            type: "POST",
            url: "Default2.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    });
function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
        var rowCount = Math.ceil(customers.length / repeatColumns);
        var i = 0;
        while (i < repeatColumns * rowCount) {
            var row = $("[id*=dlCustomers] tr").eq(0).clone(true);

            for (var j = 0; j < repeatColumns; j++) {
                var customer = $(customers[i]);
                if (customer.length == 0) {
                    $("table:last", row).remove();
                } else {

                    $(".postal", row).eq(j).html(customer.find("ImageAssignedName").text());
                    $(".image", row).eq(j).attr("src", customer.find("ImagePath").text());
                    $(".image", row).eq(j).attr("alt", customer.find("ImagePath").text());
                }
                i++;
            }
            $("[id*=dlCustomers]").append(row);
        }
        $("[id*=dlCustomers] tr").eq(0).remove();
        $("[id*=dlCustomers]").show();
    }


/tried to display dropdown selected value images/

C#
$(document).ready(function () {
        $('#ddlColor').on('change', function () {
            var color = $('#ddlColor :selected').text();
            alert(color);
            $("[id*=dlCustomers]").hide();
            $.ajax({
                type: "POST",
                url: "Default2.aspx/GetColorFabrics",
                data: "{'color':'" + color + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessColor,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
    });

function OnSuccessColor(response) {
        alert('hello');
        alert(response.d);
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
        var rowCount = Math.ceil(customers.length / repeatColumns);
        var i = 0;
        while (i < repeatColumns * rowCount) {


            for (var j = 0; j < repeatColumns; j++) {
                var customer = $(customers[i]);
                if (customer.length == 0) {
                    $("table:last", row).remove();
                } else {

                    $(".postal", row).eq(j).html(customer.find("ImageAssignedName").text());
                    $(".image", row).eq(j).attr("src", customer.find("ImagePath").text());
                    $(".image", row).eq(j).attr("alt", customer.find("ImagePath").text());
                }
                i++;
            }
            $("[id*=dlCustomers]").append(row);
        }
        $("[id*=dlCustomers] tr").eq(0).remove();
        $("[id*=dlCustomers]").show();
    }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900