Solved

Find Element With JavaScript When UserControl Used Multiple Times

Posted on 2013-11-19
1
660 Views
Last Modified: 2013-11-19
Maybe I am making this more complicated than it is but for the life of me I can not find any information on it.  Basically what I want to do is place a hidden element on a user control and write JavaScript that will read that value.  The problem I have is that it needs to be able to work when there is more than one user control present on the page.

I know that I can not place the JavaScript code on the user control itself because it should only be added to the page once.  I currently have all of my JavaScript in a file and I add it to the page using Page.ClientScript.RegisterClientScriptInclude.  So the question is how do I write JavaScript that can be placed in the file and read the value of a hidden element on the user control that is calling the function and make sure I am reading the right control.

Maybe there is another way to accomplish what I am trying to do so I will try to give this a little more context.  The user control I am creating contains a RadToolBar that has buttons the user will press to perform various actions.  One of the buttons will perform a delete operation so I want to confirm the user really wants to delete it.  My current plan is to use RadWindow to display a confirmation message.  The code that I have found to do this is:

            var btn; 
            function onToolBarClientButtonClicking(sender, args) { 
                var button = args.get_item(); 
 
                if (button.get_commandName() == "DeleteSelected") { 
                    if (document.getElementById('hdn_Hosp').value) { 
                        args.set_cancel(true); 
                        btn = args.get_item(); 
                        confirmFn('Delete ' + document.getElementById('hdn_Hosp').value + '?'); 
                    } 
                } 
            } 
 
            function confirmFn(text) { 
                var callBackFn = function (arg) { 
                    if (arg) { 
                        document.getElementById('hdn_Hosp').value = ""; 
                        btn.click(); 
                    } 
                } 
                radconfirm(text, callBackFn); 
            } 

Open in new window


I think this code could be written so that it doesn't use a hidden element.  My second issue though is that I need to get a translated message to display.  I already have the translations server side so my plan was to put the translated text in a hidden element that could be read and displayed.
0
Comment
Question by:kmcbrearty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 3

Accepted Solution

by:
kmcbrearty earned 0 total points
ID: 39659997
I was able to come up with a solution that works with .Net 4.0.  Basically with .Net 4.0 you can specify the ClientIDMode.  More information on ClientIDMode can be found at the Microsoft Developer Network website.  The default value of ClientIDMode is Predictable which means that it will concatenate ClientID values for each control in the hierarchy separating each ID with an underscore to create a unique id.  So for example you might have an ID of:

MyUserControl_TextBox

With some string manipulation we can determine the ID for the control that we want from the ID of the calling control.  The basic idea is to strip off the known control name, the name of the control that called the function, as well as an extra character to account for the underscore.  This gives you the base name for all of the controls that are at the same level in the control hierarchy.  You can then combine the base name and the name of the control that you are looking for separating them with an underscore to get the name of the control you need to read.

The full solution that I came up with is below.  For the getUserControlName function I know that I could simplify the function by just specifying the number of characters to strip off, the length of the toolbar name plus one for the underscore, but I believe the extra lines improve the readability of the code and make it easier to understand how it works.  It is my belief that fewer lines of code doesn't always mean better if it isn't easy to understand the meaning or how it works.

var button;
var showConfirmation = "y";

function getControlName(sender, name) {
	var userControlName = getUserControlName(sender);
	return userControlName + "_" + name;
}

function getUserControlName(sender) {
	var senderId = sender.get_id();
	var toolbarName = "ActionBar";
	var nameLength = senderId.length - toolbarName.length - 1;
	return senderId.substr(0, nameLength);
}

function getConfirmDeletePrompt(sender) {
	var controlName = getControlName(sender, "ConfirmDeletePrompt");
	return document.getElementById(controlName).value;
}

function getConfirmDeletePromptTitle(sender) {
	var controlName = getControlName(sender, "ConfirmDeletePromptTitle");
	return document.getElementById(controlName).value;
}

function onToolBarClientButtonClicking(sender, args) {
	button = args.get_item();

	if (button.get_value() == "delete")
		showDeleteConfirmation(sender, args);
}

function showDeleteConfirmation(sender, args) {
	if (showConfirmation == "n") {
		showConfirmation = "y";
		return;
	}
		
	args.set_cancel(true);	
	var title = getConfirmDeletePromptTitle(sender);
	var text = getConfirmDeletePrompt(sender);
	radconfirm(text, confirmCallBack, 300, 10, null, title);
}

function confirmCallBack(arg) {
	if (!arg)
		return;

	showConfirmation = "n";
	button.click();
}

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Display Error Message in Asp.net Modal Validation Partial View 3 38
Adding Rows to Grid 4 32
Check for Numeric Phone Field 14 47
Add Promise to Existing Code 6 28
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question