Clicking on line (instead of dragging) give me the error: Uncaught RangeError: Maximum call stack size exceeded

marcosberghahn commented 9 years ago

I have several sliders in one page, and some of them work fine, but some not. If I click on the line so it will go directly to that position it gives me the error:

"Uncaught RangeError: Maximum call stack size exceeded 2ion.rangeSlider.min.js?ver=2.0.6:15 Uncaught TypeError: Cannot read property 'remove' of nullp.remove @ ion.rangeSlider.min.js?ver=2.0.6:15p.update @ ion.rangeSlider.min.js?ver=2.0.6:66$sc02_confiabilidade_slider.ionRangeSlider.onFinish @ tv_sliders.js?ver=001:345p.drawHandles @ ion.rangeSlider.min.js?ver=2.0.6:44p.updateScene @ ion.rangeSlider.min.js?ver=2.0.6:39""

Here are two sliders that are working:

$tvdistance.ionRangeSlider({
        min: 0,
        max: 4,
        from: 0,
        step: 0.1,
        grid: true,
        grid_num: 20,
        postfix: " Metros",
        max_postfix: " ou + ",
        //drag_interval: true,
        onStart: track_tv_distance,
        onChange: track_tv_distance,
        onFinish: track_tv_distance,
        onUpdate: track_tv_distance
    });
    $tvpricerange.ionRangeSlider({
        type: "double",
        //values: [0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 7000, 10000],
        min: 0,
        max: 10000,
        step: 100,
        min_interval: 500,
        from: 0,
        to: 10000,
        grid: true,
        grid_num: 20,
        drag_interval: true,
        prettify_enabled: true,
        prettify_separator: ".",
        prefix: "R$ ",
        values_separator: " até ",
        max_postfix: " ou + ",
        onStart: track_tv_price,
        onChange: track_tv_price,
        onFinish: track_tv_price,
        onUpdate: track_tv_price
    });

And here is one that isn't working:

    $sc01_durabilidade_slider.ionRangeSlider({
        min:1,
        max:99,
        from:1,
        from_min:1,
        from_max:$max_sc01_durabilidade,
        from_shadow:true, 
        step:1,
        grid:true,
        drag_interval: true,
        onStart: track_sc01_durabilidade,
        onChange: track_sc01_durabilidade,
        onFinish: track_sc01_durabilidade,
        onUpdate: track_sc01_durabilidade,
        onFinish: function () {
            //This will update other sliders so the sum of them all is always max to 100;
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }    
    });

IonDen commented 9 years ago

Hi, maybe some demo here: http://jsfiddle.net/IonDen/y81j67qh/ Not enough info to solve the problem.

marcosberghahn commented 9 years ago

hello, I guess the problem is that its on my "onFinish" check.

