Zeke Rich
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!