Continuous polling with Ajax in Rails does not trigger the display of an alert box

Trying to implement ajax polling using the RailsCast tutorial on ajax polling (#229) but encountering an issue where the alert box doesn't pop up after running the server.

Here's the code in app/views/quotes/index.js.erb:

alert('Hey');
QuotePoller.poll();

In app/assets/javascripts/quotes.coffee:

@QuotePoller =
  poll: ->
    setTimeout @request, 1000

  request: ->
    $.get($('#quotes').data('url'))

jQuery ->
 if $('#quotes').length > 0
  QuotePoller.poll()

In app/views/quotes/index.html.erb:

<div id="quotes" data-url="<%= quotes_url %>">

 <table>
  <thead>
   <tr>
    <th>Content</th>
    <th colspan="3"></th>
   </tr>
  </thead>


  <tbody>
   <% @quotes.each do |quote| %>
    <tr>
     <td><%= quote.content %></td>
     <td><%= link_to 'Show', quote %></td>
     <td><%= link_to 'Edit', edit_quote_path(quote) %></td>
     <td><%= link_to 'Destroy', quote, method: :delete, data: { confirm: 'Are you sure?' } %></td>
   </tr>
  <% end %>
  </tbody>
 </table>
</div>
javascriptruby-on-railsajaxruby-on-rails-5ajax-polling

Answer №1

To display the popup on your website, make sure to insert the provided code into the app/assets/javascripts/application.js file:

$(function() {
   $.getScript("/quotes.js");
});

Once you have added the code, the popup will show up when you visit localhost:3000/quotes.

Answer №2

Managed to solve the issue by incorporating the following code into my index action

app/controllers/quotes_controller.rb:

respond_to do |f|
  f.js { render :content_type => 'text/javascript' }
  f.html
end

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

Error: React-Redux unable to locate Redux context value while utilizing useSelector function

After creating a store and authreducer, everything was working as expected. However, when I added the useSelector in app.js, an error occurred: ERROR Error: could not find react-redux context value; please ensure the component is wrapped in a <Provid ...

javascriptreact-nativereduxreact-reduxexpo

Surprising outcomes encountered when playing audio with JavaScript

I've been diving into learning JavaScript and decided to create a simple web page. This page, when Pikachu (image) is clicked, plays an audio file. Similarly, if the string "Pikachu" is typed into the form, it should play the same sound, otherwise, i ...

javascriptaudio

Guide on viewing chromedriver logs during Protractor testing

I've recently discovered that chromedriver has the ability to generate a logfile (https://sites.google.com/a/chromium.org/chromedriver/logging) While the process of setting up this feature when running the executable directly is clear: chromedriver. ...

javascriptgoogle-chromeseleniumselenium-webdriverprotractor

Discover past stock prices on Yahoo Finance

I'm stuck on tweaking a functioning jfiddle example that I have. Can anyone help me with this two-part question regarding the jfiddle: http://jsfiddle.net/maxmillien/qPVSy/ Part 1) Is there a way to clear the search each time a new search is performe ...

javascriptjqueryjsonyqlyahoo-finance

angular does not update dynamically created dropdowns with populated arrays

Upon loading the page, my initial dropdown functions correctly. However, the child dropdown is loaded from localstorage after the first dropdown. The issue arises when I load the second dropdown and set it to the default value - at this point, I am unabl ...

javascriptarraysangularjscascadingdropdowndropdownbox

Handling exceptions in the event that the backend URL resource cannot be accessed

I'm facing an issue with my Vue.js single file component where I am trying to catch exceptions when the URL requested by axios.post is unreachable. I have encapsulated the entire code in a try block, but for some reason, the alert in the catch block i ...

javascriptvue.jsexception

Tips for integrating an infinite scroll feature using HTTP requests?

My current project involves developing a webapp using AngularJS to interact with a long array of objects. To display these objects on my index, I am utilizing nested ng-repeat functions. Additionally, I have implemented infinite scroll functionality simila ...

javascriptangularjsnginfinitescroll

What steps can be taken to address the JavaScript error that states: Error : TypeError: $("j2t-temp-div").down(".j2t_ajax_message") is not defined?

If you want to see the issue in action, please visit this link. To replicate this error, choose a "Color" and "Size", then click "Add to Cart". While the "loading..." dialog box is still visible, click on the shade to close it. Quickly click on any other ...

javascriptajaxexceptionmagento

The initial ajax request may sometimes return as 'undefined' during its first call

I have been working on creating a text input help feature similar to a desktop using the datatable.in table with keyboard navigation. In order to achieve this, I am dynamically changing the data source and also altering the header column. I have been succe ...

javascriptdjangoajaxundefined

Utilize the key as the value for options within an object iteration in Vue.js

I have an object called colors, which stores color names: { "RD": "Red", "BL": "Blue", "GR": "Green", "YW": "Yellow" } In my dropdown menu, I'm generating options for each color in the colors object: <select v-model="colors"> <op ...

javascriptvue.js

How can I go about refreshing my mapbox gl source data?

Hey there, I'm encountering an issue when attempting to update my mapbox source on click. I currently have two sources (cells, heatmap), and I am trying to add a new source using this code snippet: this.map.addSource("points", { type: "geojson", ...

javascriptvue.jsfrontendmapboxrender

Configuring .env files for both production and development environments in Node.js

As I observed, there were various approaches to setting up environments in NodeJS - some seemed straightforward while others appeared more intricate. Is it possible to utilize package.json scripts to manage environment variables? If so, what is the best p ...

javascriptnode.jsexpressenvironment-variables

The Ajax deletion request yields a 200 response code; however, it triggers an error instead of the

Hi, I am struggling to identify where I went wrong with the delete function. The function itself works fine, but I keep getting an error message even though the JSON response shows success. $(document).on('click', '.remove-btn', functio ...

phpjqueryjsonajax

Laravel has not been properly initialized

Recently, I've been exploring Laravel 5.3 and vue.js and I'm trying to make a GET request to fetch some user data from my database. I'm utilizing components in this project. Here is a snippet from my app.js file: require('./bootstrap ...

javascriptphplaravelnpmvue.js

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

Looking for a way to secure ajax post and get requests using JavaScript. The process would involve: Server generates private and public key upon request Server sends the public key to client Client encrypts data with public key Server decrypts data wit ...

javascriptnode.jspublic-key-encryptionprivate-key

A comprehensive guide on iterating through an array in JavaScript

Currently, I am facing an issue while trying to iterate over an array of Objects in React that have been fetched from Django. The object is stored as an array, but when attempting to map it, I encounter a typeerror stating "cannot read property map of unde ...

javascriptreactjs

Error: Unable to establish connection with local host (::1) on port 50106

I am currently in the process of developing a Discord bot using Node.js and erela.js. However, I encountered an error when attempting to retrieve the server that handles erela: A node error occurred: connect ECONNREFUSED ::1:50106 2020-05-01T21:23:19.367 ...

javascriptnode.js

Encountering an issue with AJAX form submission, file loading unsuccessful

When attempting to submit a form using AJAX, the call is made but the PHP script does not execute. <form method="post" id="uform" enctype="multipart/form-data"> Name<input type="text" name="name" required> URL<input type="file" name="presen ...

phpajaxforms

Efficiently condense a sequence of ones and zeros into a more compact format, then effortlessly revert it back to the original sequence without any changes. Each time

I've been exploring different approaches in NodeJS and plain JavaScript to improve this task. Currently, I have developed some functions that count the repetition of characters, but I'm curious if there are more efficient methods or potential en ...

javascriptnode.jsstringbinarycompression

Using two variables as parameters in an AJAX URL within a Laravel route

Having an issue where my ajax request fails when using two parameters in the url. --- AJAX--- url: "/post/"+post_id+"/"+vote, --- ROUTE --- Route::get('/post/{id}/{up_or_down_vote} However, if I only use one parameter: --- AJAX-- ...

phpjqueryajaxlaravel