I'm trying to make a simple in in-page popup called like this:
var test = new popObject({}); //JSON options
and I'm having trouble because when I create two in a row, and call show() on the first one, the second one always shows. Both are created, but they aren't separate somehow, despite being called with new. What am I doing wrong here? I've included my code, but I have removed out the irrelevant functions for compactness.
function popObject(options) {
//functions
show = function() {
console.log(boxselector);
jQuery(boxselector).css("display", "block");
return jQuery(boxselector);
}
var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}
//public functions
this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;
//constants
name = options.name; //name should never be changed.
boxselector = ".boxcontainer[name=" + options.name + "]";
boxbodyselector = ".boxbody[name=" + options.name + "]";
boxtitleselector = ".boxcontainer[name=" + options.name + "]"
boxboxselector = ".boxbox[name=" + options.name + "]"
title = options.title;
content = options.content;
width = options.width;
height = options.height;
this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;
//variables
popupHtml = ...
//init code
jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}
This is because you're declaring a lot of variables in the global scope. Try the following code instead:
function popObject(options) {
//functions
this.show = function() {
console.log(boxselector);
jQuery(boxselector).css("display", "block");
return jQuery(boxselector);
}
var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}
//public functions
this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;
//constants
var name = options.name; //name should never be changed.
var boxselector = ".boxcontainer[name=" + options.name + "]";
var boxbodyselector = ".boxbody[name=" + options.name + "]";
var boxtitleselector = ".boxcontainer[name=" + options.name + "]"
var boxboxselector = ".boxbox[name=" + options.name + "]"
var title = options.title;
var content = options.content;
var width = options.width;
var height = options.height;
this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;
//variables
var popupHtml = ...
//init code
jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}
Note all the vars that weren't there before. This defines them as local to the function, and thus local to your object (and also, essentially, private... use this. instead of var to make public members).
Anything that isn't declared with a var or a this. is considered global. So, when you called show(), it used the global show, which referenced the object that was created later.
What is boxselector? If it's a generic selector then it would select all elements on the page, regardless if its inside of that unique object.
When you declare something without var or this within a function definition, such as
boxselector = ".boxcontainer[name=" + options.name + "]";
It creates it in the global namespace (attaches it to window)
Try changing this line to
var boxselector = ".boxcontainer[name=" + options.name + "]";
Related
I need a data structure to store several JavaScript objects, and to be able to access them with a string id (get/set/delete operations).
Here is an example of the items I need to store :
var Player = function(name) {
this.name = name;
this.x = 0;
this.y = 0;
this.toString = function() {
return 'player : ' + this.name + ' at ' + this.x + ', ' + this.y;
};
}
I would like to store players in a data structure and to be able to get/set/delete them by their name, like players.get('Bob') to get the player with Bob as name.
At first, I thought I could use a map with the name as key (I'm using Dict from collectionsjs). But then I can't access the name from the methods of the item (toString in my example).
I could use a regular Array, keep the name attribute and implement my own get/set/delete methods, however I would rather use a reliable data structure but I can't find it.
Thanks in advance :]
A Javascript object would work.
var players = [];
players[0] = {"name":"Bob", "age":1};
players[1] = {"name":"John", "age":4};
for (var i in players) {
if (players[i].name == "Bob") {
alert("Bob is " + players[i].age);
}
}
EDIT:
var players = [];
players[0] = {"name":"Bob", "age":1};
players[1] = {"name":"John", "age":4};
players.forEach(function(player){
if (player.name == "Bob") {
alert("Bob is " + player.age);
}
});
var Players = function(){
this.players = [];
this.add = function(player){
this.players.push(player);
}
this.delete = function(name){
for(var i=0;i<this.players.length;i++)
if(this.players[i].name==name)
{
var f = this.players.slice(i+1,this.players.length+1);
this.players = this.players.slice(0,i).concat(f);
return;
}
}
this.set = function(name,player){
for(var i=0;i<this.players.length;i++)
if(this.players[i].name==name)
{
this.players[i] = player;
return;
}
}
this.show = function(){
for(var i=0;i<this.players.length;i++)
console.log(this.players[i].toString());
}
}
var p = new Players();
p.add(new Player('Lorem'));
p.add(new Player('Ipsum'));
p.show();
p.delete('Ipsum');
p.show();
What's unreliable about an array? Use the built in methods IMO. A simple example:
var players = [];
var Player = function(name) {
this.name = name;
this.x = 0;
this.y = 0;
this.toString = function() {
return 'player : ' + this.name + ' at ' + this.x + ', ' + this.y;
};
}
function getPlayerByName(name){
return players.filter(function(p){
return p.name.toLowerCase() === name.toLowerCase();
})[0];
}
// etc...
players.push(new Player('foo'));
var fetched = getPlayerByName('foo');
console.log(fetched);
http://jsfiddle.net/cy39sqge/
I've got this method speak(), which takes two arguments. It's a property of the prototype, so multiple objects will use it.
I'd like to grab those values it returns, loop through them, and output them to my html. The part I can't figure out is, how do I target each individual paragraph tag to correspond with the output of each from each of my variables generated results?
Would this require a double loop? I'm lost.
var para = document.querySelectorAll('p');
var speak = function(what, job) {
var whoWhat = this.name + ' says, ' + what,
whoJob = this.name + "'s job is: " + job;
console.log(whoWhat);
console.log(whoJob);
return whoWhat, whoJob;
};
function Peep(name, job) {
this.name = name;
this.job = job;
}
Peep.prototype.speak = speak;
var randy = new Peep('Randy', 'lawyer');
randy.speak('"blahblah"', randy.job);
var mandy = new Peep('Mandy', 'mom');
mandy.speak('"woooooaahhhh"', mandy.job);
Here's a jsfiddle
Check this one - jsFiddle
Keep adding the HTML to a text. And finally add them to the DOM.
var speak = function(what, job) {
var whoWhat = this.name + ' says, ' + what,
whoJob = this.name + "'s job is: " + job;
console.log(whoWhat);
console.log(whoJob);
return "<p>"+whoWhat+", "+whoJob+"</p>";
};
var txt = "";
var randy = new Peep('Randy', 'lawyer');
txt+=randy.speak('"blahblah"', randy.job);
var mandy = new Peep('Mandy', 'mom');
txt+=mandy.speak('"woooooaahhhh"', mandy.job);
document.getElementById('result').innerHTML = txt;
//in HTML add the result node
<body>
<p id='result'>
</p>
</body>
Using JavaScript you can access the DOM (Document Object Model) and can append new elements to existing elements. For example, you could create a new paragraph element and add this paragraph element to an existing div with the id "result". Here is an example:
var appendText = function (text, parentId) {
var para = document.createElement("p");
var node = document.createTextNode(text);
para.appendChild(node);
var parentElement = document.getElementById(parentId);
parentElement.appendChild(para);
}
var speak = function (what, job) {
var whoWhat = this.name + ' says, ' + what,
whoJob = this.name + "'s job is: " + job;
return [whoWhat, whoJob];
};
function Peep(name, job) {
this.name = name;
this.job = job;
}
Peep.prototype.speak = speak;
var randy = new Peep('Randy', 'lawyer');
var randySays = randy.speak('"blahblah"', randy.job);
appendText(randySays[0], "result");
appendText(randySays[1], "result");
var mandy = new Peep('Mandy', 'mom');
var mandySays = mandy.speak('"woooooaahhhh"', mandy.job);
appendText(mandySays[0], "result");
appendText(mandySays[1], "result");
Here is the jsfiddle with the required html: http://jsfiddle.net/stH7b/2/. You can also find more information on how to append a paragraph to the DOM here: http://www.w3schools.com/js/js_htmldom_nodes.asp
I'm trying to make a dropdown to display the results of a request given what the user writes in a field.
The problem I'm encountering is that when I try to add an onclick event to each item in the dropdown, only the last one acts like expected.
The dropdown is a section and I try to include sections in it.
Here is the dropdown :
<section id="projectDrop">
</section>
Here is the code :
var j = 0;
var tmp;
for (var i=0;((i<infos.projects.length) && (i<5));i++)
{
if (infos.projects[i].name.toLowerCase().match(projectName.value.toLowerCase()))
{
projectDrop.innerHTML += '<section id="project' + j + '">' + infos.projects[i].name + '</section>';
tmp = document.getElementById('project' + j);
projectDrop.style.height = (j+1)*20 + 'px';
tmp.style.top = j*20 + 'px';
tmp.style.height = '20 px';
tmp.style.width = '100%';
tmp.style.color = 'rgb(0, 0, 145)';
tmp.style.textAlign = 'center';
tmp.style.cursor = 'pointer';
tmp.style.zIndex = 5;
tmp.onclick = function(name, key)
{
return function()
{
return insertProject(name, key);
};
} (infos.projects[i].name, infos.projects[i].key);
++j;
}
}
The result is visually as I expected, I can see the dropdown with all my projects listed and a pointer while hovering etc...
But only the last project is clickable and trigger the "insertProject" function while the other do nothing.
If someone could help me solve that !
You need to store the key somewhere. Take a look at the solution below, I have used the data-key attribute on the <section> to store the key.
Also note how I have changed the code to create the element object and assign its properties, instead of building a raw string of HTML. The problem with building HTML as a string is you have to worry about escaping quotes, whereas this way you don't.
var j = 0;
var tmp;
for (var i=0;((i<infos.projects.length) && (i<5));i++)
{
if (infos.projects[i].name.toLowerCase().match(projectName.value.toLowerCase()))
{
tmp = document.createElement('section');
tmp.id = "project" + j;
tmp.setAttribute('data-key', infos.projects[i].key);
tmp.innerHTML = infos.projects[i].name;
projectDrop.style.height = (j+1)*20 + 'px';
tmp.style.top = j*20 + 'px';
tmp.style.height = '20 px';
tmp.style.width = '100%';
tmp.style.color = 'rgb(0, 0, 145)';
tmp.style.textAlign = 'center';
tmp.style.cursor = 'pointer';
tmp.style.zIndex = 5;
tmp.onclick = function(){
insertProject(this.innerHTML, this.getAttribute('data-key'));
};
projectDrop.appendChild(tmp);
++j;
}
}
Change:
tmp.onclick = function(name, key)
{
return function()
{
return insertProject(name, key);
};
} (infos.projects[i].name, infos.projects[i].key);
to
tmp.onclick = function(j){
return function(name, key)
{
return function()
{
return insertProject(name, key);
};
} (infos.projects[j].name, infos.projects[j].key);
}(i)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Constructors in Javascript objects
im trying to learn how to create class's in javascript. I found that is very diffuclt for me to understand it.
now, i want to know if is possible to create a constractor in javascript, like we can do in c# or other programming languages.
i tried few things:
way 1:
function SiteProfile(_url) {
this.url = "";
this.name = this.ExtractNameFromURL();
}
SiteProfile.prototype.ExtractNameFromURL = function () {
var firstDOT = this.url.indexOf(".");
var secondDOT = this.url.indexOf(".", firstDOT + 1);
var theName = "";
for (var i = firstDOT + 1; i < secondDOT; i++) {
theName += this.url[i];
}
return theName;
}
way 2:
function Site() {
this.url = "";
this.name = "";
this.Site = function (_url) {
this.url = _url;
this.name = this.ExtractNameFromURL();
}
this.ExtractNameFromURL = function () {
var firstDOT = this.url.indexOf(".");
var secondDOT = this.url.indexOf(".", firstDOT + 1);
var theName = "";
for (var i = firstDOT + 1; i < secondDOT; i++) {
theName += this.url[i];
}
return theName;
}
}
both of class's should take a URL, and just get the name from him with out the www. or the .com
i want to know if i can design a class, that i can create an instance like so:
var site = new SiteProfile("www.google.co.il");
document.write(site.name); // becuse, this do nothing
(sorry for my english)
You're real close. The problem with your first form is simply that you are not setting the url property with the _url parameter.
function SiteProfile(_url) {
//change the line below to:
//this.url = _url;
this.url = "";
this.name = this.ExtractNameFromURL();
}
SiteProfile.prototype.ExtractNameFromURL = function() {
var firstDOT = this.url.indexOf(".");
var secondDOT = this.url.indexOf(".", firstDOT + 1);
var theName = "";
for (var i = firstDOT + 1; i < secondDOT; i++) {
theName += this.url[i];
}
return theName;
}
var site = new SiteProfile("www.google.co.il");
document.write(site.name); // with the change above, this will behave as expected
Here's the fiddle for the first form: http://jsfiddle.net/BCnfx/
The problem with the second form is two-fold. The main function should be called "SiteProfile" if you still want to instantiate it as such. The second problem is that you need to initialize the url property by passing in the url to the Site method.
//function below should be called "SiteProfile", not "Site"
function Site() {
this.url = "";
this.name = "";
this.Site = function(_url) {
this.url = _url;
this.name = this.ExtractNameFromURL();
};
this.ExtractNameFromURL = function() {
var firstDOT = this.url.indexOf(".");
var secondDOT = this.url.indexOf(".", firstDOT + 1);
var theName = "";
for (var i = firstDOT + 1; i < secondDOT; i++) {
theName += this.url[i];
}
return theName;
};
}
//now instantiate like this instead.
var site = new SiteProfile();
site.Site("www.google.co.il");
document.write(site.name); // with the changes above, this will behave as expected
Here's the fiddle for the second form: http://jsfiddle.net/BCnfx/1/
in your first example:
function SiteProfile(_url) {
this.url = _url;
this.name = this.ExtractNameFromURL();
}
then you will be able to do :
var site = new SiteProfile("www.google.co.il");
document.write(site.name);
I am trying to make a debugger that will be dynamiaclly created with some variables. The names on the left div need to show a div for the corresponding variables Description,Variable ID, and initial Value as well as another div that will show history and lock status when variables are updated later. Where I am having trouble is properly adding the show/hide to the dom I think. Everything starts hidden and then when I click a name the Variables for that name show up but the next click doesn't hide the values from the former. Also any cleanup/optimization advice?
<script type="text/javascript">
var variableIDArray = {};
function loadVariables(variables) {
if (typeof variables != "object") { alert(variables); return; }
var namearea = document.getElementById('namearea');
var description = document.getElementById('description');
var varid = document.getElementById('varid');
var initialvalue = document.getElementById('initialvalue');
var valuelock = document.getElementById('valuelock');
for (var i = 0; i < variables.length - 1; i++) {
var nameDiv = document.createElement('div');
nameDiv.id = variables[i].variableID + "namearea";
nameDiv.className = "nameDiv";
nameDiv.onclick = (function (varid) {
return function () { showvariable(varid); };
})(variables[i].variableID);
nameDiv.appendChild(document.createTextNode(variables[i].name));
namearea.appendChild(nameDiv);
var descriptionDiv = document.createElement('div');
descriptionDiv.id = variables[i].variableID + "description";
descriptionDiv.className = "descriptionDiv";
descriptionDiv.appendChild(document.createTextNode("Description : " + variables[i].description));
description.appendChild(descriptionDiv);
var varidDiv = document.createElement('div');
varidDiv.id = variables[i].variableID + "varid";
varidDiv.className = "varidDiv";
varidDiv.appendChild(document.createTextNode("Var ID : " + variables[i].variableID));
varid.appendChild(varidDiv);
var initialvalueDiv = document.createElement('div'); ;
initialvalueDiv.id = variables[i].variableID + "initialvalue";
initialvalueDiv.className = "initialvalueDiv";
initialvalueDiv.appendChild(document.createTextNode("Initial Value : " + variables[i].value));
initialvalue.appendChild(initialvalueDiv);
var valuelockDiv = document.createElement('div');
valuelockDiv.id = variables[i].variableID + "valuelock";
valuelockDiv.className = "valuelockDiv ";
valuelockDiv.appendChild(document.createTextNode("Value : " + variables[i].value));
valuelockDiv.appendChild(document.createTextNode("Lock : " + variables[i].locked.toString()));
valuelock.appendChild(valuelockDiv);
variableIDArray[variables[i].variableID];
}
};
function showvariable(varid) {
for (v in variableIDArray)
hide(variableIDArray[v]);
show(varid + "description");
show(varid + "varid");
show(varid + "initialvalue");
show(varid + "valuelock");
}
function show(elemid) {
document.getElementById(elemid).style.display = "block";
}
function hide(elemid) {
document.getElementById(elemid).style.display = "none";
}
Yes. jQuery. Will reduce your code to about 6 lines. :) http://jquery.com