Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

I have a form that triggers a remote GET request, leading to the display of a modal. The issue I'm facing is that multiple actions can utilize the same model, so I am attempting to employ a helper and jQuery to showcase different data based on what is being shown.

Below is the content of my add_users.js.erb file (executed after the remote GET request):

$('.modal-footer').html("<%= import_users_html %>");

Here is the structure of the helper:

def import_users_html
    html = link_to '<i class="fa fa-download"></i> Import Users'.html_safe, '#', remote: :true, class: "btn btn-success btn-sm"
    return html
end

However, when the HTML is returned, it fails to display within the <div class="modal-footer" section. If I replace import_users_html with "Hello World," everything works seamlessly.

There seems to be an issue somewhere with how the HTML is treated. Below is the actual content of the html variable before it is sent back to the add_users.js.erb view:

[2] pry(#<#<Class:0x00007f3bbe257050>>)> puts html
<a class="btn btn-success btn-sm" data-remote="true" href="#"><i class="fa fa-download"></i> Import Users</a>

I've attempted various solutions such as html_safe, raw, but none seem to resolve the issue for some reason.

** EDIT **

I discovered that the problem arises from link_to converting the link to include double quotes, which conflicts with how I am using it in my add_users.js.erb helper.

javascriptruby-on-rails

Answer №1

If you're working with javascript code, consider trying the following approach:

$('.modal-footer').html("<%= j(import_users_html) %>");

The use of j as an alias for escape_javascript helps to handle conflicts with quotes in your code.

You can learn more about escape_javascript on the official Ruby on Rails documentation.

This function escapes carriage returns and single and double quotes in JavaScript segments.

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

Troubleshooting: Issue with Firebase callable function execution

In my index.js file, I have the following code snippet: const firebase = require("firebase"); const functions = require('firebase-functions'); // Firebase Setup const admin = require('firebase-admin'); const serviceAccount = require(&a ...

javascriptnode.jsfirebasegoogle-cloud-functions

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

I am having trouble saving the text from a textarea to the Controller session using jQuery AJAX post method in Codeigniter Smarty. I am unable to save the data to the session. Can someone please provide me with guidance and a detailed example of how to ach ...

javascriptphpjqueryajaxcodeigniter

Navigating Pre-Fetched Client Routes in Gatsby with @ReachRouter

Let's consider this scenario. Imagine a user enters /company/<company-id> in the address bar. Because the app is completely separate from the backend, it must prefetch the companies. The usual flow is /login -> /company/. Handling this sequenc ...

javascriptreactjsgatsbyreach-router

Using jQuery Flot to dynamically load data onto the x-axis from an array

I have a jQuery flot graph that loads the x-axis data as follows: xaxis: { tickColor: 'transparent', tickDecimals: 0, ticks: ticks }, When I manually set the ticks variable like this, everything works fine and the x-axis displays the 7 da ...

javascriptjqueryflot

What is the best way to utilize AJAX to upload several images in PHP?

I have a UI that looks like this: I am trying to upload multiple videos using ajax in PHP. I attempted to use FormData() in jQuery for this purpose. However, it seems to only upload one image and not more than that. Here is my Form file : <form enct ...

javascriptjqueryajaxhtml

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

I am currently working on a todo list project using the MERN stack with Redux for state management. One issue I am facing is that the checkboxes for completed tasks are not reflecting the correct state from Redux when the page loads. Even though some tasks ...

javascriptreactjsredux

Obtain the distinct highest value for every vertical axis on a bar graph

I'm facing an issue with my code where I am appending multiple SVG elements and generating 3 different charts. The problem is that the maximum value evaluated from the y.domain() for each y-axis is taken as the maximum value from all of my data. Is t ...

javascriptd3.js

Error message "Unexpected token" occurs when attempting to use JSON.parse on an array generated in PHP

My attempt to AJAX a JSON array is hitting a snag - when I utilize JSON.parse, an error pops up: Uncaught SyntaxError: Unexpected token Take a look at my PHP snippet: $infoJson = array('info' => array()); while($row = mysqli_fetch_array($que ...

javascriptphpajaxjson

Adding elements within a loop using jquery

I am currently working on adding a toggle button using Javascript. I want to include three span tags inside it as well. To achieve this, I am creating a span variable and attempting to append it within a basic FOR loop that iterates 3 times. Below is the ...

javascriptjqueryhtml

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

javascriptreactjstypescripthelperreact-typescript

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

javascriptcssangularjs

Having trouble using the `.not` function in jQuery

I'm working on implementing a collapsible menu using jQuery. When any header is clicked, the next sibling (the box) should expand while all other boxes collapse. HTML <div class="finbox" id="finbox1"> <div class="finheader" id="finheade ...

javascriptjqueryhtml

Utilize the power of AJAX for efficiently sorting search results retrieved from MySQL

I'm in the process of designing a flight search page. The initial page contains a form, and when the submit button is clicked, the search results are displayed on the second page. Here's the link to the first page: To test it out, please follow ...

javascriptphpjquerymysqlajax

Vuex was unable to locate the required dependency

Currently, I'm following an instructional video that incorporates Vuex. As shown in my package.json dependencies, I have installed Vuex: { "name": "blabla", "version": "1.0.0", "description": "blablaa", "author": "blabla", "private": true, ...

javascriptnode.jsvue.jsvuexvuetify.js

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

The antithesis of jQuery's .parents() selector

I am currently developing a userscript for a webpage with an old-fashioned design consisting mainly of tables. My goal is to access a long table of fields so that they can be filled in automatically by the script. To simplify, the structure is as follows: ...

javascriptjquery

Using Jest to mock React components with dot notation

I am facing a challenge with a component that dynamically renders either a main component or a loading component based on the data being loaded: // components/example import Component from 'components/component'; const Example = ({loaded}) =&g ...

javascriptreactjsunit-testingjestjs

"Explore a different approach to file uploading with React Native JavaScript by using either blob or base64 encoding

I am in the process of uploading visuals. When I employ this technique, it functions as expected: formData.append("file",{uri,type,name}); Yet, I prefer not to transmit my visual using the URI. My intention is to divide the visual into distinct sections ...

javascriptreactjsreact-nativefile-uploadbase64

"Displaying a popup message prompting users to refresh the page after clicking

I need to implement a feature where the page refreshes only after the user clicks the "OK" button on a dialog box that appears once a process is completed. The issue I'm facing is that in my current code, the page refreshes immediately after the proc ...

javascriptc#asp.netajaxfunction

Select the first item that is visible and chosen

Currently, I am working with a select list: <option ng-repeat="hour in Hours" value="{{hour.Value}}" ng-show="filterEvent($index)" ng-selected="hour.Value == EventDate || $first"> {{hour.Text}} </opti ...

javascriptjqueryangularjs