Nested attributes added through the nested_form gem causing issues with the Bootsy editor

I have been utilizing the nested_form gem to handle associated entities within my form. Additionally, I am incorporating a wysiwyg editor through the usage of bootsy. However, I have encountered an issue where the nested attributes lack a wysiwyg field functionality. Interestingly, it functions as expected for un-nested entities on the page but not for those that are nested.

<%= nested_form_for @project do |f| %>
  <%= f.text_field :name %>
  <%= f.bootsy_area :project_description %> ''WORKS''
  <%= f.fields_for :tasks do |task_form| %>
    <%= task_form.text_field :task_name %>
    <%= task_form.bootsy_area :task_description %> ''Do NOT WORKS''
    <%= task_form.link_to_remove "Remove this task" %>
  <% end %>
  <p><%= f.link_to_add "Add a task", :tasks %></p>
<% end %>

The project description displays as a wysiwyg field successfully, while the nested field, task_details, only renders as a regular text area. Any insights or suggestions from others would be greatly appreciated.

Answer №1

The instructions provided in the documentation for nested_form suggest that you must enable it on recently added elements by triggering JavaScript events manually. The code snippet below demonstrates this process using jQuery.

$(document).on('nested:fieldAdded', function(event){
  Bootsy.init();
});

This method has proven effective for me as well (I am also utilizing nested_form).

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

Modifying text size using JavaScript string manipulation

I'm currently experimenting with a countdown script, but I'm struggling to change the size of the numbers displayed. Can anyone help me find where I can adjust the font and font size in this script? var eventdate = new Date("February 20, 2014 11 ...

Adding padding to navigation items in Bootstrap 5 when the collapsible navbar is expanded

How can I modify the CSS rules for nav items in a Bootstrap 5 collapsible navbar to have proper padding and margins only when they are expanded and the buttons are on the right side? <!DOCTYPE html> <html lang="en"> <head> <meta ...

Direct the user to a webpage with the option for postback functionality or caching

I'm encountering an issue on my webforms site with 2 menus. When a button is clicked on a page, it triggers some C# events through a webservice (ajax) and then redirects to another page using history.go(-1). The problem arises when I create a session ...

Angry Librarians Uncover Secret to Incrementing Variable in Angular.js

Check out my HTML snippet: <div ng-app='app'> <div ng-controller="MyController" ng-init="myVar=7"> {{myVar}} <span ng-init="myVar=myVar+5">{{myVar}},</span> <span ng-init="myVar=myVar+15">{{myVar}},</ ...

Searching for two fields of an object in Angular using ng-repeat

Let's imagine we have this array $scope.myArr = [{ name: 'Marc Rasmussen', phone: 239470192, title: 'It Dude', description: 'Hello my name is Marc i am testing the fact that i can search for two fields in an o ...

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

Trapped in the JavaScript Checkbox Filter Maze

After successfully creating a javascript-only filter, I have hit a roadblock and could really use some assistance. The filter is divided into "days" and "events". When a user clicks on a day or multiple days, the events for those selected days are displa ...

Enhance your React application by making two API requests in

Below is the React Component that I am working on: export default function Header () { const { isSessionActive, isMenuOpen, isProfileMenuOpen, setIsMenuOpen, closeMenu, URL } = useContext(AppContext) const [profileData, setProfileData] = useState({}) ...

Instructions on how to retrieve all store items while filtering in React JS and Redux

I am encountering an issue while trying to implement a "typeahead" functionality in my application. I have an "input" that listens for onChange events, and when an onchange occurs, it calls a Redux reducer that searches for a tag in the entire store. Every ...

Iteratively modify each essential attribute of a JSON object

In my data set, I have moisture levels recorded at various timestamps in a JSON object: { "values": { "21-Aug-2020 20:28:06:611591": "58.59", "21-Aug-2020 20:28:09:615714": "71.42", "21-A ...

The HTML modal window is experiencing loading issues

I am attempting to implement a modal box that appears on click in an HTML document. The HTML code looks like this: <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> </div> <a href="#openModal">O ...

Steps to trigger an alert when the entered quantity exceeds the current stock levels

After developing an IMS System, I encountered a problem where my stock is going into negative figures. To resolve this issue, my primary goal is to trigger an alert whenever the quantity entered by a user exceeds the available stock. For example, if a us ...

Is it possible to use Javascript to automatically calculate the number of characters in a form input box and then populate the form quantity input

I have successfully created a JavaScript function that counts the characters in a TextArea and displays the result in another TextArea. Now, I am faced with the task of adapting this function to work within an existing shopping cart form, where it is curr ...

Maximizing the potential of Next JS 13 Server Components

Exploring the updates in Next JS 13, I have found it intriguing that every component is now a server component by default. This concept has been puzzling for me as I try to grasp how to effectively leverage this feature. For instance, my current challenge ...

Creating a selectAll checkbox that triggers the ng-click function on each individual checkbox

I've encountered an issue with my code where clicking a checkbox triggers the ng-click function. Here is the JavaScript snippet: $scope.selectTitle = function(evt, selected){ evt.stopPropagation(); var filtered = _.findWhere($scope.se ...

Quality of check-boxes and radio-buttons

Looking for a list of checkboxes with a single selection option, similar to radio-buttons The ability to only select one checkbox is important. Although I need the functionality of checkboxes, such as being able to deselect them with an additional click, ...

Choose an input field using jQuery that is specified by its name

I am currently using jquery form validator to validate all the fields within my form. Within the form validator, I have implemented the following code snippet to determine if an input field is labeled with the name minExperience. errorPlacement: function ...

What are the steps to creating a unique event within an AngularJs service?

In the midst of my AngularJs project, I find myself faced with a dilemma. I have a service designed to manage button events, but I want another service to handle these events indirectly without directly interacting with the buttons themselves. So, my goal ...

Unlocking location data in React Router-DOM 6: A step-by-step guide

I am currently working on implementing a 'forgot password' feature, where I am attempting to transfer the email data from the 'login page' to the 'forgot password' page using a Link element. However, I am encountering an issu ...

Something seems to be wrong with the Javascript functionality in ASP.NET

Returning to coding some .NET projects, I decided to experiment with JavaScript/jQuery. I've included my /js/myscript.js file and confirmed that it is loading when the page loads. Within my js file, there is only one call: alert('TEST'). ...