Having trouble getting js.erb files to work in Rails?

When submitting a form with complex nesting to a Rails controller, the Javascript tied to the submit button is crucial. Here's an example:

    $('#new_search').submit(function() {  
    var valuesToSubmit = $(this).serializeArray();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //submits it to the given url of the form
        data: valuesToSubmit,
        dataType: "POST" 
    })
    return false; // prevents normal behavior
});

The Rails controller successfully handles this and ensures that all parameters are in place.

Following that, I render a js.erb file:

 respond_to do |format|
  format.js { render '/searches/update_search_results.js.erb' } 
 end

The log confirms that the file has been rendered:

Rendered searches/update_search_results.js.erb (0.3ms)

However, even a simple alert("hello world"); within the js.erb file is not triggering. There are no reported Javascript errors in the console log. Could the issue be related to the original Javascript that sends the Ajax request? Any suggestions or insights would be greatly appreciated. Thank you!

Answer №1

After making some adjustments, I was able to resolve the issue by reverting back to the old format: :remote => true in the form definition within the view.

I initially believed that modern practices had transitioned away from this method in favor of unobtrusive JS triggering off the submit event. It appears I was mistaken, but I am sharing this solution in case it proves helpful to someone else.

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

How can I retrieve the ultimate value of a JQuery UI Slider and store it in a PHP variable?

I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...

Quickly block all paths in Express

Attempting to implement var _LOCK_ = true; // either set it manually or load from configuration settings app.all('*', function(req,res,next){ if(_LOCK_) return res.send(401); next(); }); // other routes go here app.get(...); app.post(... ...

Client-Side Isomorphic JS: A Guide to Using HTTP Requests

Seeking advice on data population for isomorphic flux apps. (Using react, alt, iso, and node but principles are transferable) In my flux 'store' (), I need to fetch data from an api: getState() { return { data : makeHttpRequest(url) ...

Using asynchronous import statements in Vue allows for more efficient loading of components

I am using Vue and have a method in my file called load.js. async function loadTask(x) { return await x; // Some async code } export { loadTask }; In one of my Vue components, I call the method but encounter an issue where the use of await prevents the ...

What could be the reason for my React Component not properly associating with the image?

The title appears to be correctly displayed, but there seems to be an issue with the images. I've thoroughly reviewed the code multiple times, but unfortunately, I'm unable to identify the problem. Please provide guidance on what changes need to ...

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

In JavaScript, split each element in an array into individual elements

Is there a way to split elements separated by commas into an array in JavaScript? ["el1,el2", "el3"] => ["el1", "el2", "el3"] I am looking for a solution to achieve this. Can you help me with that? ...

Using localStorage in the client side of nextJS is a breeze

Encountering an error while attempting to retrieve local storage data. Even with the use client directive in place at the beginning, the issue persists. 'use client'; const baseURL = 'https://localhost:7264'; const accessToken = localSt ...

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Currently, I have integrated Ant Design into my application as the design framework. One of the components it offers is the Carousel, which provides two methods for switching panes within the carousel. If you are interested in utilizing this feature using ...

Error encountered in a Node.js Express application: 'Error in Jade template (version 1.0+): The usage of duplicate key "id" is not permitted.'

Seeking guidance on the following issue: Within my Express app, I am providing numerous parameters to a Jade template, resulting in an error message that states: Duplicate key "id" is not allowed. (After reviewing, I have confirmed that there is no para ...

Ajax is known for its uncanny ability to consistently encounter errors

Having trouble with my ajax call, it keeps ending up in the error part. Can someone please assist me and point out where I may be going wrong? I even checked by writing the final value to a text file and everything seemed fine. The URL is correct as well. ...

Determine the quantity of items stored in a database using AJAX and JSON in ASP.NET

I am trying to count the elements in my database using ajax/json in asp.net with a GET method. This is what I have so far: // GET: /People/ public JsonResult Index() { var count = db.People.ToList().Count; return Json(count ...

Using ng-if to compare dates in AngularJS without considering the year

I am facing a comparison issue with dates in my code. I have one date that is hardcoded as the first day of the month, and another date coming from the database (stored in a JSON object). When I compare these dates using ng-if, it seems to ignore the year ...

What are the steps to sorting in JavaScript?

I need help with sorting an array. The array I have looks like this: var temp = [{"rank":3,"name":"Xan"},{"rank":1,"name":"Man"},{"rank":2,"name":"Han"}] I've tried to sort it using the following code: temp.sort(function(a){ a.rank}) But unfortun ...

JavaScript/jQuery: What is the best way to assign an element as the context ('this') of a function?

Is there a way to pass something to a function and have it act as if it's calling the function itself? Consider this function: function ShowId() { alert($(this).attr('id')); } and this block of HTML: <div id='div1'> & ...

What is the best way to showcase images using Vue.js?

For my Vue project, I am encountering issues with the image paths not working properly. Despite trying different variations, such as: <figure class="workout-image"> <img :src= "images.bicep" width= "200px" ...

How can we retrieve a jQuery selector from a $.get() function

When utilizing $.get() to fetch data, it successfully retrieves the entire HTML page. I am looking for a way to use selectors on the fetched data in order to extract specific information from elements, similar to how I would use $('.someclass') ...

When attempting to delete a resource using an HTTP request in Insomnia, I encountered a TypeError stating that it was unable to read the property 'id'

I recently started using Express and am in the process of setting up the Delete function for my database within the MERN stack. While testing my CRUD operations using Insomnia, I have encountered an issue specifically with the Delete operation. The proble ...

Using JavaScript to replace multiple instances of <a href> with corresponding <img src> tags throughout a webpage

My goal is to create a script that will automatically copy the 'img src' and paste it into an 'a href' on a page containing a photo gallery with multiple images. This action should take place as soon as the page loads. Check out my HTML ...

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Let's dive into the difference between AJAX and Fetch without involving CORS. I want to understand why an AJAX POST request works flawlessly while a Fetch POST request fails! Currently, I am using jQuery and AJAX for both GET and POST operations. Whe ...