form_not_submitting_ajax

In the app I'm working on, I have a form that is defined in the following manner:

= form_with model: project, remote: true, method: :put do |f|
  = f.select :selected_draw, options_for_select(project.draws.pluck(:number, :id), draw.id), {}, class: 'form-control', onchange: "this.form.submit()"

Even though I am using remote forms elsewhere in my application and the data-remote attribute is being set on this particular form, I am unable to get it to submit as a remote form. Can someone please advise me on where I might be going wrong?

javascriptruby-on-railsajaxxmlhttprequest

Answer №1

By calling this.form.submit(), the 'submit' event is not triggered, causing Rails callbacks to not process it as a remote form.

Instead, use 

onchange="Rails.fire(this.form, 'submit')"
. This informs Rails javascript objects to fire the event.

UPDATE: This method works with rails-ujs, but I am unsure if it applies to jquery-ujs as well

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

Divide a JSON API object into segments within an express application

One way I'd like to organize my API's output is by splitting it into multiple pages. My idea is to access them using URLs like this: http://127.0.0.1:3000/api/articles/0/<API-TOKEN> This specific URL would display the first page containing ...

javascriptjsonnode.jsapiexpress

Effective methods for transferring parameters between two separate JavaScript files within an express.js application

Currently, I am working with Express.js and facing a challenge in passing parameters from one JavaScript file to another. How can this be accomplished? The two files involved are 1. process.js var WebPageTest = require('webpagetest'); var wpt ...

javascriptnode.jsexpress

Strange behavior exhibited by the HTML DataList component within an Angular application

I have created a simple component that displays a list of data and allows users to add new entries. <h6 *ngIf="withHeader"><label for="select"> {{title}} </label></h6> <label *ngIf="!withHeader" [ngClass]="{'required&apos ...

javascripthtmlangulardomhtml-datalist

Reverting to the original order in jQuery DataTables after dropping a row

Recently, I've been attempting to utilize jQuery DataTables in conjunction with the Row Ordering plugin. At first, everything seemed to be functioning properly until a javascript error popped up indicating an unrecognized expression. After researching ...

javascriptjquerydatatables

Steps for converting a tsx file into a js file in React

Currently, I am in the process of a React Project and have numerous tsx files that I aim to convert for utilization as JavaScript within my project. What would be the best approach to achieve this task? ...

javascriptreactjstypescript

¿What is preventing me from merging two arrays within this query handler?

I'm facing an issue while trying to merge arrays from a request with existing arrays in a MongoDB database. Despite my attempts, the arrays do not seem to be merging as expected. Can anyone help me identify what might be causing this problem? router.p ...

javascriptmongodbexpressserver

Mongodb failing to recognize the concat function

I have a field within my collection that looks like this: uniqueId: 123 inTarefa: true exclude: "ab,cd," orderId: 987 I am attempting to update all of the values using a "FindOneAndUpdate" query like so: collection.findOneAndUpdate({ 'uniqu ...

javascriptmongodbnext.jsmongodb-query

Here's a way to run JavaScript code from a <script> tag included in an AJAX response

Currently, I am making a jQuery GET request in this format: $.get($(this).attr("href"), $(this).serialize(), null, "script"); I'm expecting the response to be enclosed in script tags. I know that the browser won't run the response if it contai ...

javascriptajaxjquery

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

Breaking apart faces of a sphere using Three.js

I am currently working on creating a sphere geometry. geometry = new THREE.SphereGeometry( 200, 20, 10 ); material = new THREE.MeshLambertMaterial({ shading: THREE.FlatShading, color: 0xff0000 }); sphere = new THREE.Mesh(geometry, material); scene.add( sp ...

javascript3dthree.jsgeometry

The teleport-controls feature is currently not functioning properly in VR mode with Aframe version 0.8.2

Having an issue with the teleport-controls under aframe 0.8.2. When in VR mode using Vive, only the curve appears after touching the trackpad of the controller, but the camera position does not change. However, in flat mode, both the curve and camera posit ...

javascriptaframewebvrhtc-vive

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

I've successfully implemented a delete function using type: 'DELETE', and now I'm attempting to create an UPDATE function. However, I'm unsure if I'm approaching this correctly. Here's the code I've written so far: ...

javascriptajaxmongodbexpresspost

Trying out the fetch api with Jest in a React Component: A step-by-step guide

As a newcomer to test driven development, I stumbled upon a section that talked about testing/mocking a fetch API. However, I am facing issues while trying to write my own test. In order to practice this concept, I created a simple weather app where I atte ...

javascriptreactjsunit-testingtestingjestjs

Is there a way to determine if a string is empty, even if it contains hard returns?

I am currently working on a function that checks if a string is empty or not, but it seems to be missing the detection of new lines. export const isStrEmpty = function(text: string): boolean { return !text || text.match(/^ *$/) !== null; }; I attempted ...

javascripttypescript

Implementing a transition effect to the drawimage function

I am currently working on implementing a transition effect for an image inside a canvas element. I have provided a snippet below to demonstrate my progress so far. Can anyone guide me on how to incorporate a transition animation for the image within the c ...

javascriptreactjscanvashtml5-canvas

Encountering a snag when trying to load JavaScript within an HTML document

I encountered an error while trying to load an HTML file in the JavaScript console of the Brave browser. The error message reads: require.js:5 Uncaught Error: Module name "constants.js" has not been loaded yet for context: _. Use require([]) https://requir ...

javascripttypescriptrequirejsflatbuffers

JEST: Troubleshooting why a test case within a function is not receiving input from the constructor

When writing test cases wrapped inside a class, I encountered an issue where the URL value was not being initialized due to dependencies in the beforeAll/beforeEach block. This resulted in the failure of the test case execution as the URL value was not acc ...

javascriptnode.jstypescriptjestjs

Removing entries from a mySQL database using a combination of ajax, php, and javascript

I have developed a basic comment system here, and now I am looking to add a delete button that, when clicked, will remove the comment from the database. However, I'm struggling with implementing this feature in my comment system. I already have JavaSc ...

mysqlajax

Problems arise when using AngularJS' .run function after navigating to a different page

I have encountered an issue with ngRoute while navigating between pages in my web application. The main login page is called index.html, and the routing is controlled by the main js file. However, I face a problem when trying to use a .run block on a speci ...

javascripthtmlangularjs

The issue of `function.prototype` not functioning correctly when used alongside `module

I have a file that contains a current function implementation function bar(){ /*Code goes here*/ } bar.prototype.method = function(param){ /*Some code*/ return this } module.exports = bar In the test file, I encountered some issues, let y = requir ...

javascriptclassnpmmodulenode-modules