I use infinite scroll for paging. And it was working fine until today. Today I have decided to add two additional parameters to all my action methods and something is wrong now with pointing action method from infinite scroll.
So when I scroll the page action is not invoked.
So I open page source and find link that should load next page and it looks like:
href="/Tickets/AnotherSetOfData?countryCode=uk&cityName=london&ticketTypeId=-1"
If I click on this link action method is invoked, so the problem is that infinite scroll somehow stops to call this function on scroll.
This is how action method looks like
public ActionResult AnotherSetOfData(string countryCode, string cityName, int ticketTypeId)
{...}
I suspect that maybe this is routing issue but I don’t know how to handle it…
Routing
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
Infinite scroll
<nav id="page-nav">
<a href="@Url.Action("AnotherSetOfData", "Tickets", new { countryCode = ViewBag.countryCode, cityName = ViewBag.cityName, ticketTypeId = ViewBag.ticketTypeId })">
</a>
</nav>
...
$container.infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
function (newElements) {
var $newElems = $(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function () {
$newElems.animate({ opacity: 1 });
$container.isotope('appended', $newElems);
});
Put this in your Global.asax.cs