Is there a way to dynamically update a controller variable using AJAX in Ruby on Rails

After selecting a row in my table, I aim to update a variable in the view using JavaScript. Here is the function I currently have:

$("#myTable tr").click(function(){

var rowData = $(this).children("td").map(function() {
return $(this).text();
}).get();
  
var id = $.trim(rowData[0]);

$.ajax({
...
});

})

I'm looking to send the "id" variable to the controller for updating in the view. However, I'm unsure of what to include within the ajax call and the controller. I understand that I'll need to use a respond_to, but I'm uncertain about the additional steps.

Answer №1

To achieve this functionality, you need to include the following code:

$.ajax({
    type: "POST",
    url: <%= path_of_controller_action %>,
    data: { data you wish to send },
    beforeSend: function() {
      $form.find(':input').prop('disabled', true);
      $form.find('.ajax-in-progress').removeClass('hidden');
      return Daisy.ajax_loader(true, 'waiting', 'small');
    },
    success: function(data) {
      return location.reload();
    },
    error: function(e) {
      alert("Oops! An error occurred, please try again");
      return console.log(e);
    }
  });

If you require additional features, consider implementing DataTable Ajax

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 encountered: `TypeError: Unable to access undefined properties (specifically, '0') within the Simple React Project`

Currently in the process of learning React and working on a simple photo application. Encountering an issue: Collection.jsx:6 Uncaught TypeError: Cannot read properties of undefined (reading '0') Why is this happening? Everything was functioni ...

Limit the number of API queries allowed in Node.js

In my quest to restrict queries made to the Battle.net API within their limits of 100 calls per second and 36,000 calls per hour, I am facing a challenge. The current implementation of my code is as follows: var async = require ('async'); var b ...

Error: Unable to locate module - Invalid generator instance detected. The Asset Modules Plugin has been started with a generator object that does not adhere to the API standards

Encountering an issue in nextjs when utilizing the 'asset/inline' Asset Module Type within a custom webpack configuration while running yarn dev. I attempted to utilize the 'asset/inline' asset module type to output the URI of the impor ...

The AJAX validation process fails to run prior to the execution of the login PHP script

My attempt to implement AJAX for form validation is not successful and I'm unsure why. Despite my efforts, the form still redirects to login_action.php instead of performing the AJAX validation as intended. I have designed a modal login form and wish ...

`Increase Your Javascript Heap Memory Allocation in Next.js`

We are facing a challenge with the development environment for our Next.js application. Issue The Javascript heap memory is consistently depleting. Here are the specific error logs: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out ...

Payload bytes do not match the expected byte values

I am facing an issue where the image data sent by the user is getting saved on the server in a corrupt state. Here is the structure of my setup: - api . index.js - methods . users.js (I have omitted unrelated files) There is a server.js outside ...

Issue with Tinymce failing to send the submitted content

I don't have much expertise in programming and my experience with Javascript is limited, so working with Tinymce has been a challenge. My client wants to be able to update the content without delving into the code, which is why I'm setting up Tin ...

Exploring the possibilities of event-driven programming with Java and Javascript?

When performing computations on a server, the client inputs data that is captured through Javascript. A XMLHttpRequest is made to send this data to the server for processing. What happens if the computation takes an hour and the client leaves or switches o ...

The issue of an unsuccessful Ajax call arises in a WordPress plugin when utilizing wp_remote_get

Encountering difficulties with the wp_remote_get function in my Wordpress plugin. The objective is to invoke a method within my primary public class using ajax. However, every time I attempt to make the call with the wp_remote_get function, it fails. This ...

Tips for maintaining high performance while continuously animating SVG paths

I'm currently working on developing a mobile game that involves drawing 6 SVG paths and continuously moving them from top to bottom on the screen. I have implemented a simple JavaScript function that updates certain variables and uses them to set the ...

How can I prevent a postback from occurring when using a jQuery dialog with a

$(document).ready(function () { $("#TaskCreatorDivButton").click(function () { $("#taskCreationForm").dialog( { width: "600px" } ); }); }); ...

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

The function causes changes to an object parameter once it has been executed

I've encountered an issue with a function that is supposed to generate a string value from an object argument. When I call this function and then try to use the argument in another function, it seems to be getting changed somehow. Here is the code fo ...

Struggling to get SVG and <p> elements to align on the same line using display:inline-block?

Alright, I'm struggling to align this HTML content properly. The generated code looks like: <div id = "innerCal"> <div id = "calCell"><p>[</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs>< ...

Stripping ajax scripts from ASP.net HTML output

When considering the WebResource and ScriptResouce js files that are included in the page's html, it becomes evident that they can be quite large. However, on certain pages, these resources may not be necessary and can be safely removed. Although rem ...

Avoid wrapping elements

Is there a foolproof method or best practice to prevent an HTMLElement from wrapping? Specifically, I'm referring to elements with relative positioning. One possible solution could be using absolute elements and adjusting their left position based on ...

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test: import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces' import { areSameActions } from '../actionsProgress' export const findActionPr ...

Refresh selected items after inserting data via ajax in CodeIgniter

I have a select list on my view that allows users to add new items using a plus button. However, when a new item is added, the list does not refresh. I don't want to refresh the entire page with an ajax query. Instead, I am trying to implement a metho ...

Which is more effective: Layering multiple canvases in the DOM or consolidating all drawing on a single canvas?

In my previous projects, I have had experience working with layered canvases. While some of my colleagues swear by this approach, I find myself skeptical about its effectiveness. My primary concerns are: If multiple canvases are layered and one undergoes ...

Storing Firebase credentials securely in Vue.js applications after deployment with environment variables (env_var)

I've been attempting to deploy my firebase&vue application, but I've encountered issues with adding firebase credentials to the environment variables. Here's the structure within vue.js: config ---- key.js ---- keys_dev.js ---- key ...