Trying to solve some logical bug in my code

[Jack_Tauson_Sr]

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>

[m_hutley]

Well, does the output HTML when your code does it look correct? What defines tabInfo in the line of code?

[Jack_Tauson_Sr]

Yeah, I can see the <li> tags are getting added below the <ul> tag and it looks similar to the HTML that I shared above. tabinfo (this.tabsInfo = tabsArray;)contains tab names which are obtained from a webservice call.

[m_hutley]

Right… but if the code is using tabsInfo to set up the tab javascript… and you change the HTML, but not tabsInfo…

[Jack_Tauson_Sr]

Hmm, if you are referring to why I am not updating the divs with tabContent id, then I tried that and for some reason, it’s throwing error. So, I thought, why not test the first part where I am dynamically creating the <li> tags.

That’s another thing I am wondering why it’s throwin error. Basically, I tried to do the following

for (var key in collection) {
         if (collection.hasOwnProperty(key)) {
       $_('#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>');
	   $_('#tabContent').append('<div id="panel_EMPLOYEE_REVIEW" class="tab-pane fade" role="tabpanel"><div class="panelContent"><div id="jqxgrid_EMPLOYEE_REVIEW"></div></div>'); 
}

And this is the HTML I used for the above purpose :

<div id="emp_home_page" class="page-container" style="display:none;">
   <ul class="nav nav-tabs" id = "tabs">
   </ul>
   <div class="tab-content" id="tabContent">
   </div>
</div>

And I keep getting the following javascript error :

Uncaught Error: Invalid Selector - #jqxgrid_EMPLOYEE_REVIEW! Please, check whether the used ID or CSS Class name is correct.

Not sure what’s causing this error because instead of using webservice call to pupulate the div ids, I have hard coded the div tag in this line and it is exactly similar to the one mentioned in the HTML and still it throws error. Am I doing something wrong here?

$_('#tabContent').append('<div id="panel_EMPLOYEE_REVIEW" class="tab-pane fade" role="tabpanel"><div class="panelContent"><div id="jqxgrid_EMPLOYEE_REVIEW"></div></div>');

I think even though, I would include panel_COMPANY_REVIEW related hardcoded dive above, I believe it’s going to throw same error.