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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.