Callback - ReferenceError: Variable is not defined - javascript

I am trying to get some parameters form the URL and pass them on to another function.
The function for getting the parameters is like that:
function getUrlVars(callback) {
var urlVars = {};
var urlparts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
urlVars[key] = value;
});
callback(urlVars);
}
It gets the parameters just fine. The function that urlVars should be passed to, looks like this:
document.addEventListener('done', function() {
var projSelect = document.getElementById('projectSelection');
projSelect.value = urlVars[0];
});
});
};
I am calling both functions like so:
window.onload=function(){
getUrlVars(selectBox(urlVars));}
So all I am trying to do, is set the value of a selectbox according to a parameter in the URL. But I get an error, telling me that "urlVars" ist not defined.
And quite frankly, I am at my wits end. Can anybody tell me what I did wrong?

The problem you are having, is that when you are defining the method for window.onload you are passing a parameter that is not defined anywhere in your script.
Furthermore, it seems like you want to pass a callback method to urlVars, but you are passing a parameter? It is hard to tell by the code that you have provided.
Why not get the parameters you want from your select box and then send them to the desired method?

Related

Create variable from data element on page

We have a script run early on our page that feeds values to a third party.
foo.bar.myPage({
"myId": "12345",
"myName": "My name is Joe",
});
I want to create a new variable using one of those values and use it for something else. I can't figure out how to grab the value from above. I do not have access to the code above - need to do this using javascript or jquery via a CMS. Help?
var valueFromMyId = $(myId);
alert (valueFromMyId);
Obviously I want "12345" to fire in my alert.
I Tried something like this:
foo = {
"bar":{
"myPage":function(param){
console.log("inside"+param);
}
}};
foo.bar.myPage(123); //print inside 123
Now Try this to override, if you can access foo.bar.
var backup = foo.bar.myPage
foo.bar.myPage = function(param){
console.log("Using params outside the actual function "+ param);
//calling the actual function which was getting called initially
backup(param);
}
now every foo.bar.myPage call will go through your define method, that way you can access param before the actual function gets it.
This might not be the best way to do it. But will work if you have access to foo.bar object. Test and let me know if this helps.

Accessing var function within function in another file

I have 2 JS files - one with the functions I would like to access and the other that I'd like to call the function with.
(function($) {
var Place = function() {
var Location = function(id, duration, check) {
//Should access this function
}
}
})(jQuery);
I'm trying to access it with:
Place.Location(markerId, 600);
But all I'm getting is that it's not defined. Simple issue but can't quite figure this one out.
As it's a jQuery plugin, maybe there's a way I can access it via another method?
$.fn.place = function(params) {
var len = this.length;
return this.each(function(index) {
var me = $(this),
key = 'place' + (len > 1 ? '-' + ++index : ''),
instance = (new Place).init(me, params);
});
};
The way you are defining Location, it is a private variable inside the function Place. If you want to access it as an attribute of Place, you should replace var Location = ... with this.Location = ...
It's going out of scope. Because you wrapped your Place object in function($) {}, now anything outside that wrapper will no longer have access to variables inside the wrapper. If $ stands for jQuery, it should be a global anyways and you can take the wrapper out.
The solution is a combination of the other two answers.
You define Place as a variable in the (anonymous) function. It can't be used outside the scope of that function. (This function doesn't use jQuery, either, so the wrapper is unnecessary).
Place is a function. It executes code that sets local variable Location to a function, but doesn't export that function, so Location() is inaccessible outside the Place function.
You probably mean to make Place an object (instead of a function), and give it a Location method. Here's one way to write it:
var Place = {
Location: function(id, duration, check) {
// do something with id, duration, & check
}
};
// execute
Place.Location(someId, someDuration, someCheck);
(It doesn't look like you've posted all your code, like the Place.init() method, but there are plenty of ways to write this so that it works correctly; this should solve your immediate problem.)

Function parameter not getting the value directly

Can someone please explain why the function not getting the value of the object in the first way?
I got the Backbone.View:
var some.view = Backbone.View.extend({
elements = {},
//...
//some init, filling up elements...
//...
stopTask: function() {
// Calling the function with parameters explained later
stopThisTask(...);
}
});
And the function:
function stopThisTask(task){
console.log(task);
}
When I call stopThisTask in the following way, the task parameter is undefined
stopThisTask(this.elements);
However, when I do it like this, the task has the value
var tmp = this.elements;
stopThisTask(tmp);
Can someone please explain why is that?
If I know right the variables are passed by value, and the obects are passed by references. However, does that mean in some way I loose the reference for the elements object?
I'm suspecting that the this.elements gets resolved inside the stopThisTask function, so this will point to stopThisTask instead of to the caller of stopThisTask.
By explicitly setting the tmp parameter in the caller, you guarantee the correct this scope is used.
Should be equivalent to
stopThisTask.call(this, this.elements);

