hi.
loading image not working properly when using page number and page index.
this loading image not working in google chrome
loading image is blinking / shown repeatedly when scrollbar reaches the bottom of the page and also released from bottom of the page.
how can i solve this??
thanks in advance
public static DataTable TableData = new DataTable();
[WebMethod]
public void GetProductpage(int pageNumber, int pageSize)
{
List<Products> details = new List<Products>();
string cs = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("sp_products_page", con);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter()
{
ParameterName = "@PageNumber",
Value = pageNumber
});
cmd.Parameters.Add(new SqlParameter()
{
ParameterName = "@PageSize",
Value = pageSize
});
using (var sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
TableData.Clear();
sda.Fill(TableData);
foreach (DataRow dtrow in TableData.Rows)
{
Products user = new Products();
byte[] arrpicture = new byte[0];
user.Productid = Convert.ToInt32(dtrow["Productid"].ToString());
user.Productname = dtrow["Productname"].ToString();
arrpicture = (byte[])dtrow["Prodimage"];
user.Prodimage = Convert.ToBase64String(arrpicture);
details.Add(user);
}
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(details));
}
public class Products
{
public int Productid;
public string Prodimage;
public string Productname;
}
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var currentPage = 1;
getproductdata(currentPage);
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * .8) {
currentPage += 1;
getproductdata(currentPage);
}
});
});
function getproductdata(currentPageNumber) {
$.ajax({
url: '/WebService.asmx/GetProductpage',
method: 'post',
dataType: "json",
async: false,
data: { pageNumber: currentPageNumber, pageSize: 9 },
success: function (data) {
var table = $('#tblImages');
var rows = "";
$(data).each(function (index, emp) {
var coupon = emp.coupon;
rows += "<div class=trclass>" + "<tr><td class=tdcolumn>"
+ "<div class=tabledivprod>"
rows += '<img class=pdtimg src="data:image/jpg;base64,' + emp.Prodimage + '" />'
+ "<div style=display:none class=couponcode>" + emp.couponcode + "</div>"
rows += "</div>" + "</td></tr>" + "</div>"
});
table.append(rows);
},
beforeSend: function () {
$(".modal").show();
},
complete: function () {
$(".modal").hide();
},
error: function (err) {
alert(err);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tblImages">
<div class="modal" style="display: none">
<div class="center">
<img alt="" src="images/loader.gif" />
</div>
</div>
</div>
create procedure [dbo].[sp_products_page]
@PageNumber int,
@PageSize int
as
Begin
Declare @StartRow int
Declare @EndRow int
Set @StartRow = ((@PageNumber - 1) * @PageSize) + 1
Set @EndRow = @PageNumber * @PageSize;
SELECT p.*,
ROW_NUMBER() OVER (order by productid desc) AS ROWNUMBER
INTO #Results
From Products p status='1'
SELECT *
FROM #Results
WHERE ROWNUMBER BETWEEN @StartRow AND @EndRow
End