Rails turbolinks breaking pnotify

Question

In my rails application, I have it so that when you vote, subscribe or unsubscribe from a list, it will show a popup using pnotify.

This works fine until the user navigates to a different page, and now it is no longer working. This only works when page is loaded or reloaded.

I know this is because turbolinks in a rails 4 application but it seems to execute all my other javascript code apart from the pnotify.

Additional info..

The subscribe/unsubscribe and vote buttons have the method post and are executed remotely which means I have a seperate file names subscribe.js.erb, unsubscribe.js.erb and vote.js.erb that handle the execution of the javascript code when the user has clicked on the buttons.

this is an example of how I am creating a new pnotify object:

new PNotify({
    title:  "Subscribed!",
    text: "<%= @message %>",
    type: 'info',
    opacity: .8,
    animation: {
        effect_in: 'show',
        effect_out: 'slide'
    },
    buttons: {
        sticker: false
    }
}).get().click(function() {
            $(this).remove();
        });

I am also using a gem for pnotify called gem 'pnotify-rails'

Answer 1

I've had the same issues, but that happens because PNotify loses its context, as you can see in that line the plugin assign the context as $('body'), but when you navigate using turbolink, the body is replaced so the context is lost.

What you need to do?

You need to assign the context in turbolink's event 'page:load'

$(document).on('page:load',function(){
	PNotify.prototype.options.stack  = {
		dir1: "down",
		dir2: "left",
		push: "bottom",
		spacing1: 25,
		spacing2: 25,
		context: $("body")
    }
        
});