We Keep Coding

javascript namespace call other function methods

I try to change some way to call methods into namespace.
Calling parent methods (I dont think its possible)
Creating and call inheritance function
Calling inside another method (mostly jquery onReady event function) (this.MyFunction() not working)
I split every namespace in files (want to keep it that way)
I try How to call function A from function B within the same namespace? but I didn't succed to split namespaces.
my fiddle sample got only 1 sub-namespace but could be more.
https://jsfiddle.net/forX/kv1w2rvc/
/**************************************************************************
// FILE Master.js
***************************************************************************/
if (!Master) var Master = {};
Master.Print= function(text){
console.log("master.Print :" + text);
$("body").append("<div>master.Print : " + text + "</div>");
}
/**************************************************************************
// FILE Master.Test1.js
***************************************************************************/
if (!Master) var Master = {};
if (!Master.Test1) Master.Test1 = {};
/**************************************************************************
* Descrition :
* Function for managing event load/documentReady
**************************************************************************/
Master.Test1.onReady = function () {
$(function () {
Master.Test1.Function1(); //try to replace because need all namespace.
try {
this.Function2(); //not working
}
catch(err) {
console.log("this.Function2 not working");
$("body").append("<div>this.Function2 not working</div>");
}
try {
this.Print("onReady"); //not working
}
catch(err) {
console.log("this.Print not working");
$("body").append("<div>this.Print not working</div>");
}
try {
Print("onReady"); //not working
}
catch(err) {
console.log("Print not working");
$("body").append("<div>Print not working</div>");
}
});
}
Master.Test1.Function1 = function () {
console.log("Function1");
$("body").append("<div>Function1</div>");
this.Function3(); //working because not inside another function
}
Master.Test1.Function2 = function () {
$("body").append("<div>Function2</div>");
console.log("Function2");
}
Master.Test1.Function3 = function () {
$("body").append("<div>Function3</div>");
console.log("Function3");
Master.Print("Function3"); //try to replace because need all namespace.
}
Master.Test1.onReady();
I use Master.Test1.Function1(); and I want to change that because Function1 is inside the same namespace.
I use Master.Print("Function3"); I dont think I can change that. the way I try to use it, it's more an inheritance function. but I dont know if theres a way to do that?
Maybe I should change the my namespace methode? maybe prototype will do what I want?

You can capture the this in a variable because this inside $(function() {}) will point to document object. The below will work provided you never change the calling context of onReady -- i.e. it is always called on the Test1 object and not called on other context:
Master.Test1.onReady = function () {
var self = this;
$(function () {
self.Function1();
// ..
});
}
To access Print you have to reference using the Master object like: Master.Print() as it won't be available in the Test1 object

this is document within .ready() or jQuery() alias for .ready() where function(){} is parameter $(function() {}). this at this.Function2() will reference document.

"Objects" in javascript are not built the same way as in most object-oriented languages. Essentially, what you are building is a hierarchy of static methods that have no real internal state in-and-of themselves. Therefore, when one of the defined methods is invoked, the context (or state) of that method depends on what object invoked the method.
If you want to have any internal context, you will need to create an "instance" of an "object prototype". At that point, you can use "this.otherFunction" within your other functions. Here is a small example:
var MyObject = function() {};
MyObject.functionOne = function() {
console.log("Function 1");
this.functionTwo();
};
MyObject.functionTwo = function() {
console.log("Function 2");
};
var instanceOne = new MyObject();
instanceOne.functionOne();
You might get some more information about object definition here

Javascript : can we reuse inner function to acces both global and local

var teamName ="studio";
var otherTeamName ={
teamName :'factory',
getTeamName : function(){
alert(this.teamName);
}
};
window.otherTeamName.getTeamName();// alerts factory
Is there any way to get the studio? by using the same getTeamName function.(i.e i know, removing this will fetch studio.) without removing the this?

Yes, it is possible. There are two ways:
use call: otherTeamName.getTeamName.call(window)
copy reference:
var getTeamName = otherTeamName.getTeamName;
getTeamName(); // alerts studio
call() is not supported by older browsers, the second solution works everywhere.
var teamName = "studio";
var otherTeamName = {
teamName: 'factory',
getTeamName: function() {
alert(this.teamName);
}
};
otherTeamName.getTeamName(); // alerts factory
var getTeamName = otherTeamName.getTeamName;
getTeamName(); // alerts studio

Yes, you can still use the same getTeamName method by changing context function is executed in:
var teamName = "studio";
var otherTeamName = {
teamName: 'factory',
getTeamName: function() {
alert(this.teamName);
}
};
otherTeamName.getTeamName.call(window);
By using Function.prototype.call you make this point to window instead of
otherTeamName object.
UPD. However, this will only work if teamName is global variable. If not, check Quentin's answer.

You can simply use
otherTeamName.getTeamName.call(this)
this here refers to the window

Short answer: No. It isn't a property of the object, so you can't access it as if it was.
Longer answer: You could replace the teamName property with a getter function that returned the value of the variable … but that would be an unintuitive approach to whatever the problem is.

