Accessing a variable outside of a javascript function?

[riahc3]

Hey

This is a stupid and very noob question but lets say I have something like:

<script type="text/javascript">

/*javascript up here*/
var variable = new object("bla", "morebla");    
variable.dosomething("evenmorebla", function(key, value)
{         
alert("key is '" + key + "' and value is '" + value + "'"); 
});

alert ("alert 2 : print and use value on the outside such as here" + value);

/*javascript down here*/

</script>

How can I use/access value in that place where it says alert 2? Thank you very much.

[Oxiegen]

I'm no javascript expert, but I don't think you can.
The variable value is an argument to the function, and can't be accessed from anywhere else.
But you can probably return value to an outside variable and use that in your alert.

var outsidevariable = variable.dosomething("evenmorebla", function(key, value)
{
   alert("key is '" + key ' "' and value is '" + value + "'");
   return value;
});

alert ("alert 2 : print and use value on the outside such as here: " + outsidevariable);

[riahc3]

I thought that could not be done; didn't even go thru my head..

Javascript is so strange when it comes to its syntaxis.....

Will try tommorow....thank you!

[riahc3]

Nope didnt work....

[riahc3]

The entire 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(stringdepuntos, function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");

                    });

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

Thanks!

[Oxiegen]

Oh, I see.
Then add your own variable among those already declared in the constructor.
And in the function you simply assign value to this.<yourvariable>.
And in extension read this.<yourvariable> in the alert.

[riahc3]

Something like:

<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;
    this.val="";
}

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(stringdepuntos, function(key, value){
                    alert("The value for '" + key + "' is '" + value + "'");
                    this.val=value;
                    });

              //option 1
            alert ("I want to access value here! " + this.val);

            //option 2
            alert ("I want to access value here! " + val);

            //option 3
            alert ("I want to access value here! " + remoteStorage.val);

    </script>

?????

[Oxiegen]

Exactly.
Option 3.

Although. On further inspection you can see that the information you're looking for can be found in the request object. (this.request).
So, if you want that value you can read that object and get the last item by using the length property.

If I'm not completely off the track, this should work.

alert("I want to access value here! " + this.request[this.request.length - 1].callback);

[riahc3]

Nope.....did not work. I hope you can help me out furhter as this is killing me please :)

I tried that but doesnt work.

alert("hi");
alert("I want to access value here! " + this.request[this.request.length - 1].callback);
alert("bye");

Doesnt reach bye.

[Oxiegen]

Have you tried debugging that line?
I know Chrome has sort of a built-in debugger. And Firefox has an addon called Firebug you can use.

[riahc3]

No because I dont know WHAT to debug :S

I currently have this:

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.

[Oxiegen]

Using alert("I want to access value here! " + this.request[this.request.length - 1].callback); where you would like to use it, debug the code using any of the two methods I told you about and put a breakpoint on that line and create a Watch on the code that contains the value.

If the above code (this.request[yadda yadda) doesn't work, then try one of the other methods we've explored in this thread.

[riahc3]

I apoligize if this sounds stupid but how do you add a breakpoint/watch in Chrome/Firebug? Im used to IDEs like VS and MyEclipse so I cant see any similar options.

Thanks for the help.

[riahc3]

Searching for that debug option, I noticed in the console this:

this._requests[data.id] is undefined
this._requests[data.id].callback(data.key, data.value);

Is this normal?

NOW, if I put a alert, that error does not ocurr.......

[Oxiegen]

Sometimes that's normal.
Variables and objects can be undefined until they are assigned something.

[riahc3]

Understood :)

How do I add those breakpoints/watches? I feel dumb but I cant find a option :S

[JJenZz]

A very stripped down version of what you're trying to do:

function CrossDomainStorage() {}

CrossDomainStorage.prototype = {

    foo: function(callback) {
        callback.call(this, 1, 'bar');
    }

}

var remoteStorage = new CrossDomainStorage;

remoteStorage.foo(function(key, value) {
    alert('inside ' + value);
    this.val = value;    
});

alert('outside ' + remoteStorage.val);

The key here is to use the .call() method on the callback so you can tell it what 'this' should be. That way when you reference 'this' in the anonymous function/callback, it refers to the remoteStorage instance.

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

[riahc3]

Do I just copy your code or are you putting a example? I ask because I have copied and pasted so many examples (and commented them out again)

[riahc3]

OK, it prints out "bar" on the outside because I pass bar in the foo function but obviously thats not what I want

[riahc3]

It does what I want; Now I just need it to requestValue (run that and get the value) instead of "bar"