Javascript: Possible to pass function commands to another function via a variable?

Ok hopefully this come across correctly. I am building a universal javascript function that will build a menu and then also build the functions that each menu item would call. To do this, I need to pass a list of the commands to be called for each option.
So for example:
var thecall = 'alert("hi, this works");';
function myfunction(thecall)
{
//In here I want to excute whatever commands is listed in variable thecall
.....
}
I'm sure doing it this way is completely stupid, but I don't know how else to do this.
Basically, I need my function to perform other functions on a variable basis.
Thanks!!
I made it a bit fancier to show you how you can use it.
var thecall = function(name){alert("hi " + name + ", this works");};
function myFunction(function_ref)
{
function_ref('Mark');
}
myFunction(thecall);
You can execute arbitrary strings of JavaScript using eval(), but that is not the best solution for you here (it's almost never the best solution).
Functions in JavaScript are themselves objects which means you can store multiple references to the same function in multiple variables, or pass function references as parameters, etc. So:
var thecall = function() {
alert("hi, this works");
};
function myfunction(someFunc) {
someFunc(); // call the function that was passed
}
myfunction(thecall); // pass reference to thecall
Note that when passing the reference to the thecall function there are no parentheses, i.e., you say thecall not thecall(): if you said myfunction(thecall()) that would immediately call thecall and pass whatever it returned to myfunction. Without the parentheses it passes a reference to thecall that can then be executed from within myfunction.
In your case where you are talking about a list of menu items where each item should call a particular function you can do something like this:
var menuItems = [];
function addMenuItem(menuText, menuFunction) {
menuItems.push({ "menuText" : menuText, "menuFunction" : menuFunction });
}
function test1() {
// do something
}
addMenuItem("Test 1", test1);
addMenuItem("Test 2", function() { alert("Menu 2"); });
// and to actually call the function associated with a menu item:
menuItems[1].menuFunction();
Notice the second menu item I'm adding has an anonymous function defined right at the point where it is passed as a parameter to addMenuItem().
(Obviously this is an oversimplified example, but I hope you can see how it would work for your real requirement.)
I think your looking for the eval function.
var code= 'alert("hi, this works");';
eval(code);

How do I access data in this javascript MAP object?

I'm making an AJAX call which returns XML data, and this is my 'success:' function (callback):
success: function (data) {
var $rowArray = $(data).find("[nodeName=z:row]");
$rowArray.each(function(index) { // for each date put it into calMap.
calMap[$(this)[index].title] = $(this).attr("ows_Title");
calMap[$(this)[index].date] = $(this).attr("ows_EventDate");
});
}
calMap is a global javascript object declared outside of the function.
var calMap = {};
What I want to do is create a function where I can pass in a title, have it search calMap for that title, and if found, the specific object is returned and I'll be able to access the date property for that object.
Problem is, I can't seem to access the data I insert into the calMap object. For starters, I just want to print the map. Tried eval'ing it, tried alerting calMap[0], tried alerting calMap[0].title, but nothing. Can someone help me with this? Thanks!
Update:
I want to do something like this:
var data = getData("myTitle");
function getData(title) {
// if title is in calMap, something like this?
var result = (calMap[title]));
return result; // returns an object or NOTHING
}
then i'll check if date is defined or not, and if it is, i'll access its properties (ie. data.date. That make sense?
ANSWER:
I ended up using an array. STILL think I should be able to use the object MAP, but needed to get my project done.
Here's the final code for the code that accesses the array items:
function hasCalDate(code)
{
var matched = "";
for (var f=0;f<calMap.length;f++){
var re = new RegExp(code);
if (re.test(calMap[f].title))
{
matched = calMap[f].title+','+calMap[f].date;
}
}
return matched;
};
Thanks everyone.
You need to initialize calMap as an array (i.e. square brackets, not curly ones):
var calMap = [];
Then, inside your each function, I'm guessing you want something more like
calMap.push({
title: $(this).attr("ows_Title"),
date: $(this).attr("ows_EventDate")
});
Your problem is that the success function is only run when your AJAX request completes. If you want to access calMap safely, you need to do so inside your callback.

Categories

Resources