Here is one group of sliders, the sum of them must always be =< 100.

    //SLIDER PRIORIDADES 01
    var $sc01_durabilidade_slider = $("#sc01_durabilidade_slider"),
        $sc01_durabilidade_selected = $("#sc01_durabilidade_selected"),
        $sc01_eco_slider = $("#sc01_eco_slider"),
        $sc01_eco_selected = $("#sc01_eco_selected"),
        $sc01_imagem_slider = $("#sc01_imagem_slider"),
        $sc01_imagem_selected = $("#sc01_imagem_selected"),
        $sc01_feedback = $("#sc01_feedback");
    var $atual_sc01_durabilidade = 0,
        $atual_sc01_eco = 0,
        $atual_sc01_imagem = 0,
        $max_sc01_durabilidade = 100,
        $max_sc01_eco = 100,
        $max_sc01_imagem = 100,
        $sc01_pontos_restantes = 100;
    //SLIDER PRIORIDADES 01
    var track_sc01_durabilidade = function (data_sc01_durabilidade) {
        $sc01_durabilidade_selected.html(data_sc01_durabilidade.from);
        $atual_sc01_durabilidade = data_sc01_durabilidade.from;
        $sc01_pontos_restantes = 100 - $atual_sc01_durabilidade - $atual_sc01_eco - $atual_sc01_imagem;
        if ( $sc01_pontos_restantes < 1 ) {
            $sc01_feedback.html('<span id="sc01_pontos_restantes" style="color:#0099ff">OK :)</span> Role para a próxima pergunta.');
        } else {
            $sc01_feedback.html('Você ainda possui <span id="sc01_pontos_restantes" style="color:#0099ff">' + $sc01_pontos_restantes + '</span> pontos restantes para serem distribuidos acima');
        };
        $max_sc01_durabilidade = $sc01_pontos_restantes + $atual_sc01_durabilidade;
        $max_sc01_eco = $sc01_pontos_restantes + $atual_sc01_eco;
        $max_sc01_imagem = $sc01_pontos_restantes + $atual_sc01_imagem;
    };
    var track_sc01_eco = function (data_sc01_eco) {
        $sc01_eco_selected.html(data_sc01_eco.from);
        $atual_sc01_eco = data_sc01_eco.from;
        $sc01_pontos_restantes = 100 - $atual_sc01_durabilidade - $atual_sc01_eco - $atual_sc01_imagem;
        if ( $sc01_pontos_restantes < 1 ) {
            $sc01_feedback.html('<span id="sc01_pontos_restantes" style="color:#0099ff">OK :)</span> Role para a próxima pergunta.');
        } else {
            $sc01_feedback.html('Você ainda possui <span id="sc01_pontos_restantes" style="color:#0099ff">' + $sc01_pontos_restantes + '</span> pontos restantes para serem distribuidos acima');
        };
        $max_sc01_durabilidade = $sc01_pontos_restantes + $atual_sc01_durabilidade;
        $max_sc01_eco = $sc01_pontos_restantes + $atual_sc01_eco;
        $max_sc01_imagem = $sc01_pontos_restantes + $atual_sc01_imagem;
    };
    var track_sc01_imagem = function (data_sc01_imagem) {
        $sc01_imagem_selected.html(data_sc01_imagem.from);
        $atual_sc01_imagem = data_sc01_imagem.from;
        $sc01_pontos_restantes = 100 - $atual_sc01_durabilidade - $atual_sc01_eco - $atual_sc01_imagem;
        if ( $sc01_pontos_restantes < 1 ) {
            $sc01_feedback.html('<span id="sc01_pontos_restantes" style="color:#0099ff">OK :)</span> Role para a próxima pergunta.');
        } else {
            $sc01_feedback.html('Você ainda possui <span id="sc01_pontos_restantes" style="color:#0099ff">' + $sc01_pontos_restantes + '</span> pontos restantes para serem distribuidos acima');
        };
        $max_sc01_durabilidade = $sc01_pontos_restantes + $atual_sc01_durabilidade;
        $max_sc01_eco = $sc01_pontos_restantes + $atual_sc01_eco;
        $max_sc01_imagem = $sc01_pontos_restantes + $atual_sc01_imagem;
    };

    //SLIDER PRIORIDADES 01
    $sc01_durabilidade_slider.ionRangeSlider({
        min:1,
        max:99,
        from:1,
        from_min:1,
        from_max:$max_sc01_durabilidade,
        from_shadow:true, 
        step:1,
        grid:true,
        drag_interval: true,
        onStart: track_sc01_durabilidade,
        onChange: track_sc01_durabilidade,
        onFinish: track_sc01_durabilidade,
        onUpdate: track_sc01_durabilidade,
        onFinish: function () {
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }
    });
    $sc01_eco_slider.ionRangeSlider({
        min:1,
        max:99,
        from:1,
        from_min:1,
        from_max:$max_sc01_eco,
        from_shadow:true,
        step:1,
        grid:true,
        drag_interval: true,
        onStart: track_sc01_eco,
        onChange: track_sc01_eco,
        onFinish: track_sc01_eco,
        onUpdate: track_sc01_eco,
        onFinish: function () {
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }
    });
    $sc01_imagem_slider.ionRangeSlider({
        min:1,
        max:99,
        from:1,
        from_min:1,
        from_max:$max_sc01_imagem,
        from_shadow:true,
        step:1,
        grid:true,
        drag_interval: true,
        onStart: track_sc01_imagem,
        onChange: track_sc01_imagem,
        onFinish: track_sc01_imagem,
        onUpdate: track_sc01_imagem,
        onFinish: function () {
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }
    });

From what I read about the error I'm getting is that this code might be in some kind of recursive loop. what do you thing?

thanks in advance, cheers

marcosberghahn commented 9 years ago

I had tried to insert an settimeout on the onFinish function, like this:

        onFinish: setTimeout(function () { 
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }, 30000)

the clicking started working again, but my control stopped working... so because of it i'm guessing the problem must be with this function.

marcosberghahn commented 9 years ago

As you requested, I put the code on https://jsfiddle.net/berghahn/08y3drez/ Can you please tell me whats wrong on my onFinish? It enters on an infinite Loop every time I click on the line instead of dragging...

marcosberghahn commented 9 years ago

I had been able to stop the "recursiveness" error by not updating the "max_from:" on the slider that is calling the onUpdate.

So things are solved, I just had to comment the last line, like this:

$sc01_imagem_slider.ionRangeSlider({
        min:1,
        max:99,
        from:1,
        from_min:1,
        from_max:$max_sc01_imagem,
        from_shadow:true,
        step:1,
        grid:true,
        drag_interval: true,
        onStart: track_sc01_imagem,
        onChange: track_sc01_imagem,
        onFinish: track_sc01_imagem,
        onUpdate: track_sc01_imagem,
        onFinish: function () {
            $sc01_durabilidade_slider.data("ionRangeSlider").update({  from_max: $max_sc01_durabilidade  });
            $sc01_eco_slider.data("ionRangeSlider").update({           from_max: $max_sc01_eco           });
            // $sc01_imagem_slider.data("ionRangeSlider").update({        from_max: $max_sc01_imagem        });
        }
    });

IonDen commented 8 years ago

Hi, i still can't find workaround for this. Maybe you could make some easy demo to repeat error? In another ticket.

IonDen / ion.rangeSlider

Clicking on line (instead of dragging) give me the error: Uncaught RangeError: Maximum call stack size exceeded #237