Guide to displaying a partial in the controller following an ajax request

After initiating an AJAX request to a method in my controller, I am attempting to display a partial. Below is the AJAX call I am currently using:

$('.savings_link').click(function(event){
 $.ajax({
    type: 'GET',
    url: '/topics/savings_easter_egg',
    data: {
      savings: data[key]['saving']
    } ,
    dataType: 'json',
  });

 event.preventDefault(); // To prevent the link from following its href
});

The AJAX call successfully reaches my controller method where I aim to return and display a partial.

def savings_easter_egg
  @savings = params[:savings] if params[:savings]

  return render :json => {
    :html => render_to_string({
      :partial => "topics/savings",
      :locals => { :savings => @savings }
    })
  }
end

Upon inspecting with firebug, I received the response:

{"html":"<p>Hi</p>"}

This response reflects my desired partial topics/savings, however, the page fails to reload or display the partial as intended.

I am seeking guidance on how to effectively redirect or display the actual partial. Any suggestions?

Answer №1

Make sure to structure your code in the following way:

$.ajax({
 type: 'GET',
 url: '/topics/savings_easter_egg',
 data: {
  savings: data[key]['saving']
 },
dataType: 'json',
 success: function(data) {
    $('your div').html(data.html);
 }
});

After receiving the response, utilize it within your success function by adding it to the specified div element.

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

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

Using Node.js and Express to retrieve data from a MySQL database and update a table

My .ejs file contains a form that sends data to a MySQL database and then displays two tables with the retrieved data on the same page. However, I am facing an issue where the tables do not refresh after submitting the form, requiring me to restart the ser ...

Obtain identical socket event in two separate useEffect hooks

I am facing an issue where I want to access the same event in two different useEffect functions on the same page. Despite my attempts, it doesn't seem to work as expected. Below is what I have tried so far. I'm wondering if it's possible to ...

What is the best way to invoke a function within a controller from a .factory service?

I have been working on a code snippet where I am trying to create a generic function. This function, when given the name of a function in my controller, should be run from a factory. app.factory('myfactory', function () { return { cre ...

What methods do you suggest for storing the app's state in the browser to reduce the number of requests to the backend?

Recently at work, I encountered an issue with our application that is generating unnecessary requests and causing performance issues. Our technology stack consists of Typescript, React, and Redux (not Redux-Toolkit). I am seeking the following outcomes: ...

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

My goal is to execute a function when the user presses Enter. By setting this input as readonly, my intention is to prevent the user from changing the value once it has been entered. The value will be populated from a popup triggered by the click attribut ...

verifying the AJAX validation request URL

I am seeking a way to ensure that the valuable data generated by my ajax code on my webpage can only be accessed when the request originates from my site. This will prevent third parties from using the data without permission. I intend to implement this ...

What could be causing my search function to not recognize special characters?

It seems like there might be an issue with character encoding. My JavaScript search function is unable to identify specific strings that contain certain special characters such as parentheses, asterisks, and numbers. The JavaScript code I am using is quit ...

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

I am currently working on constructing a graph that illustrates the data for the Amount of Resources utilized Per Project by creating a bar graph. I am aiming to customize the colors of the bars so that each one has its own unique color. Currently, the col ...

Error 500: Issue with CascadingDropDownExtender detected in AJAX Request

Currently, I am troubleshooting an issue with the CascadingDropDownExtender in AJAX. Upon running the sample code, I encountered a problem where I am receiving a "[Method Error 500]" message in the Dropdowns. In my attempt to resolve this, I created a We ...

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

Dynamically manipulate the perspective camera by moving and rotating it using a 4x4 matrix

Greetings, esteemed community members, For the past few days, I have been struggling with an issue related to updating the View Matrix (4x4) of my camera. This update is crucial for positioning objects within an AR-Scene created using three.js. The custo ...

The functionality of nested routing is not operating properly in react-router

I'm currently struggling to get my CollectionPage to render and match the URL correctly within my nested Route in React. Unfortunately, it doesn't seem to be working as expected! Here's a piece of code from my shop.component file that is be ...

Troubleshooting Knockout.JS: Why self.myObservable is not working and the importance of code organization

My webpage uses knockout to handle a search field, dropdown selection, and page number. These elements are all initialized with default values for the first run or when the page is accessed. I'm encountering an error that says: "self.selectedTeamId i ...

Utilizing Ajax and jQuery to verify the initial password input in real-time as the user types

My goal is to create a Change Password page where users can enter their original password and have it instantly checked for correctness without the need for page refresh. I want to display a checkbox image next to the text box when the password is correct. ...

What is the best way to initialize React-map-gl with the user's current location as the default latitude and longitude?

Is there a way to render the map with default values of viewport set to user's location without needing to click a locate me button? <ReactMapGL mapboxApiAccessToken={mapboxApiKey} mapStyle="mapbox://styles/mapbox/streets-v11" ...

Is it possible to execute a URL twice instead of just once in AngularJS?

While developing a web application with AngularJS and Rest Web services, I encountered a problem where the URL is being executed twice instead of just once. I have created a service function for executing the web service API and calling it from the control ...

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

On my page, I am utilizing multiple ajax calls to load specific parts of the response. However, I need to display a spinner on the section where the ajax call is being made to indicate that content is loading. Is there a way to create a universal method th ...

Utilize CSS with dynamically created elements

I am currently figuring out how to use my .each() function with a $(document).ready and a click event. Here's what I have so far: $(document).ready(function(){ $(".help-inline").each(function() { $(this).css('display', 'none&apos ...

Kendo Template Function: Angular JS version 1.6

I'm working with a currency column that looks like this: { field: 'INVOICE_AMOUNT_ORIGINAL', title: $translate.instant('invoiceAmount'), format: '{0:n}', template: '#= currency(dataItem.INVOICE_AMOUNT_ORIGIN ...