Rails 5 Bootstrap 3 Challenge: Unresolved Application-Wide Modal Glitch

Setting up modals for the new and edit actions in my users controller was simple, but now I want to ensure display consistency by having the user show page also appear in a modal.

Currently, users access their show page through the link:

<li><%= link_to "View Profile", current_user %></li>

located in my nav-bar.

I am looking to modify this link so that it opens the desired modal for the show action in my user controller.

I have attempted to find resources online on how to achieve this, but I seem to be searching for the wrong information. Any guidance or general outline on how to accomplish this would be highly appreciated!

This question may be vague, but I'm unsure of the next steps to take.

javascriptjquerycssruby-on-railstwitter-bootstrap

Answer №1

If you only want to load the profile when clicked, you can utilize rails js.

1. Add remote: true to the link tag.

<li><%= link_to "View Profile", current_user, remote: true %></li>

2. Make a partial with the modal content for rendering via rails js.

app/views/users/_show.html.erb

<%= content_tag :div, class: "modal fade", id: dom_id(@user, :modal) do %>
  <div class="modal-dialog">
    <div class="modal-content">
      Lorem ipsum...
    </div>
  </div>
<% end %>

3. Append the modal-containing partial and toggle it with rails js. When using remote: true, Rails will seek the corresponding .js.erb view.

app/views/users/show.js.erb

$('body').append('<%= j render "users/show" %>');  // Add modal
$('#<%= dom_id @user, :modal %>').modal('toggle'); // Toggle modal

Answer №2

perhaps try something along these lines:

<!-- Activate the modal using a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal Content -->
    <div class="modal-content">
      <%= render 'profiles/show', profile: current_user %>
    </div>

  </div>
</div>

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

Reordering elements with jQuery by dragging and dropping, then dragging them again for further

I am currently working on a drag and drop feature for a webpage where users can drag elements from a list into different droppable containers. The initial drag and drop functionality is working perfectly, but now I want to enable users to move these elemen ...

jquerydraggabledroppable

Could the delete button in a Chip component from Material-UI be customized with a unique style?

I'm having no issues styling the label or background color of the chip itself. However, it appears that the delete button inside the chip is an SVG icon. Is there a method to change the color of this icon? ...

javascriptreactjsmaterial-ui

Gleaming R: Warning prompt or modal box input: invalid

In the process of developing a basic application, I am seeking to implement a pop-up notification for invalid inputs. By referencing the suggestion provided in #1656, I have come up with an example that introduces a visually appealing background color when ...

htmlcssrvalidationshiny

Encountering a problem with the scope of child_process in Node

When utilizing the child_process module in Node.js with the fork method, I am able to send data to a specific file and receive a response. However, I am not logging this data to the console after receiving it from the execution process. The code in first. ...

javascriptnode.jschild-process

Sending numerous array values from datatables

I am currently working with datatables that allow for multiple selections. When I select 3 rows from top to bottom (as shown in this picture), the console.log returns this specific value for each row selected. The value that needs to be passed to the next ...

javascriptjqueryajaxdatatables

Using Bootstrap, Express, and Node.js to create a login form

As I am new to node.js and express, I am still trying to understand the basic functionality. Currently, I have a simple sign-in form where I want to load another HTML page and call a node.js function upon clicking the sign-in button. What would be the best ...

htmlnode.jstwitter-bootstrapexpress

Organize a Javascript array by grouping it based on a specific field and

I have an array that I need to group by the createdAt value. [ { "createdAt": "2021-05-17T14:55:29.836Z", "machine": { "label": "MAQ_100", }, }, { "createdAt": "2021-03-10T13:22:45.694Z", "machine": { ...

javascriptarraysvue.jsreduce

Why is my jQuery animation running so sluggishly everywhere? Is there a way to improve its performance and make

I attempted to replicate the slider effect seen on this website: Below is the animation code: $('.tagLink').click(function () { $('html').css('overflow', 'hidden'); $('#tagBoxOverlay&ap ...

javascriptjqueryanimationcss

Leveraging Rspec/Capybara/Selenium for manipulating a canvas component

I am working with an HTML5 canvas element that performs various actions based on the location of a click. Is there a method to replicate this functionality in my testing specifications using Capybara? ...

ruby-on-railscanvasseleniumrspeccapybara

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

What is the most efficient way to eliminate div elements from the DOM tree individually?

Check out this example. If you click the add button, a user card is added. You can remove all cards by clicking the "Clear" button. But how can you delete individual cards by clicking the "close" icon on each one? Here's the HTML code: <div clas ...

javascriptjqueryajax

The functionality of the TURF booleanwithin feature is malfunctioning and not producing the

Currently, I am working on validating whether a polygon is completely within another polygon. However, there are cases where more complex polygons should return false, but turf interprets them as valid. If you'd like to see the sandbox, click here: ...

javascripttypescriptturfjs

Struggling to make Reactable work with React Native because of the error "Invariant Violation: View config not found for name input"

After attempting to follow a tutorial on creating tables with React for my React Native app, I consistently encountered errors such as "Invariant Violation: View config not found for name th." Even when trying to run the source code provided in the tutoria ...

javascriptreactjsreact-native

Step-by-step guide to swapping an element with a textarea element using javascript

My current project involves creating a user profile that includes a text box where users can describe themselves. I've already implemented a separate page for editing the profile, but now I want to add a feature where users can hover over their descri ...

javascriptjqueryhtmlajax

What could be causing the compatibility issue between fr units and grid-template-rows in CSS grid?

I'm having trouble getting the row height to change using fr units in my grid-template-rows. It seems to work fine with other units like pixels, but not with fr. I find it confusing that the fr units work perfectly fine with grid-template-columns, so ...

htmlcsscss-grid

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

javascriptjqueryhtml

Experience the thrill of receiving a triumphant notification upon submission of your form

I'm currently learning about jquery and how to use it with ajax to insert and display data in a mysql table. I've been trying out some code that inserts and displays records from a mysql database. Right now, my goal is to make the success message ...

phpjqueryajaxformsmysqli

Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

How can I set the initial selection of a select field using ng-options? Consider the items we have: $scope.items = [{ id: 1, label: 'aLabel', subItem: { name: 'aSubItem' } }, { id: 2, label: 'bLabel', subItem: { ...

javascriptangularjs

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

csshrefvertical-alignment

using document references in puppeteer's evaluate/waitFor function

I'm feeling a bit lost when it comes to understanding the document reference in puppeteer's evaluate method. The official documentation shows some code that includes this reference within a waitFor function in a node script. I get that these line ...

javascriptnode.jsgoogle-chrome-devtoolspuppeteer