How to combine similar JavaScript methods to one - asp.net

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..)

Related

Convert controls dynamically from strings

I want to disable some controls on my asp page from a ControlCollection.
This is my code.
foreach (System.Web.UI.Control c in ControlCollection)
{
if (c.GetType().FullName.Equals("System.Web.UI.WebControls.Table"))
{
TableRow t = (TableRow)c;
t.Enabled = false;
}
else if (c.GetType().FullName.Equals("System.Web.UI.WebControls.TextBox"))
{
TextBox t = (TextBox)c;
t.Enabled = false;
}
.......
......
///Like this I do for all controls
}
I need a better approach at this. I searched on Internet but didn't find any solution.
You can use the .OfType<> extension like this in order to have more elegant code:
collection.OfType<Table>().ToList().ForEach(c => c.Enabled = false);
collection.OfType<TextBox>().ToList().ForEach(c => c.Enabled = false)
Do all controls in your list inherit from System.Web.UI.WebControl? If so, than this code may help. (Didn't test it myself)
Type wc = new System.Web.UI.WebControls.WebControl(HtmlTextWriterTag.A).GetType();
foreach (System.Web.UI.Control c in ControlCollection)
{
if (c.GetType().IsSubclassOf(wc))
{
((System.Web.UI.WebControls.WebControl)c).Enabled = false;
}
}
And even more elegant (thanx to Shadow Wizard )
ControlCollection.OfType<System.Web.UI.WebControls.WebControl>().ToList().ForEach(c => c.Enabled = false);
Try to use is.
if (c is Table)
{
}
else if (c is TextBox)
{
}
Or consider doing a switch statement on the type name.
switch (c.GetType().Name.ToLower())
{
case "table":
break;
case "textbox":
break;
}

Hook for Template.rendered except in this case, I want it to be called for every rendered event

How can I call a function, or run some code for when any and every Template.rendered event is called in Meteor? (Not just a specific template)
(Is there a way I can do this without overloading meteor's base functions?)
Thanks!
One way is to call another method:
dothis = function() {
// Something
}
Template.hello.rendered = function() {
dothis();
}
Template.hello2.rendered = function() {
dothis();
}
If you have nothing else to do in your rendered you could:
Template.hello2.rendered = dothis;
Also in bulk (will override any other rendered if it is defined before, when it is run):
for(tmpl in Template) {
Template[tmpl].rendered = dothis;
};
(and also if you have defined stuff before you can make it run both callbacks:)
for(tmpl in Template) {
if(Template[tmpl].rendered) {
Template[tmpl].rendered = function() {
var originalfunction = Template[tmpl].rendered;
var result = originalfunction.apply(this);
dothis.apply(this);
return result;
}
}
else
{
Template[tmpl].rendered = dothis;
}
};

How do I maintain focus position in UpdatePanel after page partial post back

I have four controls in a page with update panel. Initially mouse focus is set to first control. When I partially post back the page to server the focus automatically moves to first control from the last focused control from the control I have tabbed down to. Is there any way to maintain the last focus?
Take a look at Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:
The basic idea behind the solution is to save the ID of the control
with input focus before the update panel is updated and set input
focus back to that control after the update panel is updated.
I come with the following JavaScript which restores the lost focus in
the update panel.
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof(window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof(document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof(focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof(lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
I find this more elegant:
(function(){
var focusElement;
function restoreFocus(){
if(focusElement){
if(focusElement.id){
$('#'+focusElement.id).focus();
} else {
$(focusElement).focus();
}
}
}
$(document).ready(function () {
$(document).on('focusin', function(objectData){
focusElement = objectData.currentTarget.activeElement;
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(restoreFocus);
});
})();

Enable/disable asp.net validator controls within a specific "ValidationGroup" with jQuery?

I know how to enable/disable individual validator controls on the client side using
ValidatorEnable(validator, false);
But how do you enable/disable all the validators within a ValidationGroup?
The validator properties aren't rendered as attributes unfortunately, so I don't know a good way to select them directly. You can try to iterate the Page_Validators array and filter out the ones you want to work with.
Try:
$.each(Page_Validators, function (index, validator){
if (validator.validationGroup == "your group here"){
ValidatorEnable(validator, false);
}
});
Check this blogpost explaining how with javascript. The main part of the code from the blog:
<script type="text/javascript">
function HasPageValidators()
{
var hasValidators = false;
try
{
if (Page_Validators.length > 0)
{
hasValidators = true;
}
}
catch (error)
{
}
return hasValidators;
}
function ValidationGroupEnable(validationGroupName, isEnable)
{
if (HasPageValidators())
{
for(i=0; i < Page_Validators.length; i++)
{
if (Page_Validators[i].validationGroup == validationGroupName)
{
ValidatorEnable(Page_Validators[i], isEnable);
}
}
}
}
</script>
Alternatively you can simply have ValidationGroup attribute with each validator defined .
Then you wont need any Jquery or javascript stuff to close them.
Here is the link that worked for me.
http://www.w3schools.com/aspnet/showasp.asp?filename=demo_prop_webcontrol_imagebutton_validationgroup

Dropdownlist doesn't postback after Page_ClientValidate()

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?");
}
}

Resources