[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How do I pass binded data from a .cfm back to a Javascript callback handler?

Posted on 2010-11-08
10
Medium Priority
?
807 Views
Last Modified: 2012-05-10
Hello,

Right now I have a CFDIV that is binded to a radio button.  On the click it fires off a .cfm template that then refreshes the contents of the CFDIV.  This all works due to ColdFusion.Navigate function ( thanks _agx_).  What I would like to do is have several variables come back to the callback function after the CFDIV refreshes for use in another javascript function.

In other words, I need the .cfm page to get two values; a latitude and a longitude.  I would then like to use both of those variables in a javascript function that only fires after the CFDIV is refreshed via the ColdFusion.naviagte function.

Any ideas?

Thanks!!!!!
<script>
      function loadDiv(value) {
            // Change the contents of the CFDIV
            ColdFusion.navigate('testGet.cfm?method=getData&testVariable='+ value, 'testDiv');
      }
    function callbackHandler(result){
          // This is where i need the latitude and longitude returned back in order to fire some code for Google Maps
    }
</script>
<cfform>
      Check/uncheck the box .. <cfinput type="checkbox" name="testVariable" />
</cfform>

<cfdiv id="testDiv" />
<cfajaxproxy bind="javascript:loadDiv({testVariable@click})"
        onSuccess="callbackHandler">

TESTGET.CFM
---------------
<cfparam name="url.testVariable" default="0">
<div style="background-color: blue; color: white;">
<cfset latitude = '30'>
<cfset longitude = '-40'>
<cfoutput>
      Latitude #latitude#<br/>
      Longitude #longitude#
</cfoutput>            
</div>

Open in new window

0
Comment
Question by:stracqan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 34088416
Check this:


TESTGET.CFM
---------------
<cfparam name="url.testVariable" default="0">
<div style="background-color: blue; color: white;">
<cfset latitude = '30'>
<cfset longitude = '-40'>
<cfoutput>
      Latitude: #latitude#<br/>
      Longitude: #longitude#
<script>
    // define values:
    var myResult = {latitude:#latitude#, longitude:#longitude# };

    // call CallBack:
    callbackHandler(myResult);

    // change your callBackHandler to this for testing:
    function callbackHandler(theResult){
         alert("Latitude: "+theResult.latitude+"\nLongitude: "+theResult.longitude);
    }
</script>
</cfoutput>            
</div>
0
 

Author Comment

by:stracqan
ID: 34088546
First, thank you for your response.  That works, but I would like to have the callback function called from outside of the TESTGET.cfm page because right now that is how I have it set up and it is not working when I call the .cfm page

In other words, i have my javascript on one page that gets data from the .CFM page and binds it to a CFDIV.  Once the contents of the CFDIV refresh, I would like to have the callback function that is on the orginal page and not the TESTGET.cfm page fire off..

Thanks!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 34088573
>>   window.onload = loadScript;

The more I think about it,  you could probably just call the js function at very _end_ of the CF page (when everything is loaded) instead of using window load.

<script>
     // finally invoke loadScript()
     loadScript();
</script>

If it works you wouldn't even need the callback function stuff.  I think that's what the previous comment is suggestion ..

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 400 total points
ID: 34090536
Extend your loadDIV() function:

      function loadDiv(value) {
            // Change the contents of the CFDIV
            ColdFusion.navigate('testGet.cfm?method=getData&testVariable='+ value, 'testDiv');

            // now call the callBack after DIV is loaded:
             callbackHandler(myResult);

      }

0
 
LVL 52

Accepted Solution

by:
_agx_ earned 1600 total points
ID: 34092899
I'm not sure the page is guaranteed to be fully loaded at that point.  

>> window.onload = loadScript;

Just set up all javascript functions in TESTGET.CFM.  The same way you did before. But remove the window.onload line.  Then simply call loadScript() inside callbackHandler()

MAIN PAGE
<script>
    // ....
    function callbackHandler(result){
          loadScript();
    }
</script>


... OR don't use a callbackhandler at all.  Just call loadScript() at the very end of TESTGET.CFM

TESTGET.CFM
<cfset latitude = '30'>
<cfset longitude = '-40'>
<script>
       function loadScript() {
          //.... code ....
      }  
</script>
... rest of html code ...
<script>
     // finally invoke loadScript()
     loadScript();
</script>

0
 

Author Comment

by:stracqan
ID: 34097679
OK, so after trying a combination of things, here are my issues:

1. When I try to see what data is being passed back to the callbackfunction by throwing an alert, it says 'undefined'

function callbackHnadler(myResult){
alert(myResult);
}

-- and this is called from

<cfajaxproxy bind="javascript:loadDiv({testVariable@click})" onSuccess="callbackHandler">

-- and in my .CFM page I define two variables: 'lat' and 'long' by using a simple <cfset tag

Therefore, how can I get a result passed back??

2. When I try the loadscript function at the end of the .CFM page it works quite well, but Google Maps is still failing on the following line:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

I have the map_canvas div defined in the .CFM page and not the main page.

There must be something with the timing for Google Maps.... even when I try to call the function to load the maps on the main page with the Div on in the .CFM page it still throws an error... hmmm
0
 
LVL 52

Expert Comment

by:_agx_
ID: 34098976
It could be timing and maybe the google script itself too? It's using at least 1 "window." call which could be problematic since the cfdiv isn't really a window.  

So far I can't get it to work reliably.  The ajax stuff is tricky once you start working with external files. Truthfully you might want to try something else like a little jquery or
http://cfgooglemap.riaforge.org/.  See if it works any better.

Sorry I couldn't be of more help.
0
 

Author Closing Comment

by:stracqan
ID: 34099159
Thank you both!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

So I figured out a way to accomplish this task with a little trickery... I created a new div that houses the CFDIV and the map container.

I then load the map code inside the external .CFM page to initialize the map on the main page (thanks _agx_).

I then use CSS to float the map over the new div and over the CFDIV to make it look like the map is being populated inside of the CFDIV!

Thanks for your help!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 34101052
Great! If you get a chance, could you share the final code? I know it'll help someone else trying to do the same thing :)
0
 

Author Comment

by:stracqan
ID: 34107326
This may not be the best cross-browser way of donig this, but it does work in all of the most recent browsers.  

Thanks!
<!---style to position map 'over' CFDIV contents--->
<style type="text/css">
<!--
#OuterDiv #map_canvas {
	float: right;
	position: absolute;
	z-index: 1000;
	top: 50px;
	left: 480px;
}
#OuterDiv {
	position: relative;
}
-->
</style>




<!---divs--->
<div id="OuterDiv">
<cfdiv id="testDiv" >
<div id="map_canvas" style="width:200px; height:200px"></div> 
</div>


Call on Main page to get the CFDIV contents
--------------
<cfajaxproxy bind="javascript:loadDiv({SelectBusinessGrp@click},{Category.value})" onSuccess="callbackHandler">
                 
                  
<script>
function loadDiv(value,value2) {
// Change the contents of the CFDIV
ColdFusion.navigate('TestGet.cfm?method=getData&testVariable='+ value+'&testV2='+ value2, 'testDiv');
</script>



Code in the remote .CFM file to initiliaze the map that is located on the main page
--------------------------------------------
    <script type="text/javascript">   
	function initialize() {     
									var latlng = new google.maps.LatLng(40, -70);  
									
									var myOptions = {  						zoom: 15, 						center: latlng,       					mapTypeId: google.maps.MapTypeId.ROADMAP     
									};  
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}  
                                                                   </script> 

<script>
initialize();
</script>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question