Using Kaminari for AJAX pagination with the `remote = true` option does not impact the view in Rails 3

Hello, I am currently utilizing the kaminari gem for pagination and I would like to implement pagination through ajax.

index.html.haml

#abc
 = render :partial => 'anything/anything_lists', collection: @anything_upcoming, as: :anything_schedule
#paginator
 = paginate @anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"

index.js.haml

$('#abc').html('#{escape_javascript render(partial: "anything/anything_lists")}');
$('#paginator').html('#{escape_javascript(paginate(@anything_upcoming, :remote => true, :param_name => "anything_upcoming_page").to_s)}');

In the controller file:

@anything_upcoming = AnythingSchedule.anything_upcoming.page(params[:anything_upcoming_page]).per(Settings.pagination.per_page)

respond_to do |format|
  format.js
  format.html
end

The view source displays data-remote = true, however, the log shows Website::EventsController#index as HTML. It seems like something is missing here.

Edit: I have been experimenting with the JavaScript file and converted index.js.haml to index.js.erb. Initially, I received an ajax request and it showed JS being called in the logs. However, after redoing it, I did not receive the ajax request.

Final Edit application.js

//= require jquery
//= require jquery_ujs 
//= require ckeditor-jquery
//= require bootstrap.min
//= require bootstrap-datepicker.min
//= require bootstrap-timepicker.min
//= require chosen.jquery.min
//= require jquery.popupoverlay
//= require common
//= require ace-elements.min
//= require registrations
//= require courses
//= require instructors
//= require jsapi
//= require donation
//= require workshops
//= require nav_settings_dropdown
//= require events
//= require event_schedules
//= require manage_home
//= require jquery.blockUI
//= require rails

Gem file

gem 'rails', '3.2.17'
gem 'haml'
gem 'haml-rails'
gem "rails_config", "~> 0.3.3"

group :assets do
gem 'sass-rails',   '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-fileupload-rails'
gem 'jammit'
end

gem 'jquery-rails'
gem "kaminari", "~> 0.14.1"

Answer №1

It seems you may have overlooked adding the application.js file to your layout.

Alternatively, it's possible that you are utilizing a different JavaScript or layout than the default one. Please verify this.

Cause:

The syntax for pagination appears to be correct:

= paginate @anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"

You have confirmed that you have included the jquery-rails gem and the necessary libraries in application.js.

You also mentioned that data-remote=true is being applied to the element. Therefore, the only issue remaining could be the one mentioned above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React UseEffect cleanup happening before Popstate event fires

After experimenting with different setups, I have managed to simplify my code to the bare minimum: import { useEffect } from "react"; const useUnsavedChangesAlert = () => { useEffect(() => { const handleRouteChange = (event) => { ...

Can anyone recommend a reliable JavaScript library for creating resizable elements?

I am looking to incorporate resizable functionality for a textarea. While I have experimented with jQuery UI's "resizable" feature, it doesn't quite meet my needs. I appreciate jQuery, but the resizable option falls short in allowing me to resize ...

What is the best way to retrieve an ASP.NET variable in order to convert it into a JSON string for passing to a WCF

I'm working with a WCF AJAX enabled web service and attempting to pass the value of a field on an ASP.NET page into it using JSON. However, I am consistently getting nothing in return. In the past, in ASP.NET web services, we used: request.form("SbID ...

Deleting Single Files from a Selection of Multiple Files With File Input

Is there a way to remove specific files from the list of files selected for upload when multiple files can be chosen by the user? As an example, consider this input field: <input type='file' name='file' id='file' multiple= ...

Using PHP, HTML, and JQuery, dynamically populate text fields upon selection change with values retrieved from PHP

Unable to Title this Question, but Can Explain my Situation Here. I have the following Code (not real data, created for demonstration) <!DOCTYPE html> <html> <head> <title>Multiple Form Submit</title> </head> <b ...

Can JavaScript be used to determine if any code has been executed from the browser's console?

I'm currently developing a JavaScript game and I want to prevent cheating. Is there a way for me to track and record commands entered in the JavaScript console? Here's a basic outline of what I have in mind: consoleCommands = ""; window.console ...

Is it better to choose AJAX and JQuery for their speed and complexity, or stick with the simplicity of GET requests?

When a user attempts to log in and fails, an error message should be displayed on the page. There are two primary methods that can be used to achieve this: one involves using a form action on the HTML page and handling incorrect login information in the PH ...

What is the method for keeping the first column of the table fixed in place?

Incorporating jquery EasyUI, I have created a table where I want the first column to remain static while the rest of the columns scroll when the screen size is reduced. Code snippet available here. Is there a way to freeze just the Title1 column? I attem ...

I am looking to obtain assistance through denomongo for guidance

The deno-mongo guide page on GitHub is no longer functional. You can find the page here: 'https://github.com/manyuanrong/deno_mongo' I am struggling to understand how to use the plugin and get it up and running. Following the example in the "Re ...

Optimizing AngularJS ng-repeat for Top Performance and Benchmarking

I have been conducting performance tests on AngularJS to determine its compatibility with our application. To assess and compare DOM creation speed, I developed a JSFiddle example where users can experiment with different numbers of items to create. The g ...

Web Browser Fails to Set Cookie during an Ajax Request

I am facing a perplexing issue. I have an AJAX call that triggers the processing of a login form and generates a cookie upon successful login. However, the web browser is failing to recognize the cookie. Upon troubleshooting, I have narrowed it down to so ...

Vue.js v-runtime-template is unable to retrieve the root property

Here is my page.vue file: <template> <div> <v-runtime-template :template="template"></v-runtime-template> </div> </template> <script> import VRuntimeTemplate from "v-runtime-template"; ...

Using an arrow function with the map function in React allows for concise and

I am struggling to understand how the map function is working in this code snippet. Can someone please explain it to me in simpler terms? From what I gather, the map function is iterating over each element in the testData array and invoking a function "wo ...

Updating database records using AJAX in Laravel

In my project using Laravel, I need to update the status of a patient when they schedule an appointment with a doctor. The patient can have three statuses: Accept, Waiting (automatically set when the patient selects a date and time), Not Accept. However, w ...

Ordering div elements in descending order using Jquery and attributes as the sorting criteria

My ajax function retrieves message_count data from the server every 3 minutes and updates each player's attribute accordingly. Now, I want to automatically sort the divs in descending order based on the message_count attribute value after this ajax ca ...

How do you typically approach testing Cloud Code on Parse?

While working on developing a substantial amount of business logic in webhooks like beforeSave/afterSave/etc. using Parse.com, I have encountered some challenges as a JavaScript/Parse beginner. The process seems somewhat tedious and I'm questioning if ...

Passing a value via jQuery Ajax on the same PHP page

I'm a little confused when trying to send a value on the same page. <script> $("select[name='sweets']").change(function () { var str = ""; $("select[name='sweets'] option:selected").each(function () { ...

Create logic statements based on the information obtained from parsing an XML document

Looking for some assistance with writing this code. Any help is appreciated! Let's say I am extracting data from an XML file like the following: function parseXml(xml) { $(xml).find("ITEM").each(function() { var foo = $("bar", this).text ...

Transforming an array in JavaScript into a JSON object

I'm currently working on creating a loop in JavaScript or jQuery to generate a new JSON object from an array. The goal is to convert an input JavaScript array into a desired format for the output. Here's the input array: INPUT: [ { ...

Optimal method for linking NodeJS and Angular in a seamless integration

I am currently working on developing a web application that integrates a Node server as the backend and Angular for the front end. At the moment, my application consists of two JavaScript files: server.js and controller.js. Below is the code snippet for ea ...