Dawood Abbas

Dawood Abbas

  • NA
  • 264
  • 98k

How to show image in datalist using jquery from sql?

Sep 14 2015 8:06 AM
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;
}
}
}
}

Answers (11)