Check the tabs documentation: http://www.jqueryui.com/demos/tabs/
Specifically the bottom dealing with Google Maps API -----Original Message----- From: N K [mailto:neetukais...@gmail.com] Sent: Wednesday, November 11, 2009 9:23 AM To: cf-talk Subject: Re: Jquery Ajax tabs -with Coldfusion 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>#URLEnco dedFormat(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"></scri pt> <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:328271 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4