Here is the code:
Main page
----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<!---
/*********************************************************************************************/
/* jQuery AJAX Simple Tabs by developersnippets, This code is intended for
practice purposes.*/
/* You may use these functions as you wish, for commercial or non-commercial
applications, */
/* but please note that the author offers no guarantees to their usefulness,
suitability or */
/* correctness, and accepts no liability for any losses caused by their use.
*/
/*********************************************************************************************/
--->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Display Maps</title>
<link rel="stylesheet" type="text/css" href="../../style/tabs.css"
media="screen">
<script language="javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
type="text/javascript"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css"
media="screen" />
<script type="text/javascript">
var reqPageUrl = new Array();
reqPageUrl[1] = "dsp_googleMap.cfm";
reqPageUrl[2] = "dsp_StreetViewMap.cfm";
function loadTab(id)
{
if (reqPageUrl[id].length > 0)
{
$("#preloader").show();
$.ajax(
{
url: reqPageUrl[id],
cache: false,
error: function(XMLHttpRequest, textStatus, errorThrown)
{
$('#tabmenu a').removeClass('active'); //remove
all class='active' for all anchors
$("#content_tab"+id).toggleClass('active');
//add class to the current one
$("#content").empty().append('Error in Loading
page, please do check with the path');//if there is any error in the request
$("#preloader").hide();//hide the preloader
},
success: function(message)
{
$('#tabmenu a').removeClass('active'); //remove
all class='active' for all anchors
$("#content_tab"+id).toggleClass('active');
//add class to the current one
$("#content").empty().append(message);//first
empty the content, then append content
$("#preloader").hide();//hide the preloader
tb_init('a.thickbox, area.thickbox,
input.thickbox'); //call tb_init function to initiate ThichBox into your
respective tab panels
}
});
}
}
$(document).ready(function()
{
loadTab(1); //After page loading, active tab 1
$("#preloader").hide();
$("#content_tab1").click(function(e){e.preventDefault(); loadTab(1);});
//Here e.preventDefault(); is to prevent the respective href from going the
user off the link, that is the href url '#' which is appending to the URL will
going off
$("#content_tab2").click(function(e){e.preventDefault(); loadTab(2);});
});
</script>
</head>
<body>
<!--- Container [Begin] --->
<div class="container">
<ul id="tabmenu">
<li><a id="content_tab1" href="#">Map View</a></li>
<li><a id="content_tab2" href="#">Street View</a></li>
</ul>
<div id="preloader">
<img src="/images/loadingAnimation.gif" align="absmiddle"> Loading
Content Please Wait...
</div>
<div id="content"><!--- Sample Demonstration of How AJAX Tabs Work with
ThickBox Functionality ---></div>
</div>
<!--- --->
<!--- Container [End] --->
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
one of the maps...dsp_googleMap.cfm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!---Call the Google API --->
<script
src="http://maps.google.com/maps?file=api&v=2&key=<cfoutput>#URLEncodedFormat(GoogleKey)#</cfoutput>&sensor=true"
type="text/javascript">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js";></script>
<script type="text/javascript">
function initialize()
{
var map = new
GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(#Variable.m_latitude#,
#Variable.m_longitude#);//Pass the Longitude/Latitude values.
map.setCenter(center, 15);//Zoom in
var marker = new GMarker(center, {draggable: false});
map.addOverlay(marker);//Add the marker
map.setUIToDefault();
}
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
initialize();
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 600px; height: 330px"></div>
</cfoutput>
</body>
</html>
>You might need to post some code examples or a link to view.
>
>I use both types of jquery scripts. Neither has had any problem pulling
>.cfm pages.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Want to reach the ColdFusion community with something they want? Let them know
on the House of Fusion mailing lists
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:328262
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
