|
Hi All,
I have a widget, in that i have some div's on click the div , tab will get opened.
Now i want an method which can call the tabbody for loading .this will be an Ajax call.On Click on tab, body should be loaded...Ajax call for loading the tabbody.
I have written a jsp namely root.jsp which would be body of tab.Plz give am example am struck with this since long time.Help is Appreciated.
My Function is:
function openNewTab(val) {
var tabs = bb.getElementById("mainTab");
var newTab = bb.callMethod(bb.document, 'createElementNS',
['http://www.backbase.com/2006/btl', 'b:tab']);
newTab.modelNode.setAttribute("label",val);
newTab.modelNode.setAttribute("class","tab");
newTab.modelNode.setAttribute("padding","2px");
bb.construct(newTab.modelNode);
bb.callMethod(tabs, 'appendChild',[newTab]);
var tabbarTable = tabs.viewNode.getElementsByTagName("table")[0];
var tabObjects = tabbarTable.getElementsByTagName("TD");
var tabDivs = tabObjects[tabObjects.length-1].getElementsByTagName("DIV");
var tabTitle = tabDivs[tabDivs.length-1];
bb.setProperty(tabs,'selectedIndex', tabObjects.length-1);
tabTitle.innerHTML = "<span style='margin-right:20px'>"+val+"</span>";
var closeButton = tabTitle.appendChild( document.createElement("img"));
closeButton.align ="right";
closeButton.style.marginTop=document.all?"-14px":"-13px";
closeButton.style.cursor="pointer";
closeButton.title="Close tab"
closeButton.height="16px";
closeButton.src = '<%=request.getContextPath()%>/pages/images/close.gif';
closeButton.onclick = function(evt) {
var srcObj = document.all?event.srcElement:evt.target;
while(srcObj.tagName!="TD") srcObj = srcObj.parentNode;
var srcContainer = srcObj;
while(srcContainer.tagName!="DIV") srcContainer = srcContainer.parentNode;
var tabBodies = new Array();
for(var count=0;count<srcContainer.childNodes.length;count++) {
if(srcContainer.childNodes[count].tagName=="DIV") tabBodies.push(srcContainer.childNodes[count]);
}
if(!confirm("Close tab?")) return false;
var indexVal = srcObj.cellIndex;
bb.getControllerFromView( tabBodies[indexVal] );
bb.callMethod(tabs, 'removeChild',[(thisTab)]);
bb.command.destroy(thisTab);
}
newTab.viewNode.className += " btl-tab-selected";
document.getElementById("globalInfoBox").style.display="none";
// append inner content
***********************************
***Make An Ajax call to root.jsp****
************************************
newTab.viewNode.innerHTML = "New Tav";
}
]]>
</e:script>
<code>
For maintab i have loaded the tabbody.I want to add body for the tabs am adding when i click on the div's in a widget.My code to add tabs already pasted for your reference.i want to load the tabbody for the added tab.i want to have an ajax call where i can load the tabBody.I already have my tabBody as root.jsp.
can u plz me help on this..Help needed urgently..Plz look at my code for your reference.
Thanks
var tabs = bb.getElementById("mainTab");
var newTab = bb.callMethod(bb.document, 'createElementNS',
['http://www.backbase.com/2006/btl', 'b:tab']);
newTab.modelNode.setAttribute("label",val);
newTab.modelNode.setAttribute("class","tab");
newTab.modelNode.setAttribute("padding","2px");
bb.construct(newTab.modelNode);
bb.callMethod(tabs, 'appendChild',[newTab]);
var tabbarTable = tabs.viewNode.getElementsByTagName("table")[0];
var tabObjects = tabbarTable.getElementsByTagName("TD");
var tabDivs = tabObjects[tabObjects.length-1].getElementsByTagName("DIV");
var tabTitle = tabDivs[tabDivs.length-1];
bb.setProperty(tabs,'selectedIndex', tabObjects.length-1);
tabTitle.innerHTML = "<span style='margin-right:20px'>"+val+"</span>";
var closeButton = tabTitle.appendChild( document.createElement("img"));
closeButton.align ="right";
closeButton.style.marginTop=document.all?"-14px":"-13px";
closeButton.style.cursor="pointer";
closeButton.title="Close tab"
closeButton.height="16px";
closeButton.src = '<%=request.getContextPath()%>/pages/images/close.gif';
closeButton.onclick = function(evt) {
var srcObj = document.all?event.srcElement:evt.target;
while(srcObj.tagName!="TD") srcObj = srcObj.parentNode;
var srcContainer = srcObj;
while(srcContainer.tagName!="DIV") srcContainer = srcContainer.parentNode;
var tabBodies = new Array();
for(var count=0;count<srcContainer.childNodes.length;count++) {
if(srcContainer.childNodes[count].tagName=="DIV") tabBodies.push(srcContainer.childNodes[count]);
}
if(!confirm("Close tab?")) return false;
var indexVal = srcObj.cellIndex;
bb.getControllerFromView( tabBodies[indexVal] );
bb.callMethod(tabs, 'removeChild',[(thisTab)]);
bb.command.destroy(thisTab);
}
newTab.viewNode.className += " btl-tab-selected";
document.getElementById("globalInfoBox").style.display="none";
// append inner content
***********************************
***Make An Ajax call to root.jsp****
************************************
newTab.viewNode.innerHTML = "New Tav";
}
]]>
</e:script>
<code>
For maintab i have loaded the tabbody.I want to add body for the tabs am adding when i click on the div's in a widget.My code to add tabs already pasted for your reference.i want to load the tabbody for the added tab.i want to have an ajax call where i can load the tabBody.I already have my tabBody as root.jsp.
can u plz me help on this..Help needed urgently..Plz look at my code for your reference.
Thanks
Hi sruzana, I think the
28 December, 2007 - 16:13 — GrauwHi sruzana,
I think the b:populator element does what you need? See the reference documentation for more information. Alternatively, you can attach an event handler to the tab using the DOM addEventListener method, and in that listener load the corresponding content using bb.command.load or XMLHttpRequest.
Hope that helps,
~Grauw