Is it possible to load modal content using ajax bootstrap pagination without having to refresh the main page?

Question

Is it possible to load modal content using ajax bootstrap pagination without having to refresh the main page?

Whenever I utilize the bootstrap modal and pagination for modal content, clicking the next/prev button causes the entire page, including the main window, to reload.

Here are the 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);
  });
});

Here is the HTML code:

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

javascript ajax ruby-on-rails-4 will-paginate

Answer 1

Answer №1

In order to assist you further, we will require additional information; however, we can suggest a few solutions. It seems that when you click on a link, the page keeps reloading. To address this issue, you can utilize event.preventDefault(). Here is an example code snippet:

$(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);
  });
});

Answer 2

In order to assist you further, we will require additional information; however, we can suggest a few solutions. It seems that when you click on a link, the page keeps reloading. To address this issue, you can utilize event.preventDefault(). Here is an example code snippet:

$(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);
  });
});

Is it possible to load modal content using ajax bootstrap pagination without having to refresh the main page?

Answer №1

Similar questions

Querying MongoDB in Loopback is posing a challenge

Preventing jQuery slideToggle functionality from toggling multiple elements at once

How about incorporating an Ajax form within a partial view, or simply passing the data through in JSON format?

PHP fails to recognize Ajax POST requests

Ways to extend the timeout duration for Vercel Serverless functions

Utilizing intricate nested loops in Angular.JS for maximum efficiency and functionality

Only authenticated users are permitted to write to Firebase databases

Why would you need multiple root handlers?

Datatables encounters issues loading 70,000 records into the system

Using ES6 classes in Express routes: It is not possible to create the property 'next' on the string '/'

Why is it that the condition of being undefined or not functioning properly in state?

jqRangeSlider experiencing performance issues in Chrome browser

Ways to confirm that the function handed over as a prop to a Vue component operates asynchronously

A beginner's guide to efficiently indexing tables in AngularJS

Click on link after animation has finished

Exploring web pages with JavaScript events

Node.js socket.io emit function not functioning properly

The background failed to display (potentially due to a hovering function)

Implement functionality in JS to track the number of clicks on an element

Issues with JQuery `.click()` event