TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Dawood Abbas
NA
264
98.4k
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;
}
}
}
}
Reply
Answers (
11
)
How to hide paging when data does not Exits in GridView
How to deploy windows service project and install in another