CODEWITHSUNDEEP
javascriptruby-on-railsruby
alfa
alfa

Reputation: 45

Alertify alert confirm dialogs not working with Ruby on Rails

This is alertifyJS and I need to implement this with rails.

I have downloaded this JS and CSS file and put into that assets/javascripts/modules/alertify.js assets/stylsheets/modules/alertify.css

assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require modules/alertify

assets/stylsheets/application.css

 *= require modules/alertify

View

<%= link_to "Go!", new_employer_session_path, data: {confirm: "Are you sure? "} %>

But confirm dialogs not working.

What can I do now.

Thanks

Upvotes: 3

Views: 680

Answers (2)

Reinier Garcia
Reinier Garcia

Reputation: 1690

This is what you need to do, STEP BY STEP:

1) Add this to the gem file:

gem 'alertifyjs-rails'

2) Add this to /app/assets/javascripts/application.js

//= require alertify

3) Add this to /app/assets/stylesheets/application.css

 *= require alertify
 *= require alertify/default
 *= require alertify/bootstrap

4) Add this at the end of /app/assets/javascripts/application.js It is necessary to make alertify work with the existing code.

$.rails.allowAction = function(element){
    if( undefined === element.attr('data-confirm') ){
        return true;
    }

    $.rails.showConfirmDialog(element);
    return false;
};

$.rails.confirmed = function(element){
    element.removeAttr('data-confirm');
    element.trigger('click.rails');
};

$.rails.showConfirmDialog = function(element){
    var company_name = "Your Company Name Security Confirmation";
    var msg = element.data('confirm');

    alertify.confirm(msg, function(e){
        if(e){
            $.rails.confirmed(element);
            return true;
        }
    }).set({title: company_name}).set('onfocus', function(){
        document.activeElement.blur();
    });

};

The last set (.set('onfocus',...) makes possible to avoid the focus in any of the buttons of the dialog. It looks prettier this way, but you don't need to use it if you don't like it.

5) Go to the root of the project and run in the terminal: bundle

6) Go to the terminal with the server running and stop the sever with: CTRL + C

7) Run the server again with: rails server

8) Refresh the page in the web browser. It should work with your already existing code.

I hope this help!

Upvotes: 0

fool-dev
fool-dev

Reputation: 7777

Ok Try the following if your JS and CSS working correctly

You need to declare method what method you need to action like below

I think this is a GET method then see this, you can change to anything that's your method

<%= link_to "Go!", new_employer_session_path, method: :get, data: {confirm: "Are you sure? "} %>
#=> declare a method :get, :post or :delete

Without declaring a method it's won't work

And add some JS code to your JS file application.js

$.rails.allowAction = function(element){
    if( undefined === element.attr('data-confirm') ){
        return true;
    }

    $.rails.showConfirmDialog(element);
    return false;
};

$.rails.confirmed = function(element){
    element.removeAttr('data-confirm');
    element.trigger('click.rails');
};

$.rails.showConfirmDialog = function(element){
    var msg = element.data('confirm');
    alertify.confirm(msg, function(e){
        if(e){
            $.rails.confirmed(element);
            return true;
        }
    })
};

Hope it helps

Upvotes: 2

Related Questions