<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Hensel Hartmann - Simpeligent.ch" />
<title>CDA - Cross-Domain-Ajax made easy</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.cda.js"></script>
<style>
a { color:blue;}
#demo_canvas {border: 2px solid black;padding: 8px;width:600px;margin: 20px;}
#start_button { cursor:pointer;}
</style>
</head>
<body>
Open console to get some debug info..<br />
debug is by default off, here it is on - you can activate it in options for each instance
<br /><br />
This little demo loads some text into this box and throws an alert-box.<br />
All this is coming from a different domain and is triggered as soon as the remote script is loaded fully.<br />
<div id="demo_canvas" style=""><span id="start_button"><strong>Click here to load some remote data and functions</strong></span></div>
<script>
jQuery(document).ready(function()
{
$('#start_button').bind('click',load_remote_data);
});
var demo_server1_url = 'http://music-network.ch/jquery.cda.demo/cross_domain_ajax_test.php?foo=bar&urid=';
var demo_server2_url = 'http://tokenarea.com/jquery.cda.demo/cross_domain_ajax_test.php?urid=';
// holds the options after the execution
var cda_obj;
// unique ID for the request
var urid =new Date().getTime();
// special var, that will confirm the presence of the remote data if your local script is waiting.
// use the waiting callback (waiter_cb) to play the intermediary between cda and your code.
var confirm_cda_is_loaded = [];
// in this demo, the CDA call is encapsulated in this function..
function load_remote_data()
{
// we want to confirm the load
confirm_cda_is_loaded[urid]=0;
// call the demo from a different domain
cda_obj = $.cda({
'url':demo_server1_url+urid,
'urid':urid, // optional, used for active calls
'waiter_callback':waiter_cb, // optional, used for active calls
'real_callback':real_cb_test1, // optional, used for active calls
'debug':1 // optional
});
}
// generic waiting callback function for all active-mode calls
// will wait for the loading of the remote data and then
// run the real callback functions as specified in options
function waiter_cb(e)
{
// here we wait for the load to be confirmed
if (!confirm_cda_is_loaded[urid]) {setTimeout(waiter_cb, 50);return;}
// here we run the real callback function - the one that runs your application
cda_obj.real_callback.call(this,cda_obj);
}
// real call back function for test 1
// do here what ever you need to do..
function real_cb_test1()
{
// work with the data from call 1
alert('callback function says: '+cda_remote_data);
// let's use a new urid for the second demo call, shall we
// you know, should be unique though
urid =new Date().getTime()+'2';
// we also want independently confirm the load
confirm_cda_is_loaded[urid]=0;
// call second demo from a different domain
cda_obj = $.cda({
'url':demo_server2_url+urid,
'urid':urid, // optional, used for active calls
'waiter_callback':waiter_cb, // optional, used for active calls
'real_callback':real_cb_test2, // optional, used for active calls
'debug':1 // optional
});
}
// real call back function for test 2
// do here what ever you need to do..
function real_cb_test2()
{
// work with the data from call 2
alert('2nd callback function says: '+cda_remote_data_2);
}
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
