When using Rails to render a JSON page remotely, the JavaScript AJAX handler fails to capture the response

My goal is to have a form that can post remotely and then receive JSON data back for my JavaScript to process. Below is the code I am using:

<%= form_tag '/admin/order_lookup', remote: true, authenticity_token: true, id: "order-lookup-submit" do -%>
  <%= text_field_tag 'contact_string' %>
  <%= submit_tag 'Submit' %>
<% end -%>

$("#order-lookup-submit").on("ajax:success", function(e, data, status, xhr) { 
  alert("in success")
})

def order_lookup
  # some code
  render json: @result
end

After performing the POST request, I receive the expected JSON response, but it displays on a separate JSON page (URL: 

http://localhost:3000/admin/order_lookup
).

My intention is for the ajax event handler to capture this JSON data instead of displaying it separately. Can someone point out what might be wrong with my approach?

I have attempted variations like 

respond_to do |format|
  format.js {render json: @result}
end

in various ways, but I keep encountering an ActionController:UnknownFormat error. I have not been able to debug this issue successfully following traditional methods either.

javascriptruby-on-railsrubyajax

Answer №1

Have you attempted to use the respond_to method with .json?

format.json { render json: @result.to_json }

Answer №2

Consider updating your form_tag to:

form_tag '/admin/order_lookup.json', remote: true, authenticity_token: true, id: "order-lookup-submit"

Note the additional json in the URL.

A demonstration app has been developed to showcase this functionality.

testing.js

$(document).ready(function(){
  $("#order-lookup-submit").on("ajax:success",function(event){
    alert("success");
  }).on("ajax:error",function(event,x,y){
    alert("error");
  });
});

order_lookup.html.haml

= form_tag '/admin/order_lookup.json', remote: true, authenticity_token: true, id: "order-lookup-submit" do 
  = hidden_field_tag "testing", "testing"
  = submit_tag "submit"

Controller

class TestingController < ApplicationController
   def order_lookup
     return render json: {hi: "hi"}
   end
end

Routes

Rails.application.routes.draw do
   root "testing#index"
   post "admin/order_lookup" => "testing#order_lookup"

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

Retrieve the individual character styles within an element using JavaScript

I'm currently dealing with a dynamically created div that features styled characters like: <div>Hello <b>J</b>oe</div> and my goal is to identify which characters are styled (in this case, the letter J). I've already atte ...

javascripthtmlcss

Zebra lines overlooking unseen details

Imagine having a table where rows can be dynamically assigned classes such as .hidden, which hide those rows using CSS. The rows are styled with alternating colors, like this: tr:nth-child(even) { background-color: $light-grey; } But here's the ...

javascriptjquerycsscss-selectors

The jQuery selector fails to refresh after the dynamic insertion of new elements

My selector is: $('section#attendance input:last') However, I add another input to section#attendance. I want the selector to target that new element since it should select the last element due to :last. However, for unknown reasons, it does no ...

javascriptjquerytabs

What is the best way to retrieve the object of the selected option from a single select input in Angular

I'm currently working with an array of objects that looks like this: let myArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}] I'm trying to retrieve object values based on a dropdown selection, but so ...

javascripthtmlangulartypescriptrxjs

Error encountered while testing karma: subscription function is not recognized

I encountered an issue with my karma unit test failing with the following error message. "this.gridApi.getScaleWidth().subscribe is not a function" GridApi.ts export class GridApi { private scaleWidthSubject = new BehaviorSubject<{value: number}& ...

javascriptangulartypescriptkarma-jasmine

Arranging a JSON Object Array in JavaScript by its alphanumeric key attribute order

I need assistance sorting this JSON array by unitId var array = [ { id: 10, unitId: 'unit17' }, { id: 11, unitId: 'unit19' }, { id: 13, unitId: 'unit27' }, { id: 12, unitId: 'unit2' }, { id: 13, unitId: 'unit ...

javascriptarraysjsonsortingarraylist

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

When evaluating objects or arrays of objects to determine modifications

How can we detect changes in table data when users add input to cells? For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any ch ...

javascriptarraysangulartypescriptobject

Text alignment issues cause animation to vanish

Utilizing particles.js, I set up a full-screen particle effect by specifying the animation to be full-screen with height: 100vh;. This worked perfectly as intended. However, when attempting to add text on top of the particle animation and center it vertica ...

javascripthtmlcss

What is the best way to access JSON data that is saved in a variable located within a separate component?

I'm currently utilizing axios to fetch JSON data from my API, mapping it, and storing it as a variable. I'm struggling to figure out the optimal way to call these variables within my React components. Retrieving and Storing JSON Data as Variable ...

javascriptjsonreactjsvariablesaxios

What is the method to reach a named parameter within a function?

Currently, I am building a RESTful web service using Node JS in combination with Backbone JS. Within this service, there is a specific REST method called GET /users/id/:id, where :id represents the user's identification number. The purpose of this met ...

javascriptnode.jsrestexpress

Error in Redux-tookit: The store is missing a valid reducer. Ensure that the argument provided to combineReducers is an object containing reducers as values

Uh oh! Looks like there's an error with the Store reducer. The argument passed to combineReducers needs to be an object with valid reducers. I'm having trouble setting up a Store for my app and I can't figure out where I went wrong. Could s ...

javascriptreduxredux-toolkit

AngularJS encountered an error while attempting to load a template: [$compile:tpload]

After developing my angularjs example app in my netbeans ide based local server, I encountered an issue when I tried to move the application to an nginx server. The browser displayed the following error message: Error: [$compile:tpload] Failed to load tem ...

javascriptangularjsnginx

How can we add up the sum with just one click and then display the

Is there a way to calculate numbers within specific DIV boxes and display the total in a separate DIV when a box is clicked? I've attempted different methods, including enclosing the code within the window.onclick function. Check out my code on this J ...

javascripthtmljquery

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

javascriptcssfontsfont-facewebfonts

Capturing member function details using JSDoc

Here's the code snippet I'm working with: /** This class blah blah... @constructor **/ my.namespace.ClassA = function(type) { /** This function performs an action **/ this.doSomething = function(param){ } } The class will be inc ...

javascriptjsdoc

Developing view logics in Angular using ng-grid/ui-grid

Exploring the possibilities of creating a grid with advanced features such as filtering, resizing, scrolling, fixed headers, row formatting, and cell formatting using AngularJS. After reviewing various grids documentation, I have come across the following ...

javascriptangularjstwitter-bootstrapgrid

Function that recursively checks for the existence of an ID within a nested object structure

I need assistance in developing a function that can determine whether the link ID of an object or any of its children match a specific ID. For instance, if the link ID for Product paths is 51125095, the function should return true when this ID is passed in ...

javascriptjavascript-objects

Issues arise when attempting to store multiple images in Django

Having trouble saving files in my Django project. Can anyone provide assistance? I am working with a form that has 2 fields: description and image. Users can upload multiple images using the image field, for which I used the django-multiupload app. The da ...

pythonajaxdjangopython-3.xdjango-1.10

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

javascripthtmlcsswebgl