-1

I have a checkout popup I would like to share between different pages (event, video meeting ...), so I thunk creating a shaded element /views/shared/_checkout.html.erb, and insert <%= render "shared/checkout" %> in my pages.

Uncaught ReferenceError: popup_payment is not defined

All the html and javascript is this shared page. I just can't understand why from my pages (event, video ...) I can not call the javascript from this shared component.

the html and the javascript is present when I check the source. I was excepting that render / render partial was acting some code injection, am I wrong ?

How could I preserve the DRY - Don't repeat Yourself - in ERB ? And have the elements / javascript communicate betweek page and included javascript ?

Here is some pseudo code example : pageA.html.erb

<%= link_to image_tag('pinandchip.png', size: '18x18'), '#', onclick: 'popup_payment();', class: "btn flat" %>

...

view/shared/_popup.html.erb

<script>
function popup_payment() {
}
</script>
Gregoire Mulliez
  • 1,132
  • 12
  • 20

3 Answers3

0

You could try adding the class payment-popup-button to your button and create a new file in app/assets/javascripts/shared called popup.js.

In that file you can do something like:

$(document).ready(function(){
  $('payment-popup-button').click(function(e){
     e.preventDefault();
     $('#popup_payment_div').show();
  });
});

This assumes that you're using jQuery, and that you've already rendered the popup code somewhere on the page, but it's hidden.

If you need to render a fresh form every time or populate the form with dynamic data you'll probably have to create controller actions that respond_to and render js.erb to get you the right markup.

It's hard to say exactly without seeing more code.

NM Pennypacker
  • 6,704
  • 11
  • 36
  • 38
0

Are you ensure that your javascript function is loaded in all pages?

On this question answer how to have global javascript functions on rails projects.

facundo espinosa
  • 41
  • 1
  • 8
0

i found a solution with this gem :

https://github.com/komposable/komponent

it fulfill my needs : create external components

Gregoire Mulliez
  • 1,132
  • 12
  • 20