Hi
I am using following link code to load data from DB with Image
http://www.aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx
On Page Load All correct, but wile scroll the first image load to all, Name and Descriptions are correct only the image get duplicated
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "Corp_MyProducts.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
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);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
customers.each(function () {
var customer = $(this);
var table = $("#dvCustomers table").eq(0).clone(true);
$(".name", table).html(customer.find("PRODUCT_NAME").text());
$(".pid", table).html(customer.find("PRODUCT_ID").text());
$(".pdesc", table).html(customer.find("PRODUCT_DESCRIPTION").text());
$(".imagess", table).html(customer.find("PRODUCT_MAIN_IMAGE_PATH").text());
$(".pshow", table).html(customer.find("PRODUCT_SHOW_STATUS").text());
$(".pprice", table).html(customer.find("PRODUCT_PRICE").text());
$("#dvCustomers").append(table).append("");
});
$("#loader").hide();
}
</script>
<table>
<tr>
<td align="center">
<div id="dvCustomers">
<asp:Repeater ID="rptCustomers" runat="server" OnItemCommand="rptCustomers_ItemCommand">
<ItemTemplate>
<table class="mpost clearfix" cellpadding="0" cellspacing="0" border="0" style="vertical-align: top; box-shadow: 0px 3px 7px #888888; border-bottom: 1px solid #D5D5D5; margin-bottom: 1.5em; padding-bottom: 0px; display: inline-block; margin-left: 1%; margin-right: 1%; margin-top: 0px; padding-top: 0px; width: 400px;">
<tr>
<td align="center" class="header" rowspan="4" style="vertical-align: top; font-size: 15px; font-weight: 600; line-height: 1.5; font-family: 'PT Sans', sans-serif; border-radius: 3px; width: 190px; height: 190px; padding-right: 15px;">
<img style="border-radius: 3px; width: 190px; height: 190px;" class="imagess" src='<%# Eval("PRODUCT_MAIN_IMAGE_PATH")%>' alt="" />
<div style="background-color: rgba(242, 243, 235, 0.4); border-radius: 3px 0px 3px 0px; width: 170px;">
<span class="name" style="width: 170px !important; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: block;">
<asp:Label ID="Lbl_Name" runat="server" Text='<%# Eval("PRODUCT_NAME") %>' Style="width: 170px !important;"></asp:Label>
</span>(<span class="pid">
<asp:Label ID="Lbl_PrID" runat="server" Text='<%# Eval("PRODUCT_ID") %>'></asp:Label>
</span>)
</div>
</div>
</td>
<td align="center" width="210px" style="vertical-align: top;">
<span class="pshow"><%# Eval("PRODUCT_SHOW_STATUS") %></span>
</td>
</tr>
<tr>
<td align="left" class="body" style="vertical-align: top; font-weight: 600; font-size: 13px; font-style: italic;">AED: <span class="pprice"><%# Eval("PRODUCT_PRICE") %></span> /-
</td>
</tr>
<tr>
<td align="left" class="body" style="vertical-align: top; font-size: 13px; font-style: italic; height: 80px;">Description:<span class="imagess" style="width: 210px !important; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; margin: 3px !important; display: block;"> <%# Eval("PRODUCT_MAIN_IMAGE_PATH") %></span>
</td>
</tr>
<tr>
<td class="footer" align="center">
<asp:Button ID="Btn_Edit" class="button" runat="server"
CommandName="Edit" CommandArgument='<%# Eval("PRODUCT_ID") %>' Text="Edit"
Style="width: 50px !important; padding: 0px 0px 0px 0px !important; height: 25px !important; line-height: 25px !important; border-radius: 3px;" />
<asp:LinkButton ID="Btn_Delete" class="button" runat="server"
CommandName="Delete" CommandArgument='<%# Eval("PRODUCT_ID") %>' Text="Delete"
Style="width: 50px !important; background-color: #E0170F; padding: 0px 0px 0px 0px !important; height: 25px !important; line-height: 25px !important; border-radius: 3px;"
OnClientClick="Confirm()">Delete</asp:LinkButton>
<a href="Corp_MyProducts_Add.aspx" class="button" style="width: 50px !important; background-color: #26B136; padding: 0px 0px 0px 0px !important; height: 25px !important; line-height: 25px !important; border-radius: 3px;">New
</a>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td valign="bottom">
<img id="loader" alt="" src="images/loading.gif" style="display: none" />
</td>
</tr>
</table>
protected void Page_Load(object sender, EventArgs e)
{
try
{
//////if (Session["USER_ID"] == null)
//////{
////// Response.Redirect("default.aspx");
//////}
if (!IsPostBack)
{
rptCustomers.DataSource = GetCustomersData(1);
rptCustomers.DataBind();
}
}
catch (Exception ex)
{
ClientScript.RegisterStartupScript(this.GetType(), "myalert", "alert('" + ex.Message + "');", true);
}
}
[WebMethod]
public static string GetCustomers(int pageIndex)
{
return GetCustomersData(pageIndex).GetXml();
}
public static DataSet GetCustomersData(int pageIndex)
{
string query = "[HT0007_Product_Select_All]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", 6);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd);
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["HotelConnectionstring"].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, "Customers");
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
