HTML5 Tip Triggers dont work when partial page refresh by java script Firefox, Chrome, Safari

I have a HTML5  search results page with filters down the left.  With Firefox, Safari and Chrome the Tip triggers (hover help) work ok on load of page and refresh of whole page but not on partial refresh of right column when a bullet search filter is clicked on left hand col. The search filters only refresh the right column rather than the whole page.  
Appreciate your help.

Here is the page in question:

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&HouseSitTerm=a&PetType=a,e,o

The tip trigger in question is right column top right - the question mark next to Flexi Results
ie Flexi Results ?  The code for the tip trigger is below:

      <div id="tabs">
	<a href="#" class="tab-links active" id="all_results"><span>All Results</span></a>
	<a href="#" class="tab-links" id="flexi_link"><span>Flexi Results</span></a>
	<span class="tip-triggers">(?)</span>
	<div id="flexi-location-tip" class="tip-boxes">
		<h6>What is Flexi Location?</h6>
		<p>Search for house sitters who are willing to travel for house sitting assignments.</p>
</div>

Open in new window



BTW not an issue for IE - as the whole page refreshes, due to history/ query string/ backward compatability  issues

Appreciate your help
Ian WhiteOwner and FounderAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
It looks like you are currently binding the event at line 1428 of your scripts.js file - inside a $(window).load function, but to make it ajax proof, you'll need to change that.

replace lines 1428-1447 with this:

$('body').on('mouseenter mouseleave', '.tip-triggers',
	function(event) {
		if (event.type == 'mouseenter') {
			$(this).next('.tip-boxes')
				.css({
					top: $(this).position().top -10,
					left: $(this).position().left + 30
				})
				.show()
		}
		
		if (event.type == 'mouseleave') {
			$(this).next('.tip-boxes').hide()
		}
	}
)

Open in new window

Don't forget to back up first.
0
 
Chris StanyonCommented:
You are binding the Hover event to the triggers when the page first loads, which will only attach to elements that exist at that time. When you call part of a page using ajax, any new triggers won't have the hover event, because they didn't exist when the original call was made.

The way to overcome this is to delegate the events using the on() function. Something like this would do the trick:

$(document).ready(function() {
	$('body').on('mouseenter mouseleave', '.tip-triggers',
		function(event) {
			if (event.type == 'mouseenter') {
				$(this).next('.tip-boxes')
					.css({
						top: $(this).position().top -10,
						left: $(this).position().left + 30
					})
					.show()
			}
			
			if (event.type == 'mouseleave') {
				$(this).next('.tip-boxes').hide()
			}
		}
	)
});

Open in new window

0
 
Ian WhiteOwner and FounderAuthor Commented:
Great - thanks I will give that a try.

I am a bit of a javascript novice. Many years on back end programming. The design firm has abandoned me for corportate clients.

Can you tell me where I stick the block of code?  Do I add it between <script> <script>
like so?

<script src="js/delegateevents.js"></script>

How do I then invoke it?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Ian WhiteOwner and FounderAuthor Commented:
Hi thanks for your efforts, but that does not work.

Tip trigger works ok on initial page load, but after jsscript change still not hover text after clicking search filter eg Pets bullet in left margin,


I have put this in test3 environment.

You can view/test  the change here
http://housecarers.com/test3/advanced-search-results-housesitters.cfm?co=Canada&sta=2&PetType=b,d,g&keywords2=ba


BTW it does not use ajax to do refresh of right had div  - just jscript
in script.js line 205 find

function makeQuery() {
queryPage = State.url;
/* Temporary Query Page for Demo - the following two lines need to be commented in live site */
/* queryPage = queryPage.replace('advanced', 'ajax/tmp-advanced'); */
/* queryPage = queryPage.replace('.cfm', '.php'); */
$('#results_wrapper').load(queryPage + ' #for_load');
}
0
 
Chris StanyonCommented:
Can't really test it as your page still has your old code in it. By the way - this line:

     $('#results_wrapper').load(queryPage + ' #for_load');

is an ajax call. load(), post() and get() are all just shorthand methods for ajax()
0
 
Ian WhiteOwner and FounderAuthor Commented:
My mistake

I put it in at

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=au&sta=4&keywords4=df&keywords6=fd

And it is now working

Thanks for all your help
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks for solving this perplexing problem , that was overlooked by the original designers
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.