Link to home
Start Free TrialLog in
Avatar of Zeke Rich
Zeke RichFlag for United States of America

asked on

Trying to load a page into a div with AJAX

This is a map of the united states. I am using area coordinates to make hotspots on the map. When a user clicks the hotspot  I want to load info about that State into the div "myArea" using ajax. I have tried and tried, the Jquery is not binding to the link. Every time i click the area link it goes to the page instead of loading the page in the div with ajax.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAP</title>
<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>




<script>
$(function() {
		$('.map').maphilight();
	});
		
</script>	


</head>

<body>


<img class='map' src="SitePad_Test.jpg" alt="" width="3840" height="2160" usemap="#Map"/>
<map name="Map">
  <area class="link" shape="poly" coords="1017,389,840,225,840,170,838,100,1071,101,1071,332" href="gpio.php?psh1" alt="build_1"  onclick="play()">
  <area class="link" shape="poly" coords="1057,427,1244,227,1247,104,1414,107,1411,204,1460,254,1184,558" href="gpio.php?psh2" alt="blding_2"  onclick="play()">
  <area class="link" shape="poly" coords="1076,596,927,733,824,638,835,354,1037,545" href="gpio.php?psh3" alt="building_3"  onclick="play()">
  <area class="link" shape="poly" coords="1677,379,1544,253,1546,86,1712,91,1713,176,1793,258" href="gpio.php?psh4" alt="building_4"  onclick="play()">
</map>
	
<audio id="audio" src="audio/digi_plink.wav" ></audio>

<script>
/*
  function play(){
   var audio = document.getElementById("audio");
   audio.play();
			 }
*/
</script>
	
	
<div id='myArea'>here</div>



<script type="text/javascript">
$(document).load(function(){
 $("area.link").click(function(){
	 event.preventDefault();
        $("#myArea").load($(this).attr("href")); 
        return false;
    })
});
</script>

	
	
</body>
</html>

Open in new window

SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I tested your code and you don't have any syntactical or  logicall errors.I think that your problem is the path directory in the href attr. Check to be the right.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Zeke Rich

ASKER

Ryan Chong I did remove all instances related to playing audio and the script still did not work. But i will re-implement the audio using part of the code you supplied so i thank you for that. Chris Stanyon your code did correct the problem and was the correct answer. Thank you much!