Web User Control With Javascript Used Multiple Times On A Page - How To Make Javascript Functions Point At The Correct Controls
Apr 12, 2010
I think I summed up the question in the title. Here is some further elaboration...I have a web user control that is used in multiple places, sometimes more than once on a given page.The web user control has a specific set of JavaScript functions (mostly jQuery code) that are containted within *.js files and automatically inserted into page headers.However, when I want to use the control more than once on a page, the *.js files are included 'n' number of times and, rightly so, the browser gets confused as to which control it's meant to be executing which function on.What do I need to do in order to resolve this problem? I've been staring at this all day and I'm at a loss.
I have a page with three HTML labels and their corresponding ASP.NET gridviews contained within divs. Now while learning jQuery, I am trying to achieve two things:1. Change the css class of the lables upon mouse hover/out.2. Slide up/down the grid div upon clicking of the labels.It looks to be working as expected, but I wish to know if I am doing it the right way.My complete jQuery code is:
And I am calling these function from onmouseover, onmouseout and onclick events of the label controls passing in the label ID as parameter. As an example:
<label id="lblWebComp" class="gridLabelDefault" onmouseover="ColorChange('lblWebComp')" onmouseout="ColorChange('lblWebComp')" onclick="ShowHide('gvDivWC')"> Web Components </label>
Kindly let me know if this is the best way to achieve these effects? Don't I have to right the document ready function in the jQuery code?
I have a user control which opens a new window for some item selection. Once an item is selected on that window, the item ID should be passed to a callback javascript function in the user control. In order to have a unique callback function name in the user control (it may have multiple instances on the same page), I added the user control ID to the function name as follows (defined in the ascx file):
function OnItemSelection_<%=this.ID%>(selectedItemID) { OnItemSelection("<%=SomeControl.ClientID%>", selectedItemID) } Where OnItemSelection is defined in an external js file: function OnItemSelection(controlID, selectedItemID) { $(controlID).do_something(selectedItemID); } The issue is that now I'm not sure how the new page can call the "right" function (of the user control instance where it was opened from). The only idea I have in mind so far is passing the name of the callback function in the query string: var CallbackFunction = function(selectedItemID) { window.opener.<%=Request.QueryString["CallbackFunctionName"]%>(selectedItemID); } or maybe just the opening user control ID: var CallbackFunction = function(selectedItemID) { window.opener.OnItemSelection_<%=Request.QueryString["UserControlID"]%>(selectedItemID); }
My questions are:
1) Is it a bad practice passing javascript function names (or user control IDs) like that (I suspect it is)?
2) What could be better way to handle this scenario? Edit: Another way I'm considering now is declaring a global variable in the user control (registering it from the code behind so it'll appear only once). Then, when opening the new window, it's possible to assign the relevant function to it (OnItemSelection_<%=this.ID%>), and call it from the new window. Seems much cleaner than passing user control data through the query string.
I'm using the local database functionality in Chrome and Safari and what I do when I want to save this to a remote database is to create a hidden textfield and then using JSON to stringify each row. In the code behind I then parse each JSON object and insert it into the list. What I want to do now is to delete these rows from the local database. I have a JavaScript function called deletePatient:
I have a webcontrol that will exist multiple time on a page. I have some javascript (JQuery) in the control and when I have multiple controls on a page the functions get confused.I have seen plenty of stuff on why this is the case - basically my functions use set id's but i need to somehow make them relative.An example of a function ...
function showUploader() { var img = $('#<%=ImgID.ClientID %>'); $('#<%=UploaderIFrame.ClientID %>').attr('src', '<%=ResolveUrl("~/Controls/EditableImageControl/ImageUploader/ImageUploader.aspx") %>' +[code]....
how to get references to the html elements in the web control?
I have an application which use some javascript functions,As all javascripts include in Masterpage, most of them which comes withpage are not necessary, and some of those are repeated ( cause used in some different JS file. )So I want to check if there is a way to determine duplicate functions and remove them ?
I want a browser to go full screen as soon as my page loads. Is it possible in javascript. I know the shortcut key for this F11 but requirement is on page load only.
After reading the solution provided below. I achieved full screen but here i got a trap. I was using timer to make my page postback to get fresh data after every 5 second. And here I found after every 5 sec new window opens up but I want full screen to go only once and next time content gets refreshed there itself.
The script are put in the following and the block is in the .ascx page.
<script type="text/javascript"> </script>
However, the function UserControlNameInit() does not run when the page loads. It is showing in the page source. I can still call this function through FireBug console by manually typing the name of the function.
I did the same way with other user controls, and it works. Just 1-3 user controls are not working...
I have created a Web Control in ASP for use in integrating with Telligent CommunityServer. The control is written in ASP with some 10 lines of C# backend for controlling visibility of the UI elements based on permissions, but I'd say 90% of the functionality is straight-up Javascript. The control works beautifully, until you drop two instances of the Control on the same page--since they reference the exact same Javascript functions, only one control works. How can I take this functionality that I have, this 1200 lines of Javascript, and make it so that each instance of the control can reference its each unique instance of Javascript?
I am using slider extender in an user control. I am adding that user control 2 times in a page. At that it gives me an error saying "Two components with the same id 'Slider1' can't be added to the application."
I am using Latest Version of AjaxToolkit and VS 2008 with .NET FWK 3.5.
I hava a page default.aspx having master page abc.aspx and web user control login.ascx i want to call perform simple alert function on login button but not on client click event. For e.g
Protected Sub BtnMyIpLogin_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnMyIpLig.Click
'Some Validation part here for user login
'then my if condition like
If flag_alert = 0 Then Page.ClientScript.RegisterStartupScript(Me.GetType(), "btnflag", "alert('Your Download / View Limit Exceed More Than 90%');", True) End If
For performance reasons, I would like to put some code in javascript but am concerned that a user may pick up some proprietary formulas. Is it even possible to hide it or scramble it to the user?
I am trying to call some javascript functions which I ahve written in some file. Eg.
function OpenPopup() { alert("OpenPopUp"); return false; }
when I call this from button from OnClientClick = "OpenPopup()" it is not called but when I put this function on MasterPage it is able to call the function.I added this is the MasterPages's Head
I've looked at about 5 Questions here on SOF and haven't really found a useful answer for this. How am I supposed to invoke my javascript functions from client-side events in my .ascx controls? Here is my .ascx file.. what most the answers have led me to:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UIMenu.ascx.cs" Inherits="controls_UIMenu" %> <script language="javascript" type="text/javascript"> function insetItem(myMenu) { myMenu.setAttribute("class", "myClass");.......
I'm getting different errors when doing it this way. ".....ascx does not contain a definition for "insetItem"", and my other pages that use this file don't recognize it anymore. When I try to put the js on the actual .aspx pages that will be using it, I get the same no definition error.
I just started learning jscript, still pretty noob. I'm trying to make it so when the user down clicks a menu item, I want that item's borderstyle to change to "inset". I'm not sure how to change that attribute for the specific item that gets clicked either in javascript >_< but that's another question.
I wanted to use some javascript functions in a ASP.net 3.5 web site. I have added a javascript1.js page in the Sites Folder with a Javascript Test function.
I'm not familier with Javascript, and I have to convert a Project's Javascript codes to Jquery scripts.
ofcourse I'm not project leader or something like it, I'm just elaborating that this process may has what kind of issues and may face with what kind of needness ?
So if you know any solution to convert Javascript Functions to Jquery ones
I have quite a number of user controls that I need to embed in Umbraco macros. Each user control has quite a bit of in page javascript that needs loaded into the page.
I have been building up the javascript with StringBuilder.Appendline then registering a startup script with code behind but this stinks and I feel there has to be a better way of going about this.
I have a JavaScript-based timeline which needs to use data from an SQL server. The queries and the JSON conversions have been worked out in the form of C#.NET functions within a code file related to an .aspx page. So for a complete newbie to ASP.NET, how do you set up a function call like this from JavaScript?I would love it if someone had some simple example code I could learn/get some pointers from.Edit: I am using .NET 3.5
I'm building this small control. It should detect client resolution and set height and width values within two separated HtmlInputHidden controls. But tester property is not getting values froms this control.
[ToolboxData("<{0}:UIControlResolution runat=server></{0}:UIControlResolution>")] public class UIControlResolution : Control { HtmlInputHidden _txtwidth = new HtmlInputHidden(); HtmlInputHidden _txtheight = new HtmlInputHidden();
All of my scripts run fine in my Master page, and all of the functions run when called in the content pages, but for some reason, all of the sudden contentPageLoad() doesn't run anymore in any of them. I am sure that I have changed something somewhere, but I can't figure out what it is.
