Jquery Ajax tabs -with Coldfusion

[N K-2]

Hi All,

I am currently using the Thickbox.js along with jquery to display the tabs.
code >>http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=617

The main issue is that I am not able to use '.cfm' pages instead of html pages('contentpage1.html/contentpage2.html...' ) ,which are the URL links to the content.
Has any one used this before ?
Which plugin would be the best which uses jquery & ajax , and would work with coldfusion files?

Thank you
NK


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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:328191
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4

[Raymond Camden]

Why are you not able to use CFM pages? I've used jQuery tabs and
thickbox with CFM files many times.


On Tue, Nov 10, 2009 at 10:21 AM, N K <neetukaistha@...> wrote:

>
> Hi All,
>
> I am currently using the Thickbox.js along with jquery to display the tabs.
> code >>http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=617
>
> The main issue is that I am not able to use '.cfm' pages instead of html pages('contentpage1.html/contentpage2.html...' ) ,which are the URL links to the content.
> Has any one used this before ?
> Which plugin would be the best which uses jquery & ajax , and would work with coldfusion files?
>
> Thank you
> NK
>
>
>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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:328196
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4

[Scott Stewart-9]

I'll echo Ray, I've used JQuery Tabs a lot with ColdFusion, JQuery doesn't
care if it's a .cfm, .php, .aspx, .do or whatever as long as the server can
render it back to the browser..

Having said that, if you're trying to do anything cross-site or cross-domain
JQuery gets upset, but it's still filename independent.

-----Original Message-----
From: Raymond Camden [mailto:rcamden@...]
Sent: Tuesday, November 10, 2009 12:42 PM
To: cf-talk
Subject: Re: Jquery Ajax tabs -with Coldfusion


Why are you not able to use CFM pages? I've used jQuery tabs and
thickbox with CFM files many times.


On Tue, Nov 10, 2009 at 10:21 AM, N K <neetukaistha@...> wrote:
>
> Hi All,
>
> I am currently using the Thickbox.js along with jquery to display the
tabs.
> code >>http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=617
>
> The main issue is that I am not able to use '.cfm' pages instead of html
pages('contentpage1.html/contentpage2.html...' ) ,which are the URL links to
the content.
> Has any one used this before ?
> Which plugin would be the best which uses jquery & ajax , and would work
with coldfusion files?
>
> Thank you
> NK
>
>
>



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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:328204
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4

[N K-2]

Thanks for your replying.
I am not sure whats happening , basically the screen gets cleared and transfers the main site page.

If you guys have used it and it works then there has to be some code which is contradicting the same.

NK

>I'll echo Ray, I've used JQuery Tabs a lot with ColdFusion, JQuery doesn't
>care if it's a .cfm, .php, .aspx, .do or whatever as long as the server can
>render it back to the browser..
>
>Having said that, if you're trying to do anything cross-site or cross-domain
>JQuery gets upset, but it's still filename independent.
>
>Why are you not able to use CFM pages? I've used jQuery tabs and
>thickbox with CFM files many times.
>
>
>
>>
>> Hi All,
>>
>> I am currently using the Thickbox.js along with jquery to display the
>tabs.
>> code >>http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=617
>>
>> The main issue is that I am not able to use '.cfm' pages instead of html
>pages('contentpage1.html/contentpage2.html...' ) ,which are the URL links to
>the content.
>> Has any one used this before ?
>> Which plugin would be the best which uses jquery & ajax , and would work
>with coldfusion files?
>>
>> Thank you
>> NK
>>
>>
>>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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:328207
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4

[Jerry Barnes]

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:328214
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4

[N K-2]

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=17837.14401.4

[Scott Stewart-9]

Check the tabs documentation:

http://www.jqueryui.com/demos/tabs/

Specifically the bottom dealing with Google Maps API

-----Original Message-----
From: N K [mailto:neetukaistha@...]
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=17837.14401.4

[N K-2]

>Check the tabs documentation:
>
>http://www.jqueryui.com/demos/tabs/
>
>Specifically the bottom dealing with Google Maps API
>



Thanks for posting the link.
It looks like that I will have to use Ajax tabs with out Jquery in this case.

Thank You
NK

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
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:328278
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.4