F
F
Farades2014-11-11 14:49:32
JavaScript
Farades, 2014-11-11 14:49:32

How to make $ajax + turbolinks Rails 4.1 work correctly?

Good day! I just can't figure out how to deal with the new super cool turbolinks mechanism. I must say right away that disabling turbolinks easily and simply solves the problem, but we are not looking for easy ways, and the feature is cool - we would not want to lose it because of such a problem.
Idea: Every period of time (for example, 500ms) we send a request to the server. In response, we receive JSON and are already working with it.
Problem: I placed the js code in the partial of the side menu (I know that there is actually a coffee script, etc. Please don’t throw slippers yet). But when you click on links where this side menu is not in sight, requests continue to be generated. And if you follow links where there is a side menu, then the number of requests increases in proportion to the number of pages visited. Respectivelyrefreshing the page solves the problem.
Question: How to overcome the problem? Move js code somewhere? Or use the jQuery.turbolinks gem (I tried it, but there was no effect)?
The code:

setInterval(function(){
    $.ajax({
        type: "POST",
        url: "/sidebar",
        data: "user=" + <%= current_user.id %> + "&cpe=" + <%= @cpe_instance.id %>,
        success: function(msg){
            if (msg.error == "no") {
                console.log("Some message here...");
            }
            else {
                console.log(msg.error);
            }
        }
    });
}, 500);

Thanks in advance to everyone who helps out!

Answer the question

In order to leave comments, you need to log in

2 answer(s)
_
_ _, 2014-11-11
@Farades

Well, yes, it’s clear that the turbolinks are shitty every time they pull out your jaboscript along with hatemael and jquery executes it efficiently. And since the page is not updated, then your intervals do not go anywhere and accumulate.
Here are a bunch of different events that turbolinks fire - I advise you to put the creation of your long-suffering interval on page: load, and clear it on page: fetch.
setInterval returns an id by which it can be removed. This is me. just in case.

F
Farades, 2014-11-11
@Farades

Thanks to all! Here is the solution to the issue:

var new_timer;

$(document).on('ready page:load', function () {
    if (typeof new_timer != 'undefined') {
        clearInterval(new_timer);
        add_timer();
    }
    else {
        add_timer();
    }
});

$(document).on('page:fetch', function () {
    clearInterval(new_timer)
});

function add_timer() {
    new_timer = setInterval(function(){
    $.ajax({
        type: "POST",
        url: "/sidebar",
        data: "user=" + <%= current_user.id %> + "&cpe=" + <%= @cpe_instance.id %>,
        success: function(msg){
            if (msg.error == "no") {
            console.log("Some message");
            }
            else {
                console.log(msg.error);
            }
        }
    });
    }, 500);
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question