Custom JS snippet after Query Results

Christopher_Carver

I need to call a bit of JavaScript after the Query Results fully loads and returns data for request offerings. Does anyone have a bit of JS code that can do this? I have tried 

$(window).load(function

but that does not work. 

seth_coussens

Personally, I'd use a mutation observer, rather than try and catch the page load completion. Since these are async calls after the page has actually 'loaded' that event most likely won't catch what you you are looking for. Instead you can attach a mutation observer to the specific element you are looking for and then watch that element for each change until you see the information you are looking for, and then have your code perform it's actions. Attached is an example of this that uses a grid and waits for the grid to load to post the count of elements.

Here is an example of the relevent pieces:

First you will want this all in a 'page loaded' element, so that you can see the various page formatting elements:

$(document).ready(function () { }

Then, you'd grab the page element you want and attach an observer to it to see as it's children are added and changed. Scope this down as far as you can for better performance.

// create an observer instance
var observer = new MutationObserver(function(mutations) {

   var titleElement = $(".k-group-indicator");
   console.log(`Found droptarget: ${titleElement.length}`);

   if (titleElement.length > 0) { 
      //An element with class of page_title exists.
      var gridElement = $('[data-role=grid]') 
      // Get the grid object
      console.log(`Found grid: ${gridElement.length}`);

      if (gridElement.length > 0) {
         AddNumberTextOnGridDataSourceChange(gridElement);
         AddTotalsToGroupedByGridViews();
      }

      //We are done observing.
      observer.disconnect();
   }

});

// configure the observer and start the instance.
var observerConfig = { 
   attributes: true, 
   childList: true, 
   subtree: true, 
   characterData: true 
};
observer.observe(mainPageNode, observerConfig);

seth_coussens

Personally, I'd use a mutation observer, rather than try and catch the page load completion. Since these are async calls after the page has actually 'loaded' that event most likely won't catch what you you are looking for. Instead you can attach a mutation observer to the specific element you are looking for and then watch that element for each change until you see the information you are looking for, and then have your code perform it's actions. Attached is an example of this that uses a grid and waits for the grid to load to post the count of elements.

Here is an example of the relevent pieces:

First you will want this all in a 'page loaded' element, so that you can see the various page formatting elements:

$(document).ready(function () { }

Then, you'd grab the page element you want and attach an observer to it to see as it's children are added and changed. Scope this down as far as you can for better performance.

// create an observer instance
var observer = new MutationObserver(function(mutations) {

   var titleElement = $(".k-group-indicator");
   console.log(`Found droptarget: ${titleElement.length}`);

   if (titleElement.length > 0) { 
      //An element with class of page_title exists.
      var gridElement = $('[data-role=grid]') 
      // Get the grid object
      console.log(`Found grid: ${gridElement.length}`);

      if (gridElement.length > 0) {
         AddNumberTextOnGridDataSourceChange(gridElement);
         AddTotalsToGroupedByGridViews();
      }

      //We are done observing.
      observer.disconnect();
   }

});

// configure the observer and start the instance.
var observerConfig = { 
   attributes: true, 
   childList: true, 
   subtree: true, 
   characterData: true 
};
observer.observe(mainPageNode, observerConfig);

Christopher_Carver

Thank you Seth for the explanation and code snippet.