I have these functions to change my backgrounds but the onClick event only works once or one of the four does not work when page loads.
I know "return false" stops the functions but when I use the code without them, the background loads but returns to the original one.
Someone can tell me why?
window.onload = init;
function init(){
document.getElementById("bg01").onclick = mudaBG01;
function mudaBG01(){
$("body").addClass("bg01");
return false;
}
document.getElementById("bg02").onclick = mudaBG02;
function mudaBG02(){
$("body").addClass("bg02");
return false;
}
document.getElementById("bg03").onclick = mudaBG03;
function mudaBG03(){
$("body").addClass("bg03");
return false;
}
document.getElementById("bg04").onclick = mudaBG04;
function mudaBG04(){
$("body").addClass("bg04");
return false;
}
};
Try this
document.getElementById("bg04").onclick = new Function("mudaBG04()");
and define all function mudaBG04() out side of init() function.
Change
onclick= mudaBG01
to
onclick="mudaBG01()"
Done. I changed my JS functions to:
$("#bg01").click(function(){
$("body").css('background', 'url(../images/bg02.jpg)');
return false;
})
$("#bg02").click(function(){
$("body").css('background', 'url(../images/bg03.jpg)');
return false;
})
$("#bg03").click(function(){
$("body").css('background', 'url(../images/bg07.jpg)');
return false;
})
$("#bg04").click(function(){
$("body").css('background', 'url(../images/bg08.jpg)');
return false;
})
thank you all =]
Related
I have several charts built with dc.js. I can achieve the desired functionality by attaching a callback to each dc.js chart's .on("filterted", function(chart) {}) but this is annoying because I have to attach the same callback to each chart. And error prone because as new charts are added, someone has to remember to attach an event hander. I would prefer to just attach a callback to the underlying crossfilter. Is that possible?
Is there a way to optimize this...
var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});
dc.pieChart(myDomId1)
.dimension(dimAlpha)
.group(groupAlpha)
.on("filtered", function(chart) {
//do stuff
});
dc.pieChart(myDomId2)
.dimension(dimBeta)
.group(groupBeta)
.on("filtered", function(chart) {
//do stuff
});
into something like this...
var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});
dc.pieChart(myDomId1)
.dimension(dimAlpha)
.group(groupAlpha);
dc.pieChart(myDomId2)
.dimension(dimBeta)
.group(groupBeta);
ndx.on("filtered", function() {
//do stuff
})
If you've got a million charts and don't want to have to attach the event listener to each one manually, you could iterate through the chart registry and add them that way. Ex:
dc.chartRegistry.list().forEach(function(chart) {
chart.on('filtered', function() {
// your event listener code goes here.
});
});
Note that this code must go after the charts have instantiated to work.
In the absence of a way to attach the callback once globally, one thing you could do to mitigate the risk from duplicate code is to define the callback function once and pass in a reference instead of defining it inline on each chart.
function my_func() {
// do stuff
}
dc.pieChart(myDomId2)
.dimension(dimBeta)
.group(groupBeta)
.on("filtered", my_func);
chart and filter can also be passed to the filter function something like:
function my_func(chart,filter) {
// do stuff
}
dc.pieChart(myDomId2)
.dimension(dimBeta)
.group(groupBeta)
.on("filtered", my_func);
I have a similar code:
Template.mytemplate.pippo = function() {
var returnValue;
asyncFunc(function (dataReturned) {
returnValue = dataReturned;
});
return returnValue;
}
I have try to load future on client side
var Future = Npm.require('fibers/future');
but don't work :(
How can I wait that asyncFunc return callBack finish to return template value returnValue
thanks!
There is a bit of a question of where you should be calling asyncFunc, but once you figure that out, your code should look something like this:
asyncFunc(function (dataReturned) {
Session.set('returnValue', dataReturned);
});
...
Session.setDefault('returnValue', "loading.."); // or some other default that is safe
Template.mytemplate.pippo = function() {
return Session.get('returnValue');
}
I have a click event bound to the following ko function:
self.select = function (entity, event) {
var ctrlPressed = false;
if (event.ctrlKey) { ctrlPressed = true; }
if (!ctrlPressed) {
manager.deselectAll();
this.selected(true);
} else {
this.selected() ? this.selected(false) : this.selected(true);
}
}
It is bound like so:
data-bind="click: select, event: { dblclick: function(){alert('test');}}"
This currently works except that it fires "select" twice when you double click, which I do not want. I tried following the advice in this SO question, but when I create the singleClick() function, I get an error that "ctrlKey is not a function of undefined". So it's not passing the event properly. Further more, the doubleClick() function in the other answer there doesn't work at all. It gives an error on the "handler.call" part saying handler is not defined.
So, how can I successfully call my ko select function on singleClick but NOT on doubleclick?
I don't think this is really a knockout issue. You have at least these two options:
1. Implement some custom logic that prevents processing if a single click has started processing already
2. Prevent the double-click function altogether. JQuery has this handy handler:
$(selector).on("dblclick", function(e){
e.preventDefault(); //cancel system double-click event
});
So I technically got it to work. Here is my new singleClick function
ko.bindingHandlers.singleClick = {
init: function (element, valueAccessor, c, viewModel) {
var handler = valueAccessor(),
delay = 400,
clickTimeout = false;
$(element).click(function (event) {
if (clickTimeout !== false) {
clearTimeout(clickTimeout);
clickTimeout = false;
} else {
clickTimeout = setTimeout(function () {
clickTimeout = false;
handler(viewModel, event);
}, delay);
}
});
}
};
This passes the viewModel and event to the handler so I can still modify observables and capture ctrlKey pressed.
The binding:
data-bind="singleClick: select, event: { dblclick: function(){alert('test');}}"
The problem is that now, obviously, single clicking an item has a delay while it waits to see if it's a double click. This is an inherent and unsolvable issue, I believe, so though this technically answers my question, I will consider a completely different route (ie, no double-clicking at all in my interface)
I have an ASP.NET code-behind page linking several checkboxes to JavaScript methods. I want to make only one JavaScript method to handle them all since they are the same logic, how would I do this?
Code behind page load:
checkBoxShowPrices.Attributes.Add("onclick", "return checkBoxShowPrices_click(event);");
checkBoxShowInventory.Attributes.Add("onclick", "return checkBoxShowInventory_click(event);");
ASPX page JavaScript; obviously they all do the same thing for their assigned checkbox, but I'm thinking this can be reduced to one method:
function checkBoxShowPrices_click(e) {
if (_hasChanged) {
confirm(
'All changes will be lost. Do you wish to continue?',
function(arg) {
if (arg.toUpperCase() == 'YES') {
var checkBox = document.getElementById('<%=checkBoxShowPrices.UniqueID%
>');
checkBox.checked = !checkBox.checked;
eval("<%=base.GetPostBackEventReference(checkBoxShowPrices)%>");
_hasChanged = false;
}
});
return false;
} else {
eval("<%=base.GetPostBackEventReference(checkBoxShowPrices)%>");
}
}
function checkBoxShowInventory_click(e) {
if (_hasChanged) {
confirm(
'All changes will be lost. Do you wish to continue?',
function(arg) {
if (arg.toUpperCase() == 'YES') {
var checkBox = document.getElementById('<%
=checkBoxShowInventory.UniqueID%>');
checkBox.checked = !checkBox.checked;
eval("<%=base.GetPostBackEventReference(checkBoxShowInventory)%>");
_hasChanged = false;
}
});
return false;
} else {
eval("<%=base.GetPostBackEventReference(checkBoxShowInventory)%>");
}
}
Add to the event the checkbox that is raising it:
checkBoxShoPrices.Attributes.Add("onclick", "return checkBox_click(this, event);");
Afterwards in the function you declare it like this:
function checkBoxShowPrices_click(checkbox, e){ ...}
and you have in checkbox the instance you need
You can always write a function that returns a function:
function genF(x, y) {
return function(z) { return x+y*z; };
};
var f1 = genF(1,2);
var f2 = genF(2,3);
f1(5);
f2(5);
That might help in your case, I think. (Your code-paste is hard to read..)
Update:
I have just found the solution. The following function works (remove the else part):
function confirmSubmit() {
if (Page_ClientValidate("Group1")) {
return window.confirm("Are you sure to submit the form?");
}
}
But I am wondering why it doesn't work when I add the else part.
Question:
I want to have a confirm dialog after user fills in all the data in the form.
I set onclientclick="return confirmSubmit()" in the submit button.
function confirmSubmit() {
if (Page_ClientValidate("Group1")) {
return window.confirm("Are you sure to submit the form?");
} else {
return false;
}
}
If Page_ClientValidate("Group1") returns false, the dropdownlist doesn't cause postback after I first select the item, and the postback only occurs when I select the dropdownlist second time.
What's the problem?
After Page_ClientValidate is called, the variable Page_BlockSubmit gets set to true, which blocks the autopost back. Page_BlockSubmit was getting reset to false on the second click, for what reasons I still don't fully understand. I'm looking more into this, but I have a solution and I'm under the gun so I'm rolling with it....
Just add below code in the code block which executes if Page is not valid.
Page_BlockSubmit = false;
e.g.
function ValidatePage()
{
flag = true;
if (typeof (Page_ClientValidate) == 'function')
{
Page_ClientValidate();
}
if (!Page_IsValid)
{
alert('All the * marked fields are mandatory.');
flag = false;
Page_BlockSubmit = false;
}
else
{
flag = confirm('Are you sure you have filled the form completely? Click OK to confirm or CANCEL to edit this form.');
}
return flag;
}
I have just found the solution. The following function works (remove the else part):
function confirmSubmit() {
if (Page_ClientValidate("Group1")) {
return window.confirm("Are you sure to submit the form?");
}
}