Trying to solve some logical bug in my code

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>

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

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.

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

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.