Javascript array variable gets lost in loop -
this question has answer here:
so i'm trying put in additional buttons tinymce wysiwyg editor on wordpress. they're showing , functioning (sort of). when clicked they're outputting last variable in array, weird because using variable in other places in loop , works fine.
(function() { tinymce.create('tinymce.plugins.col', { init : function(ed, url) { var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; for(var = 0; < col_id.length; i++){ var colnum = col_id[i]; ed.addbutton(colnum+'_col', { title : colnum+' column', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col]' + ed.selection.getcontent() + '[/'+colnum+'_col]'); } }); // ***** col ***** ed.addbutton(colnum+'_col_first', { title : colnum+' column first', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col_first]' + ed.selection.getcontent() + '[/'+colnum+'_col_first]'); } }); // ****** col first ****** ed.addbutton(colnum+'_col_last', { title : colnum+' column last', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col_last]' + ed.selection.getcontent() + '[/'+colnum+'_col_last]'); } }); //********* col last ********** } }, createcontrol : function(n, cm) { return null; }, }); tinymce.pluginmanager.add('col', tinymce.plugins.col); })();
what happens when click 1 of buttons output short code of [eleven_col][/eleven_col], confuses me because title , image url output correctly.
i think classic closure problem, can explained here: javascript closure inside loops – simple practical example
wrap inside of for
loop in this:
(function (colnum) { // code in loop })(col_id[i]);
and remove var colnum = col_id[i];
line
so final code this:
(function() { tinymce.create('tinymce.plugins.col', { init : function(ed, url) { var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; for(var = 0; < col_id.length; i++){ (function (colnum) { // <---------------------- added ed.addbutton(colnum+'_col', { title : colnum+' column', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col]' + ed.selection.getcontent() + '[/'+colnum+'_col]'); } }); // ***** col ***** ed.addbutton(colnum+'_col_first', { title : colnum+' column first', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col_first]' + ed.selection.getcontent() + '[/'+colnum+'_col_first]'); } }); // ****** col first ****** ed.addbutton(colnum+'_col_last', { title : colnum+' column last', image : url+'/images/mce/'+colnum+'.png', onclick : function() { ed.selection.setcontent('['+colnum+'_col_last]' + ed.selection.getcontent() + '[/'+colnum+'_col_last]'); } }); //********* col last ********** })(col_id[i]); // <------------------------- added } }, createcontrol : function(n, cm) { return null; } }); tinymce.pluginmanager.add('col', tinymce.plugins.col); })();
Comments
Post a Comment