JavaScript error under Sp.ribbon.js on SharePoint Online

Question

Hi everyone,
I'm trying to add a custom button on my ribbon for easier approval process, I use JavaScript to do this in a Script Editor web part on a task list view. The script works fine but when he tries to access the ribbon to actually add the button the ribbon crashes
so I don't even have the usual ribbon.
I used the IE JavaScript editor and I have an error on the sp.ribbon.js the "funny" part is that I only use that library I made no modification (also because I'm using SharePoint Online so I don't have access to it).
there is the error that I get with IE:
and there is the code I use to add the ribbon:
$this.ExecuteOrDelayUntilScriptLoaded(init_addButton, "sp.ribbon.js");
function init_addButton(){
setTimeout(function(){
var defaultWP = document.getElementById("MSOZoneCell_WebPartWPQ1");
WpClick({target:defaultWP,srcElement:defaultWP});
},100);
setInterval(function(){
if($("#RibbonContainer_activeTabId").val()==="Ribbon.ITEMS" || $("#RibbonContainer_activeTabId").val()==="Ribbon.ListItem"){
addRibbomButton();
},1000);
alert("test");
function addRibbomButton(){
if($("#ribbonApproveAll").length===0){
var b = [];
b.push("<li id='ribbonApproveAll' class=ms-cui-group unselectable='on'>");
b.push("<SPAN class='ms-cui-groupContainer' unselectable='on'>");
b.push("<SPAN class='ms-cui-groupBody' unselectable='on'>");
b.push("<SPAN class='ms-cui-layout' unselectable='on'>");
b.push("<SPAN class=ms-cui-section unselectable='on'>");
b.push("<SPAN class=ms-cui-row-onerow unselectable='on'>");
b.push("<A id='approveAllButton' class='ms-cui-ctl-large ms-cui-disabled' role=button onclick='approveSelected();return false;' href='javascript:;' unselectable='on' mscui:controltype='Button'>");
b.push("<SPAN class='ms-cui-ctl-largeIconContainer' unselectable='on'>");
b.push("<SPAN class=' ms-cui-img-32by32 ms-cui-img-cont-float' unselectable='on'>");
b.push("<IMG style='TOP: -129px; LEFT: -255px' alt='' src='/_layouts/1033/images/formatmap32x32.png' unselectable='on'>");
b.push("</SPAN>");
b.push("</SPAN>");
b.push("<SPAN class=ms-cui-ctl-largelabel unselectable='on'>"+tabBtn.btnLabel+"</SPAN>");
b.push("</A>");
b.push("</SPAN>");
b.push("</SPAN>");
b.push("</SPAN>");
b.push("</SPAN>");
b.push("<SPAN class='ms-cui-groupTitle' title='"+tabBtn.groupLabel+"' unselectable='on'>"+tabBtn.groupLabel+"</SPAN>");
b.push("</SPAN>");
b.push("<SPAN class='ms-cui-groupSeparator' unselectable='on'></SPAN>");
b.push("</li>");
setTimeout(function(){
if($("#Ribbon\\.ITEMS").length===1){
$("#Ribbon\\.ITEMS").append(b.join(''));
}else if($("#Ribbon\\.ListItem").length===1){
$("#Ribbon\\.ListItem").append(b.join(''));
},100);
alert("test");
alert("test 1");
setTimeout(function(){
var cc = new SP.ClientContext.get_current();
var web = cc.get_web();
var currLib = web.get_lists().getById(SP.ListOperation.Selection.getSelectedList());
var selectedItems = SP.ListOperation.Selection.getSelectedItems();
if(selectedItems.length>0){
$("#approveAllButton").removeClass("ms-cui-disabled");
}else{
$("#approveAllButton").addClass("ms-cui-disabled");
},200);
I didn't write that code but the website where I found it had some review that says that it was working and I'm more a C# dev than a JavaScript so I'm not use to debug it. Is that a version problem an implementation problem and how to solve it ? 
Thanks for your time :)

Answer 1

Hi,
I think this is not the right way of customising ribbon. SharePoint has a very powerful ribbon management XML framework. So instead of javascript hacking, I would recommend you to use the XML based ribbon customisation. Reference:
http://msdn.microsoft.com/en-us/library/office/jj163954(v=office.15).aspx.
Thanks,
Sohel Rana
http://ranaictiu-technicalblog.blogspot.com