Question

So I’ve implemented AJAX pagination. The problem is that since the <%= paginate @videos %> code is not inside the partial that I render, the pagination links are not updated. What jQuery code should I use to update the pagination links?

Btw I tried $(".pagination").replaceWith('escape_javascript(<%= paginate @videos %>)');;

but i get this error: Uncaught SyntaxError: Unexpected token ILLEGAL

$(".pagination").replaceWith("escape_javascript(<%= paginate @videos %>)");; throws this error: Uncaught SyntaxError: Unexpected identifier

Here is the JS code the browser sees:

$(".pagination").replaceWith("  <nav class="pagination">
    <span class="prev">
  <a href="/profiles/45?_=1302313302990" class="prev" rel="prev">&laquo; Prev</a>
</span>

          <span class="page first">
  <a href="/profiles/45?_=1302313302990">1</a>
</span>

        <span class="page current">2</span>

          <span class="page last">
  <a href="/profiles/45?_=1302313302990&amp;page=3">3</a>
</span>

    <span class="next">
  <a href="/profiles/45?_=1302313302990&amp;page=3" class="next" rel="next">Next &raquo;</a>
</span>

  </nav>
");

Answer 1

Ideally, the new pagination links should be included in the HTML response of the ajax call. If that is not possible – presumably because the links reside elsewhere in the document, then I would suggest creating a context/link/URI/action/whatever (disclaimer: I’m not a ROR guy) which returns a JSON string, structured something like:

[{"data": "The HTML output"}, {"pageLinks": "pagination HTML"}]

and replace your ajax call with one which expects JSON as the return dataType. Then it should be easy, e.g.:

$.ajax({
    url: 'theURL',
    dataType: 'json',
    success: function(json) {
        $('.pagination').html(json.pageLinks);
        $('#someDiv').html(json.data);
    }
});