How to show image in datalist using jquery from sql?

Question

I got data in json and can show data into span but cant display images where as showing 'alt'  which is same as 'src'...so how could i show on datalist?

 

<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="3" CellPadding="2" CellSpacing="2">

<ItemTemplate>

<table class="item">

<tr>

<td>

<span class="name">

<%# Eval("ImageName")%></span>

</td>

</tr>

<tr>

<td>

<span class="city"><%# Eval("Descript")%></span><br />

<span class="postal"><%# Eval("ImageAssignedName")%></span><br />

<span class="country"><%# Eval("ImageAssignedName")%></span><br />

<%--<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/images/fabrics/{0}") %>' CssClass="name" runat="server" Width="100px" Height="60px" hspace="20px"/>--%>

<img id="Image1" alt='<%# Eval("ImagePath") %>' src='<%# Eval("ImagePath") %>' class="image" />

<span class="phone"><%# Eval("ImagePath")%></span><br />

<span class="fax"><%# Eval("ImagePath")%></span><br />

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

 

 

 

<script type="text/javascript">

$(function () {

$("[id*=dlCustomers]").hide();

$.ajax({

type: "POST",

url: "CS.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 {

alert(customer.find("ImageName").text());

var cell = $(".item", row).eq(j);

var img = $(".image", cell);

img.attr("src", customer.find("ImagePath").text());

img.attr("alt", customer.find("ImagePath").text());

$(".name", row).eq(j).html(customer.find("ImageName").text());

$(".city", row).eq(j).html(customer.find("Descript").text());

$(".postal", row).eq(j).html(customer.find("ImageAssignedName").text());

$(".country", row).eq(j).html(customer.find("ImageAssignedName").text());

$(".phone", row).eq(j).html(customer.find("ImagePath").text());

$(".fax", row).eq(j).html(customer.find("ImagePath").text());

}

i++;

}

$("[id*=dlCustomers]").append(row);

}

$("[id*=dlCustomers] tr").eq(0).remove();

$("[id*=dlCustomers]").show();

}

</script>

 

 

 

[WebMethod]

public static string GetCustomers()

{

string query = "SELECT top 5 Fabrics.ImageName,Fabrics.Descript,Fabrics.ImageAssignedName,Fabrics.ImagePath from Fabrics";

SqlCommand cmd = new SqlCommand(query);

return GetData(cmd).GetXml();

}

private static DataSet GetData(SqlCommand cmd)

{

string strConnString = ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString;

using (SqlConnection con = new SqlConnection(strConnString))

{

using (SqlDataAdapter sda = new SqlDataAdapter())

{

cmd.Connection = con;

sda.SelectCommand = cmd;

using (DataSet ds = new DataSet())

{

sda.Fill(ds);

return ds;

}

}

}

}