Rails replace confirm with Zurb foundation modal - Uncaught TypeError: confirmWithReveal is not a function

Question

Let me start by saying, I'm not good with javascript. Please forgive me if I miss something obvious.

I'd like to replace the standard confirm dialog with the Foundation modal dialog. Can someone help me construct the correct structure in my page? I've got the following link_to on the index.html.erb page:

<%= link_to 'Delete', post, method: :delete, data: { confirm: "Are you sure?" }, class: "tiny radius button" %>

I notice that when the page loads, I get an error in the console:

Uncaught TypeError: $(...).confirmWithReveal is not a function

This error seems to be on every page. My explicitly defined modal dialogs work on other pages.

I've done some research and can't find any clear examples of how to make this work. This page shows the various styles of confirms, but doesn't show how to make it work in a <%= link_to ... %> expression.

Answer 1

confirm_with_reveal is not part of foundation, but an extra module. Here are the steps I did to use it:

1. place one of the source files from the github repo , eg confirm_with_reveal.js into your rails' vendor/assets/javascripts/confirm_with_reveal.js folder. Usually I add the repo as a submodule, but that's up to you.

2. add to app/assets/javascripts/application.js

    //= require jquery //= require jquery_ujs //= require confirm_with_reveal/confirm_with_reveal $(function(){ $(document).confirmWithReveal(); }); 

3. rewrite your standard rails confirms from

    link_to 'Delete', post, method: :delete, data: { confirm: "Are you sure?" }, class: "tiny radius button" %> 

   to

    link_to 'Delete', post, method: :delete, data: { confirm: {title:"Are you sure?"} }, class: "tiny radius button" %> 

   and play around with the attributes you find in the README.

4. Additionally, if you use foundation 6, you have to modify the javascript and replace in line 54:

    modal.foundation('reveal', 'close'); 

   with

    modal.foundation('close'); 

   and in line 68:

    foundation('reveal', 'open') 

   with

    foundation('open')