I'm having trouble figuring out how to insert a button into a link_to_add_fields, like this:
<%= link_to_add_fields "Add Another Item", f, :items %>
while working on my Rails App.
I've attempted to include class: "btn btn-mini btn-info" in various places, but I keep receiving an error about the number of arguments.
Interestingly, it does work in this line:
<%= f.link_to_remove "Remove this item", class: "btn btn-mini btn-info" %>
Any help would be greatly appreciated.
It seems like you developed this helper inspired by the rails cast episode .
Within your application_helper.rb file, you defined a method called link_to_add_fields. It likely looked something like this.
def link_to_add_fields(name, f, association)You should modify it to look like this.
def link_to_add_fields(name, f, association, locals={})Then for the return statement.
link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")", class: locals[:class])Finally, you can use your updated method like this
<%= link_to_add_fields "Add Another Item", f, :items, class: "btn btn-default" %>After seeing what @Aeisme posted, I needed to come up with a quick fix for Rails 4.1 users.
Here is the code snippet from application_helper.rb:
def link_to_add_fields(name, f, association, locals={})
This is the return value for the link_to_add_fields function:
link_to(name, '#', class: [locals[:class], "add_fields"], data: {id: id, fields: fields.gsub("\n", "")})
Allen's solution did the trick for me! Another option is to incorporate the button class directly within your helper function.
Check out the code for my project here. The isotope feature is functioning correctly, however, when clicking on the image, instead of scrolling to the navigation under the red box as intended, the page scrolls all the way to the top. If I modify the follo ...
Let me start by showing you a screenshot of the issue I am facing. Check it out here The screenshot clearly shows a gap between my expandable left navbar and the left border of the map image. However, when I resize the browser window by dragging and drop ...
I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of reada ...
Is there a way to move the delete action to the last column in an 'ng2' smart table? I am looking to have the delete action appear only in the last column of my table in the ng2 smart table. Can anyone provide assistance with this matter? Below ...
I'm currently experimenting with creating a wordcloud using the D3 pack layout in a horizontal format. Instead of restricting the width, I am limiting the height for my layout. The pack layout automatically arranges the circles with the largest one ...
I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...
I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...
Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...
I have a master page with four buttons that have a mouse hover CSS property. Each button's corresponding response page is defined on the same master page. Now, I want to change the button style when the user is on the corresponding page. How can this ...
I have a table with multiple cells and I would like to add some spacing between each <td> element. You can find an example of my code on JSFIDDLE. .line { border-bottom:1px solid black; } .textRotation { -webkit-transform: rotate(-90deg); ...
.example{ overflow:auto; } <div class="example"> <p>Some Additional Text Here<P> </div> This particular code snippet showcases the initial portion of the text, allowing for scrolling down to reveal items 5 and 6: 1 2 ...
I'm in the process of developing a custom WordPress plugin that includes a frontend form. My goal is to utilize AJAX to send the form data to the database and then update the frontend table with the response. Everything seems to be working smoothly u ...
I have an input element with type radio. When the element receives focus via keyboard, it should display a focus style, but when accessed via mouse click, the focus should be removed. I want to achieve this without using JavaScript or jQuery. This element ...
I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...
I am looking to add a floating button that remains in the same position relative to the content until the window is scrolled to a certain point, after which it sticks to the end of the content. In simple terms, I want the element to act as 'relative& ...
Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...
I am currently working on the Angular tour of heroes tutorial. However, I am facing an issue when trying to display the list of heroes as it appears like this: https://i.sstatic.net/AGnzJ.png It is strange because even though the CSS/HTML/TS code from the ...
For more information, visit this link. I am looking to customize the comments area by giving it a solid color that dynamically adjusts its height based on the number of comments. The background color should expand if there are many comments and shrink if ...
I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...
If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...