Accessing a variable outside of a javascript function?

[Koldo Urrutia]

Hello

I have the following and I want to access the variable outside of that function.

The code is:

<script type="text/javascript">

                /*
 * Copyright 2010 Nicholas C. Zakas. All rights reserved.
 * BSD Licensed.
 */
function CrossDomainStorage(origin, path){
    this.origin = origin;
    this.path = path;
    this._iframe = null;
    this._iframeReady = false;
    this._queue = [];
    this._requests = {};
    this._id = 0;
}

CrossDomainStorage.prototype = {

    //restore constructor
    constructor: CrossDomainStorage,

    //public interface methods

    init: function(){

        var that = this;

        if (!this._iframe){
            if (window.postMessage && window.JSON && window.localStorage){
                this._iframe = document.createElement("iframe");
                this._iframe.style.cssText = "position:absolute;width:1px;height:1px;left:-9999px;";
                document.body.appendChild(this._iframe);

                if (window.addEventListener){
                    this._iframe.addEventListener("load", function(){ that._iframeLoaded(); }, false);
                    window.addEventListener("message", function(event){ that._handleMessage(event); }, false);
                } else if (this._iframe.attachEvent){
                    this._iframe.attachEvent("onload", function(){ that._iframeLoaded(); }, false);
                    window.attachEvent("onmessage", function(event){ that._handleMessage(event); });
                }
            } else {
                throw new Error("Unsupported browser.");
            }
        }

        this._iframe.src = this.origin + this.path;

    },

    requestValue: function(key, callback){
        var request = {
                key: key,
                id: ++this._id
            },
            data = {
                request: request,
                callback: callback
            };

        if (this._iframeReady){
            this._sendRequest(data);
        } else {
            this._queue.push(data);
        }   

        if (!this._iframe){
            this.init();
        }
    },

    //private methods

    _sendRequest: function(data){
        this._requests[data.request.id] = data;
        this._iframe.contentWindow.postMessage(JSON.stringify(data.request), this.origin);
    },

    _iframeLoaded: function(){
        this._iframeReady = true;

        if (this._queue.length){
            for (var i=0, len=this._queue.length; i < len; i++){
                this._sendRequest(this._queue[i]);
            }
            this._queue = [];
        }
    },

    _handleMessage: function(event){
        if (event.origin == this.origin){
            var data = JSON.parse(event.data);
            this._requests[data.id].callback(data.key, data.value);
            delete this._requests[data.id];
        }
    }

};


var remoteStorage = new CrossDomainStorage("http://somewhere.com", "/server.html");
                    remoteStorage.requestValue("something", function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");

                    });

                    alert ("I want to access value here! " + value);
    </script>

Ive tried two solutions, neither of them work:

var somevar="";
var remoteStorage = new CrossDomainStorage("http://somewhere.com", "/server.html");
                    remoteStorage.requestValue("something", function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");
                    somevar=value;
                    });
                    alert ("show somevar: " + somevar);
                    alert ("I want to access value here! " + value);

var somevar="";
var remoteStorage = new CrossDomainStorage("http://somewhere.com", "/server.html");
                    somevar=remoteStorage.requestValue("something", function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");
                    return value;
                    });
                    alert ("show somevar: " + somevar);
                    alert ("I want to access value here! " + value);

Thanks!

[Eric Pascarello]

Appears to be asynchronous callback so it is not possible to read it inline, JavaScript does not have wait.

Eric

[Koldo Urrutia]

Eric Pascarello wrote:Appears to be asynchronous callback so it is not possible to read it inline, JavaScript does not have wait.

Eric

Well there has to be some way to get it, right? What method can I use to get the value?


Thank you!

[Eric Pascarello]

You need to break up your code into two parts, request to get the variable and than when the callback is returned fire off the next step.

Eric

[Koldo Urrutia]

Eric Pascarello wrote:You need to break up your code into two parts, request to get the variable and than when the callback is returned fire off the next step.

Eric

I have no idea where to even start or what to look for.

Do you mind helping me out please?

[Eric Pascarello]

Basic example of what you expect to happen

function one() { var a = 1; return a; } alert( one() );

