Tried to register widget with id==valores0 but that id is already registered

Question

i get this error, and i don't know how can be solved. I read this link before.

EDIT:1

index.php

<script type="text/javascript">
$(document).ready(function() {   
    $("#customForm").submit(function() {
        var formdata = $("#customForm").serializeArray();

        $.ajax({
            url: "sent.php",
            type: "post",
            dataType: "json",
            data: formdata,
            success: function(data) {
                switch (data.livre) {
                case 'tags':
                    $("#msgbox2").fadeTo(200, 0.1, function() {
                        $(this).html('Empty tags').fadeTo(900, 1);
                    });
                    break;

                default:
                    $("#msgbox2").fadeTo(200, 0.1, function() {
                        $(this).html('Update').fadeTo(900, 1, function() {
                            $('#conteudo').load('dojo/test_Slider.php');   
                        });
                    });
                    break;
                }
            }
        });

        return false;
    });
});
</script>

test_slider.php

<script type="text/javascript">

var slider = [];

for (i = 0; i < 5; i++) {

    slider[i] = (

    function(i) {

        return function() {

            var node = dojo.byId("input"+[i]);
            var n = dojo.byId("valores"+[i]);

            var rulesNode = document.createElement('div'+[i]);
            node.appendChild(rulesNode);

            var sliderRules = new dijit.form.HorizontalRule({
                count:11,
                style:{height:"4px"}
            },rulesNode);

            var labels = new dijit.form.HorizontalRuleLabels({
                style:{height:"1em",fontSize:"75%"},
            },n);

            var theSlider = new dijit.form.HorizontalSlider({
                value:5,
                onChange: function(){
                    console.log(arguments);
                },
                name:"input"+[i],
                onChange:function(val){ dojo.byId('value'+[i]).value = dojo.number.format(1/val,{places:4})},
                style:{height:"165px"},
                minimum:1,
                maximum:9,
                   }
            },node);

            theSlider.startup();
                sliderRules.startup();
        }

    })(i);
    dojo.addOnLoad(slider[i]);
}

</script>

Problem: First click in submit btn all works well, 5 sliders are imported. Second click, an update is supposed, but i get this message:

Tried to register widget with id==valores0 but that id is already registered

[Demo video]2

Answer 1

Just to add on to @missingo's answer and @Kevin's comment. You could walk through the existing dijits by looking in the registry:

var i = i || 0; // Cache this at the end of your loop
dijit.registry.map(function (widget) {
    if (+widget.id.replace(/^[^\d]+/, '') <  i) {
        widget.destroyRecursive();
    }
});
/*
    Your loop fixed as described in missingno's answer.
*/

Answer 2

You fell in the age-old trap of making function closures inside a for loop. By the time addOnLoad fires and the sliders are created, i will be equal to 2 and both sliders will try to use the same DOM nodes (something that is not allowed).

You need to make sure that you give a fresh copy of i for everyone. The following is a quick fix:

for(i=0; i<2; i++){
    (function(i){

        slider[i] = ...

        //everything inside here remains the same
        //except that they now use their own i from the wrapper function
        //instead of sharing the i from outside.
    }(i));
}