I include a JS file in a user control. The host page has multiple instances of the user control.
The JS file has a global variable that is used as a flag for a JS function. I need the scope of this variable be restricted to the user control. Unfortunately, when I have multiple instances of the control, the variable value is overwritten.
What's the recommended approach in a situation like this?
Some options are to dynamically generate the javascript based on the ClientId of the User Control. You could dynamically generate the global variable for example.
Another option and one I would recommend is to encapsulate the global variable and function within an object, then your user control can emit the JS to create an instance of that object (Which can be dynamically named thus letting you scope the object as you see fit).
Edit
I don't have a working code sample that I can share but, I have done this in a couple different ways. the easiest method is to do this in the markup of your user control.
<script language='javascript'>
var <%=this.ClientID%>myObject=new myObject();
</script>
Assuming your control has a clientId of myControl this will create a variable myControlmyObject.
Another way to do this would be to generate the script in the code behind you could register it using: Page.ClientScript.RegisterStartupScript().
I would recommend refactoring your code such that all the common JS logic is stored in one place, not in every UserControl. This will reduce the size of your page by a good margin.
You can pass in the id of the UserControl to the common JS method(s) to differentiate between the UserControls.
For the issue of limiting the scope of your 'UserControl' variable, you could store some sort of a Key/Value structure to keep your UserControl-specific value - the Key would be the UserControl clientID, and the value would be the variable that you're interested in.
For example:
var UCFlags = new Object();
//set the flag for UserControl1:
UCFlags["UC1"] = true;
//set the flag for UserControl2:
UCFlags["UC2"] = false;
To access them, you simply pass the ClientID of the UserControl in to the UCFlags array:
myFlag = UCFlags["UC1"];
On the server-side, you can replace the constant strings "UC1" or "UC2" with
<%= this.ClientID %>
like this:
myFlag = UCFlags["<%= this.ClientID %>"];
You can still use the <%= this.ClientID %> syntax here even though the bulk of the JS is in a separate file; simply set
UCFlags["<%= this.ClientID %>"] = value;
before the call to embed the JS file.
Well, if you have to keep with the current solution, you could rename your global variable to something like the following code, which should be in the .ascx file for your control:
<script type='text/javascript'>
var <%= this.ClientID %>_name_of_global_variable;
</script>
Where "this" is the asp.net control. That way, each control has a unique variable name, based off the client id. Make sure you update the rest of your javascript to use this new naming convention. The problem, it looks messy, and the variable names will become very long depending on where the control is embedded in the page.
Does that make sense? It should take minimal javascript modification to get it working.
I ran into same issue and below blog post solved it. Solution is to take Object oriented way for javaScript
Adding multiple .NET User Controls that use JavaScript to the same page
Related
When I render DevExpress MVC controls for nested fields, using a custom FormBuilder class of my own, I'm using the naming convention of ModelName.FieldName. This fixes binding issues I was having, but I now need client-side access to the JavaScript objects that are created for the control.
In the past, I would find an object called FieldName. For nested fields, what is the naming pattern for the JavaScript object name (since ModelName.FieldName would not be a suitable JavaScript object name), and is there perhaps an alternative way to access the object by passing in the full field name as a parameter to some JavaScript method (something like AllControls.GetControl('ModelName.FieldName'))?
Here is a sample of my code:
var textBoxSettings = new TextBoxSettings
{
Name = "ModelName.FieldName",
};
writer.Write(devExpress.TextBox(textBoxSettings).GetHtml());
UPDATE:
It appears that DevExpress does indeed render objects with the name ModelName.FieldName. I'm not sure how to access those objects in JavaScript - is there some kind of escape sequence to treat the entire phrase as a single variable name?
From my understanding the 'DevExpress' way to access controls dynamically is to use the control collection functions
var nameTextBox =
ASPxClientControl.GetControlCollection().GetByName('ModelName.FieldName')
DevExpress does actually create the JavaScript object with a variable name in the form ModelName.FieldName.
To access that object in JavaScript, you can use the format:
var myControl = window['ModelName.FieldName'];
I have an enum called SiteTypes that contains several values that are all bound to a dropdown list. On the client side, I need to check this dropdown to see if the selected value is one of those enum values. I don't want to hardcode the value of the enum in the script in case it needs to change, so I want to use a server tag to get it directly from the enum itself. Conecptually, I would like to do this:
function SiteIdChanged() {
var x = "<%=SiteTypes.Employee %>";
}
The way I am doing it now is created a protected property in the codebehind that returns that specific enum value and am doing this:
function SiteIdChanged() {
var x = "<%=EmployeeSiteTypeValue %>";
}
I don't like that, though, because I have to create a special property on every page that I need to do such a check.
Is there a way to do what I want here?
Are you getting a "xxx is inaccessible due to its protection level" error when you compile or run the page? enums are public by default, classes are not. My guess is that you've defined your enum inside your page's class and you aren't explicitly marking it with the 'public' access modifier. Explicitly mark it as public or move it outside of the class and see what happens. If you're planning on using it on lots of pages you should stick the enum definition in in a file in the App_Code folder of your project.
If you don't like your current implementation I would consider using a PageMethod to compare the dropdown selection to the enum value. This approach will probably be cleaner, as you can do most of the logic server-side.
Here's a tutorial on PageMethods:
http://blogs.microsoft.co.il/blogs/gilf/archive/2008/10/04/asp-net-ajax-pagemethods.aspx
As long as your enum is marked public, you can just go with your first option. There's no need to put a property on every single page you want to retrieve the value from.
That approach is really the simplest solution for writing out server side values in your JavaScript.
You can use the Enum.IsDefined Method this well tell you if the selected value from the dropdown is actually part of your enum.
Enum.IsDefined(typeof(MyEnum), myValue)
http://msdn.microsoft.com/en-us/library/system.enum.isdefined.aspx
In classic ASP (which I am forced to use), I have a few factory functions, that is, functions
that return classes. I use JScript.
In one include file I use these factory functions to create some classes that are used throughout the application. This include file is included with the #include directive in all pages.
These factory functions do some "heavy lifting" and I don't want them to be executed on every page load.
So, to make this clear I have something like this:
// factory.inc
function make_class(arg1, arg2) {
function klass() {
//...
}
// ... Some heavy stuff
return klass;
}
// init.inc, included everywhere
<!-- #include FILE="factory.inc" -->
// ...
MyClass1 = make_class(myarg01, myarg02);
MyClass2 = make_class(myarg11, myarg12);
//...
How can I achieve the same effect without calling make_class on every page load?
I know that
I can't cache the classes in the Application object
I can't use the Application_OnStart hook in Global.asa
I could probably create a scripting component, but I really don't want to do that
So, is there something else I can do? Maybe some way to achieve caching of these classes, which are really objects in JScript.
PS: [further clarification] In the above code "heavy stuff" is not so heavy, but I just want to know if there's a way to avoid it being executed all the time. It reads database meta information, builds a table of the primary keys in the database and another table that resolves strings to classes, etc.
it is not possible to store objects of asp classes in sessions or application (in VBScript).
that is because objects in ASP Classic are not serializable. well not automatically serializable. you could do it yourself.... but that means of course some extra work.
as i said above it is not possible to store classes written in vbscript in session or application.
you can stor classes written in jscript in the session or application. so what you have to do is write your classes in jscript in store them in the session.
then use thos classes from your (existing) vbscript code.
example:
<script runat="server" language="jscript">
function MyClass() {
this.Var1 = "54321";
this.Var2 = Var2;
}
var Var1, Var2;
function MyClassFactory() {
return new MyClass();
}
</script>
<script runat="server" language="vbscript">
dim instance : set instance = MyClassFactory()
instance.Var1 = "12345"
set session("sesInstance") = instance
response.write session("sesInstance").Var1
</script>
hope that helps sorry for my incompetence in pasting the code correctly formatted...
I created an asp.net Server control that derives from a LinkButton, and renders a small javascript function to the page.
I want to use this control many times on the page, but just want the javascript to be rendered once on the page. On the other hand, I rather not manually add it in a js file, because i don't want to have a chance of forgetting to add the js file in the future.
What will be the best way to go about doing this ?
Preventing duplication in client scripts
Use a registration method such as Page.ClientScript.RegisterClientScriptBlock(..). There are a couple of overloads but they all work in a similar fashion. It's smart enough to render the script only once no matter from how many control instances it's issued.
Microsoft remarks in the MSDN documentation:
A client script is uniquely identified
by its key and its type. Scripts with
the same key and type are considered
duplicates. Only one script with a
given type and key pair can be
registered with the page. Attempting
to register a script that is already
registered does not create a duplicate
of the script.
The MSDN docs also contain sample code such as this:
// Check to see if the client script is already registered.
if (!cs.IsClientScriptBlockRegistered(cstype, csname2))
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=text/javascript> function DoClick() {");
cstext2.Append("Form1.Message.value='Text from client script.'} </");
cstext2.Append("script>");
cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
}
Other similar registration methods
Different methods can be used to register your client script in different ways - see each of the ClientScriptManager.RegisterClientScript*(..) methods in MSDN for more detail about each. They're all built to prevent duplication in the rendered page.
This gives you the freedom to output scripts at the control level without worrying or having to track or count scripts.
Edit:
The ClientScriptManager instance is accessed through the Page.ClientScript property.
You can use the Page.RegisterClientScriptBlock method.
Here is an example from the MSDN:
if (!this.IsClientScriptBlockRegistered("clientScript"))
{
// Form the script that is to be registered at client side.
String scriptString = "<script language=\"JavaScript\"> function DoClick() {";
scriptString += "myForm.show.value='Welcome to Microsoft .NET'}<";
scriptString += "/";
scriptString += "script>";
this.RegisterClientScriptBlock("clientScript", scriptString);
}
HTH
Any way to reference a script on a CDN and not have it duplicated multiple times? Or can I just not worry about it since it's just a pointer anyway and the browser is (?) smart enough not to load the same library twice?
In other words, suppose I want the following code inserted from a server control:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
If I use a RegisterClientScriptBlock I can use the IsClientScriptBlockRegistered method to not have the server control load it multiple times. But, the preceding code is likely to have been put on the page anyway by either another (different) server control or by the developer who wants to use jQuery for something outside of the server control.
How do I get the server control to not load the script if the developer already loaded it?
I have an ASP.Net control that injects a javascript pageLoad function. I also have a pageLoad function directly on the page. I can't seem to get them both to fire. Are you limited to only a single function with the same name in javascript?
Yes... Like most languages, JavaScript requires symbols to be unique within their scope. In JavaScript, if you create multiple definitions for a function within a given scope, then the last one to be defined "wins" - it will be as though the previous definitions never existed.
What you need to do, in order to make your redundant pageLoad function work, is to use the Sys.Application.add_load() method. Using it, you can attach as many handlers as you want to the page load event. What's more, you can use anonymous function to add in the add_load method. Doing this will guarantee you that there is no danger of to handlers with duplicate names. Example:
StringBuilder sb = new StringBuilder();
sb.Append("Sys.Application.add_load(");
sb.Append("function() { alert('page load'); });");
ClientScript.RegisterStartupScript(this.GetType(), "Page_Load", sb.ToString(), true);
You can as easily use the Sys.Application.add_load on the client side, you can even add the same handler more than once. This will result in firing the same function multiple times :)
I have to disagree with Shog9...
I know it's possible to have multiple $(document).ready(f(n)) calls in a single document, with each being called in turn when the DOM finishes loading. I don't believe that multiple calls to ClientScript.RegisterStartupScript() cause any issues either.