[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2012-09-17
7
Medium Priority
?
800 Views
Last Modified: 2012-09-21
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
0
Comment
Question by:Ian White
  • 4
  • 3
7 Comments
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38414249
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
 

Author Comment

by:Ian White
ID: 38415509
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
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38415916
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Ian White
ID: 38420370
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
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38420812
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
 

Author Comment

by:Ian White
ID: 38424014
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
 

Author Closing Comment

by:Ian White
ID: 38424016
Thanks for solving this perplexing problem , that was overlooked by the original designers
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question