WebDevGuy2 WebDevGuy2 - 4 months ago 53
Ajax Question

Invoke jQuery on Ajax Request

Working on an ASP.NET/MVC5 website. I have a jQuery-based data-driven table (footable). I implemented an "infinite scroll" feature to it. On the document ready I execute footable() and it does some row styling, etc... It seems to be working well EXCEPT for one thing....

PROBLEM: Initially the table styling looks great. BUT, when I scroll, and the Ajax request retrieves more records, the rows are all displayed in the table, BUT the new rows are not styled appropriately. So, I'm thinking I have to invoke the document ready code again???? If this is the case, how can I do it?

Here's a portion of the code...

@section scripts{
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">
$(function () {
$("div#loading").hide();
});
var moreRowsUrl = "/SearchResults/GetRecords"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);
</script>

@Scripts.Render("~/plugins/footable")

<script type="text/javascript">
$(document).ready(function() {
$('.footable').footable();
});
</script>
}

@section Styles {
@Styles.Render("~/plugins/footableStyles")
}


Thanks in advance for your insightful comments! :)

Answer

It looks like all you're doing on document ready is:

$('.footable').footable();

So in your success function for the ajax request, just call the above code again.

This probably goes somewhere in your scrollHandler since that's what seems to be called when you scroll, but you didn't post the code