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

Learn the process of eliminating a class utilizing this JavaScript function

This script is designed to identify and manipulate elements with the class menu-option-set. When an element within this class is clicked, it adds the class "selected" to that specific element while removing it from all others in the list. My goal is to en ...

javascriptjquery

Dealing with an overwhelming amount of logic in the controller compared to the models communicating with each other

While developing a small application, I ran into a code design dilemma. The application features multiple tables, each with 2 seats. Once two players sit at the same table, a game commences. In my current setup, I have a tables controller, a table model, ...

ruby-on-railsajaxmodel-view-controller

Enhance jQuery event handling by adding a new event handler to an existing click event

I have a pre-defined click event that I need to add another handler to. Is it possible to append an additional event handler without modifying the existing code? Can I simply attach another event handler to the current click event? This is how the click ...

javascriptjqueryevents

Navigating through a collection of objects

My array consists of objects, each having the following structure: var car = { make: "", model: "", price: "" } I am attempting to iterate through each object and check if a specific property is defined in this manner: for (i = 0; i <= ...

javascriptarraysloopsobject

Is it possible to make multiple AJAX requests at the same time using AngularJS

I am looking to simultaneously send multiple AJAX requests. Here is the JS code I have: <a class='btn btn-success' ng-click='getDataajax()'>Re Check</a> app.controller('customersCrtl', function($scope, $http, $ti ...

jqueryajaxangularjs

Is it necessary to define module.exports when using require() to import a file?

While setting up my Express server, I am using Babel to transpile my ES6 files seamlessly. In my vanilla JS server.js file, I include require('babel-core/register') and require('./app'). Within my ES6 file app.js, I handle all the usua ...

javascriptnode.jsexpressrequirebabeljs

React router updates the URL without affecting the actual display

I am facing an issue in my React project where the URL changes when clicking a link, but the view does not update. I have a separate route and links file, and I can't seem to figure out the problem. Here is my index.js: import React from 'react ...

javascriptreactjsroutes

Troubleshooting: How to resolve the issue of receiving undefined values when passing API data to a child component with Axios in React

I am encountering difficulties in retrieving data that I pass to a child component. The issue may be related to the Promise not being resolved at the time of access, but I am unsure how to address it. My goal is to ensure that the data is fully retrieved f ...

javascriptreactjspromiseaxiosundefined

I'm looking to create a Vuex getter to retrieve data from the Google API documentation – can you help

Can someone help me figure out how to create a getter in Vuex store with flat data from the Google Docs API? My goal is to extract the textRun content and store it in an array because there will be multiple messages. Currently, I have hard coded this respo ...

javascriptvue.jsvuexgetter

The GitHub-hosted package encounters a failure during the npm publish process

Last week everything was running smoothly, but now I am encountering an error and not sure what went wrong. (Apologies for the formatting as there are many lines of log) Running Node version: v10.15.3 Using npm version: 6.4.1 After executing npm publish ...

javascriptnode.jsnpmgithub-package-registry

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Seeking assistance from fellow developers. Working on a PHP web app utilizing the Yii MVC framework and its array of tools. Specifically, I am looking to dynamically refresh a div every 10 seconds. Currently, my Ajax function looks like this: <script t ...

jqueryhtmlajaxrefresh

Dealing with illegal characters, such as the notorious £ symbol, in JSON data within a JQuery

I'm encountering an issue with a textarea and the handling of special symbols. Specifically, when I use $('#mytextarea').val() to retrieve text that contains '£', I end up seeing the black diamond with a question mark inside it. T ...

javajavascriptjqueryjson

JavaScript detecting improper XHTML syntax

Is there an effective method to detect malformed XHTML within a string using JavaScript? Given that my page allows user-generated XHTML (from trusted users) to be inserted into the DOM, I aim to identify unclosed or overly closed tags. If found, I intend ...

javascripthtmlregexxhtmltags

Is it possible to verify the versions of node and npm prior to running an npm install command?

To ensure only specific versions of node and npm are used before a user can run the npm install command on my module, I need to set certain criteria. According to NPM documentation, I can use the engine attribute for this purpose: "engines": { "nod ...

javascriptnode.jsnpmnpm-install

The Relationship Between jQuery's .ajax Method and the Same Origin Policy

I have developed a functional HTML5/JS application intended for use in a vehicle, utilizing the network API provided by the vehicle manufacturer for get/post requests. Now, as I attempt to transition this app to run in a browser for a demonstration, I am ...

jqueryajaxjsonjsonpsame-origin-policy

The conversion of string to number is not getting displayed correctly when using console.log or document.write. Additionally, the concatenated display is also not functioning as intended

Being new to JS and HTML, this program was created to enhance my understanding of the concepts. I attempted a basic program to convert a string to a number in three different ways, but I am having trouble determining if the conversion actually took place. ...

javascripthtmltype-conversionconsole.logdocument.write

How can Express JS be configured to make URL calls from a local environment?

I encountered an issue with my code (Weather App using OpenWeatherMap Api) when I attempted to move my apiKey and apiUrl to the .env file. An error appeared in the terminal, but it's unclear why it occurred. Below is my code: const express = require( ...

javascriptnode.jsexpress

Validation of forms on the client side using Angular in a Rails application

I'm facing an issue with implementing client-side validations for a devise registration form using Angular. Although I am able to add the "invalid" class to the fields as expected, I am struggling to get any output when using ng-show. There are no oth ...

javascriptruby-on-railsangularjsvalidation

Using jQuery's setInterval to consistently refresh the value of a data attribute

I am struggling to dynamically update the data-left value of a div with the class name "tw_marquee_scroller" every 1 second. The intended behavior is for the value to increment by 10 each time, starting at 10 and increasing by 10 in subsequent seconds. H ...

javascriptjquerysetinterval

Adding nested JSON data to MySQL using NodeJS

My current challenge involves using Node.js to INSERT JSON data into a MySQL database. Everything runs smoothly until I encounter nested values within the JSON structure. Here is an example snippet of my JSON data: var result2 = [{ "id": 89304, "employe ...

javascriptmysqljsonnode.js