// The good:
otherTeamName.getTeamName.call(this);
otherTeamName.getTeamName.apply(this);
// The okayish:
var f = otherTeamName.getTeamName; f();
otherTeamName.getTeamName.bind(this)();
// The bad:
((f) => f)(otherTeamName.getTeamName)();
(function(f) {f()})(otherTeamName.getTeamName)
// The ugly:
eval(otherTeamName.getTeamName)();
eval("(" + otherTeamName.getTeamName + ")()");
new Function("(" + otherTeamName.getTeamName + ")()")();

ajax request with user input trouble with variable definition

I've built a simple html input so that users can input a zip code and then I have a variable in javascript set to that input. I can console.log this to prove the variable is set and that it is a string. I then try to run an ajax call and sub in the zip but it doesn't work. I can console.log the variable at any stage and see the variable has been updated, but somehow it's a hoisting issue or something where the ajax call value 'userInputZip' always reads to what I initially set. The ajax call works when 'userInputZip' is initially set to a valid zipoAny help is appreciated.
$(document).ready(function(){
});//end of document.ready
var inputDate = '2015-12-04T20:00:00';
var inputZipCode = '60618';
var userInputZip;
function runAjax(){
console.log(userInputZip);
$.ajax(getJambaseData);
}
// var dataArr = [];
var getJambaseData = {
type: 'get',
url:
'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[inserted my key here]',
// 'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[inserted my key here]',
success: function (data){
for (i=0; i< 10; i++){
if(data.Events[i].Date == inputDate){
var shortDate = data.Events[i].Date.substring(0,10);
var shortTime = data.Events[i].Date.substring(11,19);
// dataArr.push(data.Events[i].Date, data.Events[i].Artists[0].Name);
$("#divID").append('</p>' + 'date::: '+ shortDate + ' time:::' + shortTime + ' show::: ' + data.Events[i].Artists[0].Name + ' time::: ' + data.Events[i].Date + ' address::: ' + data.Events[i].Venue.Address + ' city::: ' + data.Events[i].Venue.City + '</p>');
}
}
},
error: function(){
console.log('failed');
},
}
function findShows(){
var userZip = document.getElementById("userInput");
userInputZip = userZip.value;
document.getElementById("divID").innerHTML = userInputZip;
runAjax();
}
////////////////////

You've mentioned
but somehow it's a hoisting issue or something where the ajax call value 'userInputZip' always reads to what I initially set
You define getJambaseData as a variable when the script is initially executed. You set the url value to url:
'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[inserted my key here]'. What else did you expect to happen?
That's like saying var x = 10; and expecting it to magically change when you call a function.
What you have to do is move the whole var getJambaseData = {...} initialization into runAjax function and it should fix it. Or you could skip the variable initialization part and just pass the part inside {...} (including the curly braces obviously) inside the $.ajax call instead of variable. If you look at jQuery docs you'll see that in most examples and it's the usual syntax.
Not related to your question, but here are some friendly words of advice:
Don't use variable before you define it (reading top to bottom), it will save you a lot of headaches.
Another recommendation is don't use so much global variables, you could get the userInputZip inside findShows function and pass it to runAjax as function argument. If you'll develop applications in a way where you rely on global state a lot, you'll have a bad time very soon.

Dynamic access to the object name

I am trying to select certain property of dynamic object
var minus = {
doAction: function(){
console.log("this is minus");
}
}
var plus = {
doAction: function(){
console.log("this is plus");
}
}
var panelEvents = {
button: function(){
$(document).on("click", ".plus, .minus", function(){
var buttonClass = $(this).attr('class');
window[buttonClass][doAction](); //get an error
});
}
}
panelEvents.button();
Questions
1. How can I dynamically call various objects with the same methods?
2. Is it bad practice in point of OOP view to access methods in such way?
UPDATE
I understood, that it is not flexible approach. So now I have only theoretical interest of accessing dynamic object. Neither
window[buttonClass]['doAction']();
nor
window[buttonClass].doAction();
working.
Firebug:
TypeError: window[buttonClass] is undefined
window[buttonClass]'doAction';
Should I obviously attach minus and plus objects to window?
SOLUTION
The problem was that my code was inside jQuery object
$(document).ready(function(){
//my code
)};

With the line that fails, you are trying to call a function that is named the same as the content of the variable doAction. The problem here is that doAction is not defined.
You would have to write:
window[buttonClass]['doAction']();
or
window[buttonClass].doAction();

Can't seem to add js variable to parent.href.location

Dear stackoverflowers,
I would lik to add an variable to the following js line:
setTimeout("parent.location.href = 'http://www.url.com/lists.php?listid=';",2000);
How do I do this? I can't seem to get the ' right.
setTimeout("parent.location.href = 'http://www.url.com/lists.php?listid=' + variable;",2000);

It is always better to pass a function handler to setTimeout(). Moreover, it will easily solve your problem with placing the quotes:
setTimeout(function() {
parent.location.href = "http://www.url.com/lists.php?listid=" + variable;
}, 2000);

Use function to redirect as follow....
function Redirect(val)
{
parent.location.href = 'http://www.url.com/lists.php?listid='+val;
}
setTimeout(" Redirect('"+variable+"')",2000);