File: test.html

Recommend this page to a friend!
  Classes of Hensel Hartmann  >  CDA Cross Domain AJAX  >  test.html  >  Download  
File: test.html
Role: Example script
Content type: text/plain
Description: usage demo
Class: CDA Cross Domain AJAX
Dynamically load remote JavaScript code
Author: By
Last change: somewhat important syntax correction - thanks adrien gibrat for the hint..
Date: 10 years ago
Size: 4,173 bytes
 

Contents

Class file image Download
<!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>