How to load modal content via ajax bootstrap pagination without reloading main page?

Question

I have used bootstrap modal and will paginate for modal content pagination. But everytime i click the next/prev button, the entire page (includes main window) gets loaded

scripting lines:

$("#ajax_process_page").html("<%= escape_javascript(render('/modal_file')) %>");

$(document).ready(function() {
$(document).on("click", ".pagination a", function() {
  $(".pagination").html("<img src='/images/feed-loader.gif' align='middle' />");
  $.getScript(this.href);
  });
});

html code:

<div id="ajax_process_page">
      <% render "/modal_file" %>
    </div>

Answer 1

We'll need more information to help you, however, we can try somethings. It looks like you are clicking on a link. Maybe that's why it keeps reloading. If that's the case, you can fix it using event.preventDefault(), like code below:

$(document).ready(function() {

  $(document).on("click", ".pagination a", function(event) {
    event.preventDefault();
    $(".pagination").html("<img src='/images/feed-loader.gif' align='middle' />");
    $.getScript(this.href);
  });
});