I am stuck here. Sharing my javscript code and html which might be difficult to understand easily since it’s a part of my framework. But I will focus on the exact problem.
I am trying to replace the <li>
tags through the results obtained from webservice so that I can dynamically create <li>
tags based on the information I get from a webservice call. For this,
I have the following piece of code :
for (var key in collection) {
if (collection.hasOwnProperty(key)) {
// Added Next to UL Tag
// $_('#tabs').append('<li role="presentation" ><a data-toggle="tab" id="tab_'+collection[key].employeeName+'" href="#panel_'+collection[key].employeeName+'">'+collection[key].employeeName+'<span id="count_'+collection[key].employeeName+'" class="countLabel"></span></a></li>');
}
}
However, as soon as I add this code, I can see the employee names on the HTML tabs but the control is not reaching inside this file TabbedDataGrid.js
. So, basically, I have included some console log statements inside TabbedDataGrid.js
file and I don’t see it executing after using the above code. By the way, the control is reaching to the TabbedDataGrid.js
file through the following line of code :
self.tabbedDataGrids[tabInfo_.key] = new TabbedDataGrid($_, tabInfo_.key, tabInfo_.index, "getemployees");
On the other hand, as soon as I comment out the above dynamic <li>
creation for loop related code and just use the hardcode HTML as it is currently defined in the HTML file, everything works fine and I was able to see the console logs defined
inside the TabbedDataGrid.js
.
Is there any logical bug that I am not able to figure out here ?
jQuery(window).trigger(jQuery.project.app.events.builder_loaded, (function($_, app_) {
return new function() {
var self = this;
// This maintains state after a cell is clicked and prevents double clicks from triggering an event twice.
this.cellClicked = false;
this.defaultTab = "";
// Call the authorize web service with the user's login ID.
this.tabbedDataGrids = null;
this.initialize = function() {
var data = {
employee_id: app_.employee.id
};
app_.getNoPreValidateConfigReg(data, self.processEmployeeTabs, app_.processError, "getTabs");
};
this.processEmployeeTabs = function(data_, textStatus_, jqXHR_) {
data_ = app_.processResponse(data_, jqXHR_);
var collection = data_.employeeTabsList;
var tabsArray = [];
$_.each(collection, function(index_, term_) {
tabsArray.push({
index: term_.employeeName,
key: term_.employeeName
})
});
this.tabsInfo = tabsArray;
self.tabbedDataGrids = {};
// Setup the data grids
$_.each(tabsArray, function(index_, tabInfo_) {
// Initialize the tabbed data grid and maintain it in a collection.
self.tabbedDataGrids[tabInfo_.key] = new TabbedDataGrid($_, tabInfo_.key, tabInfo_.index, "getemployees");
});
this.defaultTab = collection[0].employeeName;
for (var key in collection) {
if (collection.hasOwnProperty(key)) {
// Added Next to UL Tag
// $_('#tabs').append('<li role="presentation" ><a data-toggle="tab" id="tab_'+collection[key].employeeName+'" href="#panel_'+collection[key].employeeName+'">'+collection[key].employeeName+'<span id="count_'+collection[key].employeeName+'" class="countLabel"></span></a></li>');
}
}
$_("#emp_home_page").css("display", "");
// Load the default tab
var defaultDataGrid = self.tabbedDataGrids[this.defaultTab];
$_(defaultDataGrid.tabSelector).trigger("click");
// Trigger the "builder initialized" event.
$_(window).trigger(app_.events.builder_initialized, {
key: "registry_home_page"
});
};
};
})(jQuery, jQuery.project.app));
Here is the hard code HTML :
<div id="emp_home_page" class="page-container" style="display:none;">
<ul class="nav nav-tabs" id = "tabs">
<li role="presentation" class="active">
<a data-toggle="tab" id="tab_EMPLOYEE_REVIEW" href="#panel_EMPLOYEE_REVIEW">EMPLOYEE_REVIEW <span id="count_EMPLOYEE_REVIEW" class="countLabel"></span></a>
</li>
<li role="presentation">
<a role="tab" data-toggle="tab" id="tab_COMPANY_WINDOW" href="#panel_COMPANY_WINDOW">COMPANY_WINDOW <span id="count_COMPANY_WINDOW" class="countLabel"></span></a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div id="panel_EMPLOYEE_REVIEW" class="tab-pane fade in active" role="tabpanel">
<div class="panelContent">
<div id="jqxgrid_EMPLOYEE_REVIEW"></div>
</div>
</div>
<div id="panel_COMPANY_WINDOW" class="tab-pane fade" role="tabpanel">
<div class="panelContent">
<div id="jqxgrid_COMPANY_WINDOW"></div>
</div>
</div>
</div>
</div>