Invoke jQuery on Ajax Request

Question

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! :)

on the ajax `success` event, after adding the new rows, call the code to do your styling — Shyju, Jul 13 '16 at 15:20

score 3 · Accepted Answer · answered Jul 13 '16 at 15:22

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

Invoke jQuery on Ajax Request

1 Answers1