Accessing a variable outside of a javascript function?

Question

riahc3 50 Â

11 Years Ago

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.

javascript

3 Contributors
42 Replies
3K Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by riahc3

All 42 Replies

Oxiegen 88 Basically an Occasional Poster

11 Years Ago

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);

Oxiegen 88 Basically an Occasional Poster

11 Years Ago

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.

Oxiegen 88 Basically an Occasional Poster

11 Years Ago

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);

Oxiegen 88 Basically an Occasional Poster

11 Years Ago

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.

Oxiegen 88 Basically an Occasional Poster

11 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

riahc3 50 Â Team Colleague · Answer 1 · 2012-06-13T18:00:54+00:00

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 50 Â Team Colleague · Answer 2 · 2012-06-14T06:54:05+00:00

riahc3 50 Â

11 Years Ago

Nope didnt work....

riahc3 50 Â Team Colleague · Answer 3 · 2012-06-14T08:34:00+00:00

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!

riahc3 50 Â Team Colleague · Answer 4 · 2012-06-14T21:15:47+00:00

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>

?????

riahc3 50 Â Team Colleague · Answer 5 · 2012-06-15T08:31:28+00:00

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.

riahc3 50 Â Team Colleague · Answer 6 · 2012-06-18T07:51:18+00:00

No because I dont know WHAT to debug :S

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.

riahc3 50 Â Team Colleague · Answer 7 · 2012-06-18T16:00:40+00:00

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 50 Â Team Colleague · Answer 8 · 2012-06-18T16:17:06+00:00

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 88 Basically an Occasional Poster Featured Poster · Answer 9 · 2012-06-18T16:50:55+00:00

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

riahc3 50 Â Team Colleague · Answer 10 · 2012-06-19T06:38:51+00:00

Understood :)

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

JJenZz 36 Newbie Poster · Answer 11 · 2012-06-19T15:23:13+00:00

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 50 Â Team Colleague · Answer 12 · 2012-06-20T14:04:05+00:00

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 50 Â Team Colleague · Answer 13 · 2012-06-20T14:34:50+00:00

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

riahc3 50 Â Team Colleague · Answer 14 · 2012-06-20T14:51:56+00:00

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

riahc3 50 Â Team Colleague · Answer 15 · 2012-06-20T14:52:13+00:00

(Sorry for quick posting like that; Just feel like Im close and this has been such a long process)

So close......

JJenZz 36 Newbie Poster · Answer 16 · 2012-06-21T08:24:19+00:00

I wasn't suggesting you copy and paste my code... it was just an example to show you what you are trying to do in it's simplest form. The only piece of code from my post that you should have copied is the _handleMessage() method. You also need to add this.val = value; to the callback function.

JJenZz 36 Newbie Poster · Answer 17 · 2012-06-21T08:30:20+00:00

I'll make this easier for you....

<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.call(this, 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;
    });

    alert("outside " + remoteStorage.val);

</script>

Copy and paste all of that and it should work :)

riahc3 50 Â Team Colleague · Answer 18 · 2012-06-21T08:37:17+00:00

I wasn't suggesting you copy and paste my code... it was just an example to show you what you are trying to do in it's simplest form. The only piece of code from my post that you should have copied is the _handleMessage() method. You also need to add this.val = value; to the callback function.

I added this:

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

to _handleMessage as you see.....

then......

var remoteStorage = new CrossDomainStorage("http://something.com", "/server.html");
                    remoteStorage.requestValue(stringdepuntos, function(key, value){


                    this.val = value;
                    remoteStorage.val=value;
    alert ("inside val val " + this.val);
    alert ("inside remotestorate val " + remoteStorage.val);

                    })

alert ("outside val " + remoteStorage.val);

and still absolutely nothing at all......

riahc3 50 Â Team Colleague · Answer 19 · 2012-06-21T08:40:10+00:00

The rest of my code is exactly the same.

I have no idea what that .call is (as it is not declared anywhere) but neither is "callback" so......Im just putting what you guys comment. Thank you very much for trying to help me out :) I really appreciate it but I hope you understand that this is really frustrating....

riahc3 50 Â Team Colleague · Answer 20 · 2012-06-21T09:24:21+00:00

I copied and pasted that code that you put (which I thank you very much for) and it says "outside undefined"

riahc3 50 Â Team Colleague · Answer 21 · 2012-06-21T09:26:46+00:00

It says "outside undefined" but when I assign it to a element in the page, it gets it correctly BUT this only works, once again, if I put a alert. Without the alert, it stays undefined and does not set it.

riahc3 50 Â Team Colleague · Answer 22 · 2012-06-21T09:51:56+00:00

Well....at least we can pretty much confirm something else is going on because if your code is suppose to work as is, then there is something else going on, more importantly, on that issue with why it works with a alert and why it doesnt work without it.

Its pretty much beyond my scope as I dont know where/what the issue could be. Should I post this also in the PHP/HTML/etc forums?

riahc3 50 Â Team Colleague · Answer 23 · 2012-06-21T10:43:52+00:00

Also (although I think this is pretty obvious)

hero<?php echo $_SESSION['countforfor']; ?> = remoteStorage.val;
                    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('outside ' + remoteStorage.val);

Shows undefined and does NOT work

alert('outside ' + remoteStorage.val);

hero<?php echo $_SESSION['countforfor']; ?> = remoteStorage.val;
                    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']; ?>;

Shows undefined and WORKS

riahc3 50 Â Team Colleague · Answer 24 · 2012-06-21T11:21:15+00:00

With this code it works twice: Afterwards it repeats the second value the entire time:

remoteStorage.requestValue(stringdepuntos, function(key, value){

    this.val = value;
    remoteStorage.val=value;
});








                setTimeout(function(){
                remoteStorage.requestValue(stringdepuntos, function(key, value){

                this.val = value;
                remoteStorage.val=value;
                });
                hero<?php echo $_SESSION['countforfor']; ?> = remoteStorage.val;
                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']; ?>;
                },3000);

Accessing a variable outside of a javascript function?

Recommended Answers Collapse Answers

All 42 Replies

Recommended Answers