In my interactive grid I have a requirement that hides columns within a function that gets called in the "Execute when page loads" section of the page-level attributes, specifically using the hideColumn method. When the function gets called an error gets printed to the console:

Uncaught Error: cannot call methods on stickyWidget prior to initialization; attempted to call method 'refresh'

The following javascript function titled renameColumnHeaders is called in the Execute when Page Loads section of the page level attributes $('.toggle-part-cb').each(renameColumnHeaders); where toggle-part-cb is the name of a CSS class assigned to a checkbox group page item.

The following code is the renameColumnHeaders function:

function renameColumnHeaders() {
  var $wrapperDiv = $(this);
  var $item = $wrapperDiv.find('.apex-item-checkbox');
  var $checkboxes = $item.find('input[type="checkbox"]');
  var selectedParts = $checkboxes.filter(function() {
    return this.checked === true;
  });
  
  var gridView = apex.region("ig-static-id").call("getViews").grid;
  for (let i = selectedParts.length; i < 10; i++) {
    gridView.view$.grid("hideColumn", "PART_" + (i + 1));
  };
  
  for (let i = 0; i < selectedParts.length; i++) {
    $("#part-" + (i + 1) + "_HDR").text(selectedParts[i].ariaLabel.trim());
  };
};

In my interactive grid I have a requirement that hides columns within a function that gets called in the "Execute when page loads" section of the page-level attributes, specifically using the hideColumn method. When the function gets called an error gets printed to the console:

Uncaught Error: cannot call methods on stickyWidget prior to initialization; attempted to call method 'refresh'

The following javascript function titled renameColumnHeaders is called in the Execute when Page Loads section of the page level attributes $('.toggle-part-cb').each(renameColumnHeaders); where toggle-part-cb is the name of a CSS class assigned to a checkbox group page item.

The following code is the renameColumnHeaders function:

function renameColumnHeaders() {
  var $wrapperDiv = $(this);
  var $item = $wrapperDiv.find('.apex-item-checkbox');
  var $checkboxes = $item.find('input[type="checkbox"]');
  var selectedParts = $checkboxes.filter(function() {
    return this.checked === true;
  });
  
  var gridView = apex.region("ig-static-id").call("getViews").grid;
  for (let i = selectedParts.length; i < 10; i++) {
    gridView.view$.grid("hideColumn", "PART_" + (i + 1));
  };
  
  for (let i = 0; i < selectedParts.length; i++) {
    $("#part-" + (i + 1) + "_HDR").text(selectedParts[i].ariaLabel.trim());
  };
};

The interactive grid has 10 columns named PART_1, PART_2,... PART_10. The grid's column labels change to the display values selected in the checkbox page item mentioned above. If less than 10 values are selected in the checkbox group, then columns are hidden to match the number of selected values.

When commenting out the gridView.view$.grid("hideColumn", "PART_" + (i + 1)); Line, the error goes away. Executing the function at a different point (button click, page item change) after the page loads still yields the same error.

The error was replicable on a different page that tried to hide a column on page load so I feel like the problem might have a generic fix. Any help would be appreciated.

• jquery
• oracle-apex

Share Improve this question Follow edited Mar 13 at 19:33 Jason Bourne asked Mar 11 at 18:09 Jason BourneJason Bourne 451212 bronze badges 4

• OK, you posted link to documentation, error you got, but - you missed to post code you wrote, and it is difficult to debug something you can't see. Edit the message and post some more info. Apex is a GUI so screenshots might be an option. – Littlefoot Commented Mar 12 at 11:41
• I just included the function that does the column hiding that generates the error. – Jason Bourne Commented Mar 12 at 16:46
• Did you try this solution? – Raghavendra N Commented Mar 14 at 6:08
• It would be helpful if you posted a minimal reproducible example of the problem, not just a partial code sample. We need to see how you are handling the "execute when page loads" as well as the other JS libraries you're including. Do you need to manually initialize gridView or gridView.view$? – kmoser Commented Mar 16 at 1:07

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

It's hard to tell without seeing more of your code but it seems like your function is calling another function which is reliant on the stickyWidget method which probably from a script that hasn't been loaded yet.

If you are loading this library as a separate script I would see if that library has a means of checking when it has loaded. Ideally any external script files your code depends on would be included before it in the head and get loaded first. If you have several external libraries that depend on each other you might need to reorder them as well.

The error occurs because hideColumn is being called before the Interactive Grid (IG) is fully initialized. The solution is to ensure that your function executes only after the grid is ready

Solution: Use apex.region(...).on("interactivegridready", function() {...})

Modify your renameColumnHeaders function to run after the Interactive Grid is initialized:

apex.region("ig-static-id").on("interactivegridready", function() {
    renameColumnHeaders();
});

The "interactivegridready" event ensures the grid has fully loaded before trying to manipulate columns and prevents calling hideColumn on an uninitialized grid, avoiding the stickyWidget error

Alternative Fix (Ensure Grid Exists): If you still experience issues, wrap your grid calls in a setTimeout to delay execution slightly

setTimeout(function() {
    renameColumnHeaders();
}, 300);

Hope this helps