What is actually happening:
function one() { var a; window.setTimeout( function() { a = 1; }, 2000); return a; //This line does not wait for the asynchronous call [setTimeout/ajax call] to run. It just goes! } alert( one() );

What you need to do is break it up into two parts.

function one( callback ) { window.setTimeout( function(){ //acting like this is an Ajax call var a = 1; callback(a); },2000); } function two( response ) { alert(response); } one( two );

[Koldo Urrutia]

Eric Pascarello wrote:Basic example of what you expect to happen

function one() { var a = 1; return a; } alert( one() );

What is actually happening:
function one() { var a; window.setTimeout( function() { a = 1; }, 2000); return a; //This line does not wait for the asynchronous call [setTimeout/ajax call] to run. It just goes! } alert( one() );

What you need to do is break it up into two parts.

function one( callback ) { window.setTimeout( function(){ //acting like this is an Ajax call var a = 1; callback(a); },2000); } function two( response ) { alert(response); } one( two );

Thank you for putting a example at least

My main "issue" is what is "callback(a)"??? That isnt declared anywhere. Thats where I think Im getting lost.

That said, you are telling me to do something like this:

<script type="text/javascript">

                /*
 * Copyright 2010 Nicholas C. Zakas. All rights reserved.
 * BSD Licensed.
 */

function one()
{
function CrossDomainStorage(origin, path){
    this.origin = origin;
    this.path = path;
    this._iframe = null;
    this._iframeReady = false;
    this._queue = [];
    this._requests = {};
    this._id = 0;
}

CrossDomainStorage.prototype = {

    //restore constructor
    constructor: CrossDomainStorage,

    //public interface methods

    init: function(){

        var that = this;

        if (!this._iframe){
            if (window.postMessage && window.JSON && window.localStorage){
                this._iframe = document.createElement("iframe");
                this._iframe.style.cssText = "position:absolute;width:1px;height:1px;left:-9999px;";
                document.body.appendChild(this._iframe);

                if (window.addEventListener){
                    this._iframe.addEventListener("load", function(){ that._iframeLoaded(); }, false);
                    window.addEventListener("message", function(event){ that._handleMessage(event); }, false);
                } else if (this._iframe.attachEvent){
                    this._iframe.attachEvent("onload", function(){ that._iframeLoaded(); }, false);
                    window.attachEvent("onmessage", function(event){ that._handleMessage(event); });
                }
            } else {
                throw new Error("Unsupported browser.");
            }
        }

        this._iframe.src = this.origin + this.path;

    },

    requestValue: function(key, callback){
        var request = {
                key: key,
                id: ++this._id
            },
            data = {
                request: request,
                callback: callback
            };

        if (this._iframeReady){
            this._sendRequest(data);
        } else {
            this._queue.push(data);
        }   

        if (!this._iframe){
            this.init();
        }
    },

    //private methods

    _sendRequest: function(data){
        this._requests[data.request.id] = data;
        this._iframe.contentWindow.postMessage(JSON.stringify(data.request), this.origin);
    },

    _iframeLoaded: function(){
        this._iframeReady = true;

        if (this._queue.length){
            for (var i=0, len=this._queue.length; i < len; i++){
                this._sendRequest(this._queue[i]);
            }
            this._queue = [];
        }
    },

    _handleMessage: function(event){
        if (event.origin == this.origin){
            var data = JSON.parse(event.data);
            this._requests[data.id].callback(data.key, data.value);
            delete this._requests[data.id];
        }
    }

};

}


function two()
{
var remoteStorage = new CrossDomainStorage("http://somewhere.com", "/server.html");
                    remoteStorage.requestValue("something", function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");

                    });

                    alert ("I want to access value here! " + value);

}

one(two);



    </script>

Would that code work???

[Koldo Urrutia]

Koldo Urrutia wrote:
Thank you for putting a example at least

My main "issue" is what is "callback(a)"??? That isnt declared anywhere. Thats where I think Im getting lost.

That said, you are telling me to do something like this:

<script type="text/javascript">

                /*
 * Copyright 2010 Nicholas C. Zakas. All rights reserved.
 * BSD Licensed.
 */

function one()
{
function CrossDomainStorage(origin, path){
    this.origin = origin;
    this.path = path;
    this._iframe = null;
    this._iframeReady = false;
    this._queue = [];
    this._requests = {};
    this._id = 0;
}

CrossDomainStorage.prototype = {

    //restore constructor
    constructor: CrossDomainStorage,

    //public interface methods

    init: function(){

        var that = this;

        if (!this._iframe){
            if (window.postMessage && window.JSON && window.localStorage){
                this._iframe = document.createElement("iframe");
                this._iframe.style.cssText = "position:absolute;width:1px;height:1px;left:-9999px;";
                document.body.appendChild(this._iframe);

                if (window.addEventListener){
                    this._iframe.addEventListener("load", function(){ that._iframeLoaded(); }, false);
                    window.addEventListener("message", function(event){ that._handleMessage(event); }, false);
                } else if (this._iframe.attachEvent){
                    this._iframe.attachEvent("onload", function(){ that._iframeLoaded(); }, false);
                    window.attachEvent("onmessage", function(event){ that._handleMessage(event); });
                }
            } else {
                throw new Error("Unsupported browser.");
            }
        }

        this._iframe.src = this.origin + this.path;

    },

    requestValue: function(key, callback){
        var request = {
                key: key,
                id: ++this._id
            },
            data = {
                request: request,
                callback: callback
            };

        if (this._iframeReady){
            this._sendRequest(data);
        } else {
            this._queue.push(data);
        }   

        if (!this._iframe){
            this.init();
        }
    },

    //private methods

    _sendRequest: function(data){
        this._requests[data.request.id] = data;
        this._iframe.contentWindow.postMessage(JSON.stringify(data.request), this.origin);
    },

    _iframeLoaded: function(){
        this._iframeReady = true;

        if (this._queue.length){
            for (var i=0, len=this._queue.length; i < len; i++){
                this._sendRequest(this._queue[i]);
            }
            this._queue = [];
        }
    },

    _handleMessage: function(event){
        if (event.origin == this.origin){
            var data = JSON.parse(event.data);
            this._requests[data.id].callback(data.key, data.value);
            delete this._requests[data.id];
        }
    }

};

}


function two()
{
var remoteStorage = new CrossDomainStorage("http://somewhere.com", "/server.html");
                    remoteStorage.requestValue("something", function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");

                    });

                    alert ("I want to access value here! " + value);

}

one(two);



    </script>

Would that code work???

Did not work....

[Koldo Urrutia]

Ive tried already a few different ways but to no avail. I need some help

[Koldo Urrutia]

I currently have this:

remoteStorage.requestValue("something", function(key, value){
					
				
		
					valor=value;
					remoteStorage.v=value;
					
			
					
						hero<?php echo $_SESSION['countforfor']; ?> =  value;
						document.getElementById("fotop<?php echo $_SESSION['countforfor']; ?>").src=hero<?php echo $_SESSION['countforfor']; ?>;
						document.getElementById("fotog<?php echo $_SESSION['countforfor']; ?>").src=hero<?php echo $_SESSION['countforfor']; ?>;
						alert("value " + value);
					
					
					});

Which works if I put the alert. If I dont put it, its always the same value.