What DOM event after a search result returns ?

I'm working on a web site with a search box that shows the search results in an overlay with the original page unavailable in the background. I need to change the focus to the first link in the search results box so that visually impaired people using an OCR will hear or feel the brail of the first search result. (Currently the OCR continues to read from the page behind.)
The search uses www.googleapis.com/customsearch as the search engine.
After the search completes, one of the <div> tags gets an extra class: The <div> goes from :
<div class="gsc-results-wrapper-overlay" >
to
<div class="gsc-results-wrapper-overlay gsc-results-wrapper-visible">
That gsc-results-wrapper-visible class gets added to the div tag.
The page is created with SharePoint and so I don't want to mess with that unless there is no other choice. I want to do everything on the client side if possible.
My question is, how can I capture that div element when the search finishes. What DOM event would I react to? More generally, how can I discover these DOM events myself using developer tools?
I thought about something like this:
document.getElementsByClassName("gsc-results-wrapper-overlay").addEventListener("eventX", displayDate);
But even then I don't know what "eventX" would be.
The site is here:
https://www.dcccd.edu/pages/default.aspx
Babak SekandariProgrammer / AnalystAsked:
Who is Participating?
 
MlandaTCommented:
There's no easy way to do this. You can look at these options:

MutationObserver (might not work with IE, also see here)
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

attrchange - a jQuery plugin (also see here)
http://meetselva.github.io/
0
 
MrunalCommented:
Hi Babak,
When search textbox has some value and enter key is pressed (or search button clicked), search result is published.

So you can bind click event to search button (just next to search text field) and call simple JavaScript method.

First thing, add setTimeout with some delay, so that will that time search result will be appeared.

In this function, check new class 'gsc-results-wrapper-visible' added to same div.

You should get this and add your own logic.

Hope this clears logic.
0
 
Babak SekandariProgrammer / AnalystAuthor Commented:
I'm sorry for the delay in my response. There have been many administrative roadblocks.
I am trying an approach that incorporates both suggestions above:
function SetFocusToSearchResults(){
	alert("In SetFocusToSearchResults");
	// <div class="gsc-results-wrapper-overlay gsc-results-wrapper-visible">
	var overlay = document.getElementsByClassName("TheMainScoper");
	if (overlay.length < 1) return;	
	var overlayDiv = overlay[0];
	if (MutationObserver)
	{	
		var config = { attributes: true};
		var callback = function(mutationsList) { 
			for(var mutation of mutationsList) {
				if (mutation.type == 'attributes') {
					// to do: set the focus to the overlayDiv					
				}
			}
		};	
		var observer = new MutationObserver(callback);		
		observer.observe(overlayDiv, config);
	}
	else
	{
		// to do: set timer to check for "gsc-results-wrapper-visible"
	}
}

Open in new window

MlandaT, so far I have not been able to succeed with the MutationObserver function because when I try to capture the div element with that class name, the
document.getElementsByClassName("gsc-results-wrapper-overlay");
is unable to find it because it is nested in other div tags. Even when I do a find in Chrome's dev tool's Elements tab, that class name is not found unless I start expanding other div tags.
The outermost div tag I can find by class name is this:
document.getElementsByClassName("TheMainScoper");
I suppose that I could get that div tag and then start trying to drill down until I find the correct one; or I could try to use a <script> that occurs later in the page. I might try that later.

Mrunal, I have a section in the code above for your strategy; but if I am unable to capture the gsc-results-wrapper-overlay as indicated above, then I have a more fundamental challenge. As mentioned, I am going to try to move my code to a script that appears later in the page.

Stay tuned, I will continue trying and post again on Monday.
0
 
Babak SekandariProgrammer / AnalystAuthor Commented:
It was difficult to determine which was the best solution. They both had advantages and disadvantages. Setting the timer has a little bit of unpredictability because you don't know how long that will take. I had to set an index such that when the timer function is called a certain number of times, it gives up; but that number is arbitrary.
The mutation observer is cleaner, but I had to set a timer anyways since the overlay wrapper was not available when the script first ran. Also, the mutation observer might not be available on earlier browsers.
I had to use a combination of the two methods.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.