Transferring a parameter from link_to to a popup window in a Rails application

I am facing an issue with passing an object to my modal in Rails. The object has a table of results with an attribute "email", but I seem unable to pass it so that I can use it within my modal.

index.html.erb

<div class="modal fade bs-example-modal-lg" id="email-template-user-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <%= render "shared/email_template_user"%>
    </div>
  </div>
</div>

<p class="email">
  <% @banker_assignments.each do |application| %>
    <%= link_to application.loan_application.email, lp_banker_assignments_email_status_path(application), class: 'email-template-user-modal', id: "email-template-user-id", :data => { :toggle => "modal", :target => "#email-template-user-modal", :email => application.loan_application.email, :id => application.loan_application.id, :application => application } %> 
  <%= end %>    
</p>

assignments_controller.rb

def email_status
  ap params        
end

routes.rb

post '/lp_banker_assignments/email_status' => 'lp_banker_assignments#email_status'
put '/lp_banker_assignments/email_status' => 'lp_banker_assignments#email_status'
get '/lp_banker_assignments/email_status' => 'lp_banker_assignments#email_status'

_email_template_user.html.erb

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">Compose Email</h4>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="form-group col-md-12">

      <%= form_tag :action => 'email_status', class: 'form-horizontal' do %> 
        <div class="">
            <div class="col-md-3">Recipient</div>


          <div class="col-md-9">
            <%= email_field_tag "recipient", <%= application.email %>, class: " string optional form-control"%>
          </div>
          <div class="col-md-3">Cc to:</div>
          <div class="col-md-9">
            <%= email_field_tag "cc_to", <%= application.second_email %>, class: " string optional form-control" %>
          </div>

          <div class="col-md-3">
            Subject
          </div>

          <div class="col-md-9">
            <%= text_field "subject", "", class: "subject string optional form-control" %>
          </div>

          <div class="col-md-3">
            Content
          </div>

          <div class="col-md-9">
          <%= text_field "content", ""%>

          </div>
          <div class="col-md-3"></div>
          <div class="col-md-9">
            <%= submit_tag %>
        </div>
        </div>
      <% end %>
      </div>
    </div>
  </div>
</div>

I have explored various jQuery options but have been unsuccessful in finding a way to transfer the object from index.html.erb to my modal view.

Any assistance would be greatly appreciated

Answer №1

<%= link_to application.bank_assignment.email, 
lp_banker_assignments_email_status_path(application), 
class: 'email-template-user-modal', id: "email-template-user-id", 
:data => { :toggle => "modal", :target => '#email-template-user-modal_' + application.bank_assignment.id, 
:email => application.bank_assignment.email, :id => application.bank_assignment.id, :application => application } %>

Your modal code

<div class="modal fade" id="<%= 'email-template-user-modal_%s' % [application.bank_assignment.id] %>">
    <div class="modal-dialog">
    ...content
   </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

Calling components may result in a race condition

I have integrated 2 components into my "App" that work together seamlessly. The first component is responsible for resolving the external IP address to a geographical location by making 2 axios.get calls and then passing them back to App.vue using emit. F ...

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

Is there a way to retrieve bookmarks (TOC) from a PDF document using technologies such as NodeJS, ReactJS, or PHP?

I'm sure most people have noticed that when you open a PDF in the browser or Acrobat PDF reader, a bookmarks tab appears like the one shown here: https://i.stack.imgur.com/obFer.png If the PDF doesn't have any bookmarks, the list will be empty. ...

What is the best way to show the previous month along with the year?

I need help with manipulating a date in my code. I have stored the date Nov. 1, 2020 in the variable fiscalYearStart and want to output Oct. 2020. However, when I wrote a function to achieve this, I encountered an error message: ERROR TypeError: fiscalYear ...

Position a div off-center using CSS styling

Currently, I am utilizing a flexbox to center a div inside another div, akin to a dialog window that pops up at the center of the screen when required. The functionality is sound, but aesthetically it would be more pleasing if the space above and below th ...

Webstorm seems to be having trouble identifying Next.js

When I create a Next.js app using the command npx create-next-app my-app --use-npm Everything is successfully installed, but when using WebStorm, I noticed that it does not auto import the <Link> component from Next.js. I have to manually import it ...

Utilizing Moment.js: Transforming 12-hour format to a Date object

Is there a way to convert a 12-hour string into a 24-hour Date object? day.from = day.from || moment("6:00", ["h:mm"]).format("HH:mm"); Unfortunately, I am encountering the following error: angular.js:11706 Error: [ngModel:datefmt] Expected `6:00` to be ...

Navigating data within a JSON file with D3 javascript: a step-by-step guide

Currently, I am attempting to extract and manipulate data from a JSON file using D3 Javascript. Below is the content of the JSON file: { "Resources": [ { "subject": "Node 1", "group" : "1" }, { "predicate": ...

Tips on safeguarding your templates while working with SailsJS and AngularJS

I am currently working on a web application using SailsJS and AngularJS. My project requires session management to track user login status. I came across this helpful tutorial and implemented an index.ejs view located in the /view folder. Within the index. ...

Modify the input field for weight in WooCommerce to accommodate alphabetic characters

Is there a way to modify the WooCommerce Shipping weight field so that it can accept alphanumeric values, like: 500g / 1kg / 750ml / 2L I only need the weight for informational purposes and don't require any shipping. The location of the file re ...

Ways to address observables in Angular in a manner similar to deferred objects

Transitioning from AngularJS to Angular has posed a challenge for me, especially when it comes to moving from promises to observables. Below is an example of my code in AngularJS: var deferred = $q.defer(), frame = document.createElement('newFrame ...

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

I'm having trouble getting backstretch to work on a div. It works perfectly when applied to the body with no errors, but when I try to apply it to a <div>, I get this error: Uncaught TypeError: Object [object Object] has no method 'backs ...

Can you explain the significance of response.on in Node.js?

Currently facing an issue with a Node.js http request. If I can't figure it out, there's a bigger question that I'll address later. I've been working on some code and came across 'response.on', but I'm not entirely sure ...

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

Switching the scope or zone in Angular when handling events external to Angular

Currently, I am utilizing an external library within my Angular 6 application that incorporates customizable event listeners. Specifically, I am employing flowchart.js, although similar issues may arise with other libraries. In the case of flowchart.js, i ...

The app.html for the skygear/react-chat-demo is malfunctioning

I followed the instructions provided in the Skygear manual at https://docs.skygear.io/guides/advanced/server/ The skygear-server-darwin-amd64 started successfully. Then, I attempted to run the react-chat-demo project from https://github.com/skygear-de ...

Implementing Github Oauth2 in a Rails server independent from a chrome extension

Looking to implement Github Oauth2 from my chrome extension, but rather than using chrome.identity.launchWebAuthFlow I want to handle it through my server. This way, I can avoid exposing my client ID and Client Secret in the javascript of the extension. My ...

Sync user information when alterations are made on a different device

As I create a Discord clone using Next.js, I've encountered an issue where when a server is deleted, another client can still see and use the server until the page is reloaded. When testing out the official Discord web app, changes seemed to happen in ...

Error occurs consistently with AJAX, PHP, and SQL newsfeed

Striving for Progress Currently, I am engrossed in developing a newsfeed and enhancing my proficiency in utilizing Ajax through jQuery. My ultimate aim is to create a seamless user experience where individuals do not need to refresh the page to view the l ...

What are the steps to resolving an issue with importing a css file in next.js?

Error: ./node_modules/quill-emoji/dist/quill-emoji.css ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need a suitable loader for handling this file type, as there are currently no configured loaders to process it. ...