How to store functions in an Object? - javascript

I'd like to store multiple functions in one object. However, my current code seems to overwrite the previous data.
Related: https://stackoverflow.com/a/3733591/309535
Because it is a loop with other stuff going on, the code cannot be within the same block of javascript.
My Code:
<script type="text/javascript">
var at = {
atleft_1: function drawChart() {
// data goes here
}
}
</script>
// Next loop
<script type="text/javascript">
var at = {
atleft_2: function drawChart() {
// data goes here
}
}
</script>

If at is already defined, just assign a property:
var at = {};
at.atleft_1 = function.....;
at.atleft_2 = function.....;
Although by the look of it you may be better of with:
at.atleft = function(id) {...};

You Can do something like this:
<script type="text/javascript">
var at = {
atleft_2: function() {
// data goes here
},
atleft_1: function(){
//data goes here
}
};
</script>
Why are you using drawChart?? I didn't get it.

Related

Overriding functions in javascript is not working, debugger skips my code

I am trying to modify an application by overriding certain functions. I cannot release the code due to enterprise ownership. My code looks like this:
<html>
<head>
<script type="text/javascript" src="https://mylink.scriptX.js"></script>
// Some other scripts and css references
</head>
<body>
<script>
$(document).ready(function () {
form_script = my_script =
{
initialization:function (mode, json_data) {
this.parent_class.initialization(mode, json_data);
//Mycode to override the functions in scriptX.js is below:
var x= {};
function inherit(x) {
var y= {};
y.prototype = x;
return y;
};
(function ($) {
var OverrideFunctions = inherit($.my_methods);
OverrideFunctions.function1 = function () { ...};
OverrideFunctions.function2 = function () { ...};
OverrideFunctions.function3 = function () { ...}
})(jQuery);
}
//some original code here
}
</script>
//some other code here
</body>
</html>
Now the content of the scriptX.js is something like this:
(function ($) {
var my_methods = {
function1 = function () { ...};
function2 = function () { ...};
function3 = function () { ...}
}
})(jQuery);
The problem is that, I am noticing that the debugger skips the whole block of code since OverrideFunctions.function1 = function () { to the end })(jQuery);
So my functions are not being executed and thus the application is not changed. I was wondering if that could be related

Chrome Extension - How to pass variables from JS to popup.html?

I have some variables in the following JS:
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
}
As you can see, the variable is "allcompanynames".
However, how do I pass them and show it on the popup.html page?
I have tried
<script type="text/javascript" src="companynames.js"></script>
<p id="allcompanynames"></p>
no luck. What's wrong?
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
document.getElementById("allcompanynames").innerHTML(allcompanynames)
}
I'm guessing you should add that last line after displaying the pop up to add the content into the page.
Write your code in this way
var background = chrome.extension.getBackgroundPage();
var allcompanynames = background.companynames;
alert(allcompanynames)

How can i optimize my Jquery code?

I've created some JavaScript using Jquery, for the page animation :
I trying to optimize it since i repeat the same thing for subtab1, subtab2, subtab3.
The same function is executed for all of them, and the only thing is changes is variable i iterating on?
Any suggestion?
<script type="text/javascript">
$(document).ready(function () {
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
var $fundosdiponiveis = $('#fundosdiponiveis');
var $fundosdiponiveisTab = $('#tabs1');
$defensivo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$defensivoSubTab.removeClass("hide");
$defensivoSubTab.show();
});
$equilibrado.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$equilibradoSubTab.removeClass("hide");
$equilibradoSubTab.show();
});
$activo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$activoSubTab.removeClass("hide");
$activoSubTab.show();
});
});
</script>
For a while:
var $fundosdiponiveis = $('#fundosdiponiveis');
This is my default div.
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
That divs apears when i clicking on one of the following tabs:
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
And that button hides and changes style"display" to none, on click, of my three #subtab's
var $fundosdiponiveisTab = $('#tabs1');
Any suggestion?
You could write a function that returns the proper function:
function createShowTabFunc(tab) {
return function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
tab.removeClass("hide");
tab.show();
}
}
Then assign your click handlers:
$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));
Have a common class attribute to all the tab's and you just need to write $('.class').click() and in this get the id of the corresponding tab and according to the id fetched by attr function, you can have an if else to define your variables inside the if else and execute your code block.

javascript will not work onload

The javascript on the page needs to work onpage load. So I tried adding the document ready function into the code. It doesn't seem to work.
http://janeucreative.com/daddychallenge/bag.html
<script>$(document).ready(function() {
function addItem(item) {
var itemInCart = item.cloneNode(true);
itemInCart.onclick = function() { removeItem(this); };
var cart = document.getElementById("cart");
cart.appendChild(itemInCart);
}
function removeItem(item) {
var itemInItems = item.cloneNode(true);
itemInItems.onclick = function() { addItem(this); };
var cart = document.getElementById("cart");
cart.removeChild(item);
}
init();
});</script>
Any advice would be much appreciated! I'm very new to javascript and just trying to learn it a step at a time.
First, you'll want to have your page using a more modern version of jquery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js" ></script>
Then, AFTER linking the jquery, which you have done correctly, you can rewrite your code like this:
<script>
function init(toAdd, toRemove){
addItem(toAdd);
removeItem(toRemove);
}
function addItem(item) {
var itemInCart = item.cloneNode(true);
itemInCart.on("click",function(){removeItem(this);});
$("#cart").appendChild(itemInCart);
}
function removeItem(item) {
var itemInItems = item.cloneNode(true);
itemInItems.on("click", function(){addItem(this);});
$("#cart").removeChild(item);
}
init($("#myAddedItem"), $("myRemovedItem"));
</script>
This way, you'll have your functions addItem and removeItem available elsewhere on the page. You currently seem to have them set up to run only once, from the page initialization.
I'm not sure what you're doing with cloneNode.

applying a var to an if statement jquery

Need to apply a var to a statement if its conditions are met, this syntax isn't throwing errors but its not working.
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
//stuff here
$(this).ready(function () {
if ($("#stepDesc0").is(".current")) {
action_is_post = true;
}
});
//stuff here
</script>
should I use something other than .ready? Do I even need the $(this).ready(function ()... part? I need it to apply the var when #stepDesc0 has the class current.
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
if ($("#stepDesc0").is(".current")) {
var action_is_post = true;
}
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});
<script type="text/javascript">
$(document).ready(function(){
var action_is_post=$("#stepDesc0").is(".current");
});
</script>
If you want the variable to be accessible outside the $(document).ready(function(){..., then you'll need to declare it outside the statement like this:
<script type="text/javascript">
var action_is_post;
$(document).ready(function(){
action_is_post=$("#stepDesc0").is(".current");
});
</script>
HTML (in order to test it):
Show value
$(function() {
var actionIsPost = $('#stepDesc0').is('.current');
alert( actionIsPost );
});
If you are adding the current class to #stepDesc0 on an event then put the .is check in the event handler.

Categories

Resources