Hello everybody, i have a web application that fetches data from the server using adding Ajax with Jquery pagination, everything is fine exception that if the next page is clicked, image doesnt display but all the other information will show, i can also
confirm that the source image url is correct. Below is my jquery code, is there anything i can do to improve the below code and make pictures always load. NOTE that images display very well when page is load for the first time, the problem is on pagination.
According to your description, I've simulated a table with pagination. The image works well on my side,
As bruce has asked, have you use F12 developer tools to check if there is any useful information there?
And if possible, could you please provide how is your page designed code and what the plugin you have use?
This will be easier to help with you.
Best Regards,
Jenifer
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Thank you Jenifer, like i said before the data is properly fetched but the make is not loaded, the image url is also fetched properly. below is my page script.
function Formatdate(Jsondate) {
if (Jsondate == null || Jsondate == '') {
return Jsondate;
}
else {
var mydate = new Date(eval('new' + Jsondate.replace(/\//g, ' ')));
var month = mydate.getMonth() + 1;
var day = mydate.getDate();
var year = mydate.getFullYear();
var date = day + "/" + month + "/" + year;
return date;
}
}
function GetAllCommoditypagination(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
//data: {
// startdate: $('#StartDate').val(),
// endDate: $('#endDate').val()
//},
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
//Append each row to html table
//for (var i = 0; i < result.course.length; i++) {
var delayval = 0;
It seems you are using some pagination built codes that is not working properly. If you check the network tab of your browser you will see 404 error when clicking on your paginating links. You can then easily debug your problem.
Thank everybody for your assistance, i noticed that when i put the image path on "src" instead of "data-echo" everything started working well. i dont really know data-echo can work well with pagination.
Member
6 Points
94 Posts
Jquery pagination doesnt display image
Apr 24, 2019 10:15 AM|abfrank|LINK
Hello everybody, i have a web application that fetches data from the server using adding Ajax with Jquery pagination, everything is fine exception that if the next page is clicked, image doesnt display but all the other information will show, i can also confirm that the source image url is correct. Below is my jquery code, is there anything i can do to improve the below code and make pictures always load. NOTE that images display very well when page is load for the first time, the problem is on pagination.
<script type="text/javascript">
$(document).ready(function () {
GetAllCommodity('1');
});
function GetAllCommodity(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
var delayval = 0;
$.each(result.getcommidy, function (index, item) {
$(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
delayval = delayval + 0.1;
});
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');
if (result.currentpage>1) {
var prvss = result.currentpage - 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
}
for (i = 1; i <= result.numberOfPages; i++) {
if (result.currentpage == i) {
$(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
}
else {
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
}
}
if (result.numberOfPages > result.currentpage) {
var nextt = result.currentpage + 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
}
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');
},
error: function (result) {
alert("Error" + result.responseText);
}
});
}
function GetAllCommoditypagination(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
var delayval = 0;
$.each(result.getcommidy, function (index, item) {
$(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
delayval = delayval + 0.1;
});
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(1);return false;" class="prev" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>');
if (result.currentpage > 1) {
var prvss = result.currentpage - 1;
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
}
for (i = 1; i <= result.numberOfPages; i++) {
if (result.currentpage == i) {
$('.pagination').append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
}
else {
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
}
}
if (result.numberOfPages > result.currentpage) {
var nextt = result.currentpage + 1;
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
}
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');
},
error: function (result) {
alert("Error" + result.responseText);
}
});
}
</script>
All-Star
51504 Points
12427 Posts
Re: Jquery pagination doesnt display image
Apr 24, 2019 10:16 PM|bruce (sqlwork.com)|LINK
what does the browsers network trace say about the image fetches?
Participant
1550 Points
556 Posts
Re: Jquery pagination doesnt display image
Apr 25, 2019 09:53 AM|Jenifer Jiang|LINK
Hi abfrank,
According to your description, I've simulated a table with pagination. The image works well on my side,
As bruce has asked, have you use F12 developer tools to check if there is any useful information there?
And if possible, could you please provide how is your page designed code and what the plugin you have use?
This will be easier to help with you.
Best Regards,
Jenifer
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
6 Points
94 Posts
Re: Jquery pagination doesnt display image
Apr 25, 2019 11:20 AM|abfrank|LINK
Thank you Jenifer, like i said before the data is properly fetched but the make is not loaded, the image url is also fetched properly. below is my page script.
@{
ViewData["Title"] = "Manibell Home";
}
<div class="body-content outer-top-xs">
<div class="container">
<div class="row category-v1 outer-bottom-sm">
<div class="col-md-3 col-sm-12 sidebar">
<div class="side-menu">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<h3 class="section-title">category</h3>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Women </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Clothing
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Footwear
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Bags, Belts &s; Wallets
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Watches
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Beauty &s; Wellness
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Perfumes
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Men </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Clothing
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Footwear
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Bags, Belts &s; Wallets
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Watches
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Beauty &s; Wellness
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Perfumes
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Kids </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Clothing
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Footwear
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Bags, Belts &s; Wallets
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Watches
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Beauty &s; Wellness
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Perfumes
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title no-items"> <a class="collapsed" href="#" data-toggle="collapse" data-parent="#accordion"> Accessories </a> </h4>
</div>
</div>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> Dress </a> </h4>
</div>
<div id="collapseFive" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Clothing
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Footwear
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Bags, Belts &s; Wallets
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Watches
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Beauty &s; Wellness
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Perfumes
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default wow fadeIn" data-wow-delay="0.2s">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> Shoes </a> </h4>
</div>
<div id="collapseSix" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Clothing
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Footwear
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Bags, Belts &s; Wallets
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Watches
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Beauty &s; Wellness
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Perfumes
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h3 class="section-title">Filter By Price</h3>
<div class="sidebar-filter">
<h4 class="sidebar-sub-title">price</h4>
<div class="sidebar-widget">
<div class="sidebar-widget-body">
<div class="price-range-holder">
<input type="text" class="price-slider">
<input type="text" class="price-input" value="60"> <i class="fa fa-minus"></i>
<input type="text" class="price-input" value="696"> <a href="#">search</a>
</div>
</div>
</div>
</div>
<div class="sidebar-advertisment wow fadeIn" data-wow-delay="0.2s">
<img class="img-responsive" src="assets/images/sliders/1.png" alt="">
<div class="content-text">
<span>new design</span>
<h3>fashion</h3>
</div>
</div>
</div>
<div class=" col-md-9 col-sm-12 outer-bottom-sm">
<div class="clearfix"></div>
<div id="category" class="gird-v1-banner wow fadeIn">
<div class="item">
<div class="image"> <img src="assets/images/banners/1.jpg" alt="" class="img-responsive"> </div>
<div class="container-fluid">
<div class="caption vertical-top">
<div class="small-text wow fadeIn" data-wow-delay="0.2s">women’s</div>
<div class="big-text wow fadeIn" data-wow-delay="0.4s">accessories</div>
<div class="bottom-line wow fadeIn" data-wow-delay="0.6s">Save up to 25% for all in your order.</div>
</div>
</div>
</div>
</div>
<div class="controls-product-top outer-top-vs wow fadeInUp">
<div class="controls-product-item row">
<div class="col-sm-3 col-md-3">
<div class="product-item-view">
<ul class="nav nav-tabs">
<li><span>View as:</span></li>
<li class="active"><a data-toggle="tab" href="#grid-container"><i class="icon fa fa-th"></i></a></li>
<li><a data-toggle="tab" href="#list-container"><i class="icon fa fa-th-list"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-5 col-md-6">
<div class="custom-select">
<ul class="list-unstyled">
<li class="short-by">
<label>Sort by:</label>
<select class="styled">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</li>
<li class="show-page">
<label>Show:</label>
<select class="styled">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</li>
</ul>
</div>
</div>
<div class="col col-sm-4 col-md-3">
<nav>
<ul class="pagination" id="mypagination1"></ul>
</nav>
</div>
</div>
</div>
<div class="search-result-container">
<div id="myTabContent" class="tab-content">
<div class="tab-pane active " id="grid-container">
<div class="category-product inner-top-xs">
<div id="salerecords" class="row">
</div>
</div>
</div>
<div class="tab-pane outer-top-vs" id="list-container">
<div class="category-product ">
<div class="category-product-inner wow fadeInUp" data-wow-delay="0s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/12.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text sale">sale</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="category-product-inner wow fadeInUp" data-wow-delay="0.1s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/9.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text hot">hot</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="category-product-inner wow fadeInUp" data-wow-delay="0.2s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/10.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text new">new</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="category-product-inner wow fadeInUp" data-wow-delay="0.3s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/8.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text new">new</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="category-product-inner wow fadeInUp" data-wow-delay="0.4s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/7.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text new">new</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="category-product-inner wow fadeInUp" data-wow-delay="0.5s">
<div class="products product-item-list-v1">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="product-image">
<div class="image"> <img src="assets/images/blank.gif" data-echo="assets/images/products/12.jpg" class="img-responsive" alt=""> </div>
<div class="tag">
<div class="tag-text new">new</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12">
<div class="product-info">
<h3 class="name"><a href="details-v1.html">Product name #01</a></h3>
<div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div>
<div class="product-price">
<ins> <span class="amount">$ 369.99</span> </ins>
<del><span class="amount">$ 400.99</span></del>
</div>
<div class="product-short-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo re et dolore magna aliqua. Ut enim ad minim venia. Lorem ipsum dolor sit amet, conse ctetur adi piscing elit send do eiusmod later. Lorem ipsum dolor sit amet, consectetur adipiscing end.</p>
</div>
</div>
<div class="cart animate-effect">
<div class="action">
<ul class="list-unstyled">
<li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li>
<li>
<a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a>
</li>
<li>
<a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix controls-product-bottom wow fadeInUp">
<div class="controls-product-item row">
<div class="col-sm-3 col-md-3">
<div class="product-item-view">
<ul class="nav nav-tabs">
<li><span>View as:</span></li>
<li class="active"><a data-toggle="tab" href="#grid-container"><i class="icon fa fa-th"></i></a></li>
<li><a data-toggle="tab" href="#list-container"><i class="icon fa fa-th-list"></i></a></li>
</ul>
</div>
</div>
<div class="col-sm-5 col-md-6">
<div class="custom-select">
<ul class="list-unstyled">
<li class="short-by">
<label>Sort by:</label>
<select class="styled">
<option>Position</option>
<option>Low</option>
<option>High</option>
<option>A to Z</option>
</select>
</li>
<li class="show-page">
<label>Show:</label>
<select class="styled">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</li>
</ul>
</div>
</div>
<div class="col col-sm-4 col-md-3">
<nav>
<ul class="pagination" id="mypagination">
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/assets/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
//(function () {
// getData();
//})();
$(document).ready(function () {
GetAllCommodity('1');
//GetAllCommoditypagination(2);
//getCategory();
// $("#StartDate").datetimepicker({ format: 'dd/mm/yyyy', pickTime: false, autoclose: true, minView: 2 });
//$("#endDate").datetimepicker({ format: 'dd/mm/yyyy', pickTime: false, autoclose: true, minView: 2 });
});
//function GetResultData()
//{
// GetResultData();
//}
function ShowItems() {
$("#myModal").modal('show');
$('#smSuccdiv').hide();
$('#smerror').hide();
}
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function Formatdate(Jsondate) {
if (Jsondate == null || Jsondate == '') {
return Jsondate;
}
else {
var mydate = new Date(eval('new' + Jsondate.replace(/\//g, ' ')));
var month = mydate.getMonth() + 1;
var day = mydate.getDate();
var year = mydate.getFullYear();
var date = day + "/" + month + "/" + year;
return date;
}
}
function GetAllCommoditypagination(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
//data: {
// startdate: $('#StartDate').val(),
// endDate: $('#endDate').val()
//},
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
//Append each row to html table
//for (var i = 0; i < result.course.length; i++) {
var delayval = 0;
$.each(result.getcommidy, function (index, item) {
// $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
// var imagepath = 'http://localhost/nosameApi/'+ item.imagepath;
$('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
delayval = delayval + 0.1;
});
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(1);return false;" class="prev" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span></a></li>');
if (result.currentpage > 1) {
var prvss = result.currentpage - 1;
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
}
for (i = 1; i <= result.numberOfPages; i++) {
if (result.currentpage == i) {
$('.pagination').append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
}
else {
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + i + ');return false;">' + i + '</a></li>');
}
}
if (result.numberOfPages > result.currentpage) {
var nextt = result.currentpage + 1;
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
}
$('.pagination').append('<li><a href="javascript:void()" onclick = "GetAllCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');
},
error: function (result) {
alert("Error" + result.responseText);
}
});
}
function GetAllCommodity(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
//data: {
// startdate: $('#StartDate').val(),
// endDate: $('#endDate').val()
//},
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
//Append each row to html table
//for (var i = 0; i < result.course.length; i++) {
var delayval = 0;
$.each(result.getcommidy, function (index, item) {
// $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
$('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
delayval = delayval + 0.1;
});
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');
if (result.currentpage>1) {
var prvss = result.currentpage - 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
}
for (i = 1; i <= result.numberOfPages; i++) {
if (result.currentpage == i) {
$(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
}
else {
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + i + ');return false;">' + i + '</a></li>');
}
}
if (result.numberOfPages > result.currentpage) {
var nextt = result.currentpage + 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
}
$(".pagination").append('<li><a href="javascript:void()" onclick = "GetAllCommoditypagination(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');
},
error: function (result) {
alert("Error" + result.responseText);
}
});
}
function SearchCommodity(mycurrentpage) {
$("#salerecords").empty();
$(".pagination").empty();
$.ajax({
url: "GetAllCommodity/" + mycurrentpage,
typr: "GET",
//data: {
// startdate: $('#StartDate').val(),
// endDate: $('#endDate').val()
//},
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
var tr;
//Append each row to html table
//for (var i = 0; i < result.course.length; i++) {
var delayval = 0;
$.each(result.getcommidy, function (index, item) {
// $(salerecords).append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="http://localhost/nosameApi/' + item.imagepath + '" data-lightbox="image-1"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt=""> </div> <div class="tag"><div class="tag-text new">new</div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price+'</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
$('#salerecords').append('<div class="col-sm-4 col-md-3 wow fadeInUp" data-wow-delay="' + delayval.toString() + 's"><div class="products grid-v1"><div class="product"><div class="product-image"> <a href="Home/itemdetail/?name=' + item.description + '&id=' + item.id + '"><div class="image"> <img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important"> </div> <div class="tag"><div class="tag-text new"></div> </div> <div class="hover-effect"><i class="fa fa-search"></i></div> </a></div><div class="product-info"><h3 class="name"><a href="details-v1.html">' + item.description + '</a></h3><div class="star-rating" title="Rated 4.50 out of 5"> <span style="width:90%"><strong class="rating">4.50</strong> out of 5</span> </div> <div class="product-price"><ins> <span class="amount">' + item.price + '</span> </ins><del><span class="amount"></span></del></div></div><div class="cart animate-effect"><div class="action"> <ul class="list-unstyled"><li class="add-cart-button"> <a class="btn btn-primary" href="details-v1.html">Add to cart</a> </li><li> <a class="btn btn-primary whislist" href="#" title="Wishlist"> <i class="icon fa fa-heart"></i> </a> </li> <li><a class="btn btn-primary compare" href="#" title="Compare"> <i class="fa fa-exchange"></i> </a></li></ul></div></div> </div></div> </div>');
delayval = delayval + 0.1;
});
$(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(1);return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-double-left"></i></span> </a></li>');
if (result.currentpage > 1) {
var prvss = result.currentpage - 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + prvss + ');return false;" class="prev" aria-label="Previous"> <span aria-hidden="true"><i class="fa fa-angle-left"></i></span> </a></li>');
}
for (i = 1; i <= result.numberOfPages; i++) {
if (result.currentpage == i) {
$(".pagination").append('<li class="active"><a href="javascript:void()" onclick = "SearchCommodity(' + i + ');return false;">' + i + '</a></li>');
}
else {
$(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + i + ');return false;">' + i + '</a></li>');
}
}
if (result.numberOfPages > result.currentpage) {
var nextt = result.currentpage + 1;
$(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + nextt + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-right"></i></span> </a> </li>');
}
$(".pagination").append('<li><a href="javascript:void()" onclick = "SearchCommodity(' + result.numberOfPages + ');return false;" class="next" aria-label="Next"> <span aria-hidden="true"><i class="fa fa-angle-double-right"></i></span> </a> </li>');
},
error: function (result) {
alert("Error" + result.responseText);
}
});
}
function Formatdate(Jsondate) {
if (Jsondate == null || Jsondate == '') {
return Jsondate;
}
else {
var mydate = new Date(eval('new' + Jsondate.replace(/\//g, ' ')));
var month = mydate.getMonth() + 1;
var day = mydate.getDate();
var year = mydate.getFullYear();
var currentHour = mydate.getHours();
var currentMinute = mydate.getMinutes();
var currentSecond = mydate.getSeconds();
var myclock;
var dn = "AM"
if (currentHour > 12) {
dn = "PM"
currentHour = currentHour - 12
} if (currentHour == 0)
currentHour = 12
if (currentMinute <= 9)
currentMinute = "0" + currentMinute
if (currentSecond <= 9)
currentSecond = "0" + currentSecond
myclock = "" + currentHour + ":" + currentMinute + ":" + currentSecond + " " + dn;
var date = day + "/" + month + "/" + year + " " + myclock;
return date;
}
}
</script>
Participant
820 Points
563 Posts
Re: Jquery pagination doesnt display image
Apr 25, 2019 06:27 PM|yogyogi|LINK
It seems you are using some pagination built codes that is not working properly. If you check the network tab of your browser you will see 404 error when clicking on your paginating links. You can then easily debug your problem.
Reference - How to Create jQuery Pagination System in your Web Page
Member
6 Points
94 Posts
Re: Jquery pagination doesnt display image
Apr 26, 2019 03:01 PM|abfrank|LINK
Thank everybody for your assistance, i noticed that when i put the image path on "src" instead of "data-echo" everything started working well. i dont really know data-echo can work well with pagination.
this was my script
<img src="assets/images/blank.gif" data-echo="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">
i removed data-echo and use just the src
<img src="http://localhost/nosameApi/' + item.imagepath + '" class="img-responsive" alt="" style="width:auto !important; height:200px !important">