0

I have some custom jQuery code creating the frontend for a business optimisation machine.

simutronX.js

$(function(){
    $("#slider_constraint_a").slider({
    orientation: "vertical",
    range: true,
    values: [17, 67],
    slide: function(event, ui) {
      $("#constraint_a").val(ui.values[0] + " - " + ui.values[1]);
      }
    });
    $("#constraint_a").val($("#slider_constraint_a").slider("values", 0) +
      " - " + $("#slider_constraint_a").slider("values", 1));

    ...

    $("#slider_constraint_e").slider({
    orientation: "vertical",
    range: true,
    values: [17, 67],
    slide: function(event, ui) {
      $("#constraint_e").val( ui.values[0] + " - " + ui.values[1] );
      }
    });
    $("#constraint_e").val( $("#slider_constraint_e").slider("values", 0) +
      " - " + $("#slider_constraint_e").slider("values", 1));
});

When the page loads, the constraint sliders appear very briefly, then disappear. On refresh, these items reappear. I have gem installed the jquery-turbolinks gem as suggested here and added it to my application.js file, then precompiled the assets and restarted the server.

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui

This does not seem to have helped. A similar problem is listed in the jquery-turbolinks readme (e.g. double loading...) but it doesn't appear my code has any of the problems listed.

Any further suggestions?

Community
  • 1
  • 1
  • 1
    If you're using Turbolinks 5, you may want to avoid using jquery.turbolinks. Turbolinks was rewritten for version 5 and a lot of the syntax changed. Here's an issue about it with a compatibility file if you're set on using the gem https://github.com/kossnocorp/jquery.turbolinks/issues/61. – ellitt Apr 03 '17 at 16:08

1 Answers1

0

I had this issue previously. Solution was to surround the Jquery code with a on change action rather than on load action in your js file

 $(document).on('page:change', function(){
Artem Ankudovich
  • 458
  • 2
  • 14
  • 1
    This didn't work but it did point me in the right direction. I am now using the similar `$(document).on('turbolinks:load', function(){` which is a combination of your solution and something I found here: https://github.com/turbolinks/turbolinks/blob/master/README.md –  Apr 03 '17 at 14:43
  • So i guess i helped a little ha. sorry couldnt help fully man. – Artem Ankudovich Apr 03 '17 at 14:46
  • It was enough to help me solve the issue that would have taken me a lot longer to solve on my own. Plus now the solution is here to help anyone who has this issue in future. –  Apr 03 '17 at 14:49