I tried to register a widget with id == valores0, but this identifier is already registered

Question

I get this error and I don’t know how to solve it. I have 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: the first click in submit btn works well, 5 sliders are imported. Second click, 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 add a @missingo comment and a @Kevin comment. You can go through existing digits 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 answer. */ 

Answer 2

You are trapped in an age-old trap for closing functions inside a for loop. By the time addOnLoad is created 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 new 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)); } 

Answer 3

Dijit stores all active widgets in dijit.registry and uses id as unique identifiers. You cannot create digits with the same identifier.

You must clear dojo.registry before creating new sliders. Add this code before dijit declaration on test_slider.php

 dijit.registry["input"+ [i]].destroyRecursive(); 

Answer 4

can you assign any number identifier, such as an identifier generated by a 10-digit random number or something with a combination of date and time, so the identifier will never be the same.