I have four same UserControls inserted into Default.aspx. I want to write the data into HiddenField and write this data into Label1 using javascript.
The method only works for the last loaded UserControl – HiddenFieldLoader3.
Why the method does not work in all usercontrols? How can i fix my code?
Default.aspx
<%@ Register Src="~/HiddenFieldLoader.ascx" TagPrefix="uc1" TagName="HiddenFieldLoader" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Default.aspx</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="HiddenFieldLoader.js"></script>
</head>
<body>
<form id="form1" runat="server">
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader1" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader2" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader3" />
</form>
</body>
</html>
UserControl: HiddenFieldLoader.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HiddenFieldLoader.ascx.cs" Inherits="NewControls.HiddenFieldLoader" %>
<script type="text/javascript">
HFLoader.declareVariables("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<input type="button" ID="Button1" value="Save" runat="server" />
<input type="button" ID="Button2" onclick="HFLoader.showEvent();" value="Show" runat="server" />
Javascript file: HiddenFieldLoader.js
HFLoader = {
button: null,
hiddenField: null,
label: null,
declareVariables: function (btn, hf, label) {
HFLoader.button = btn;
HFLoader.hiddenField = hf;
HFLoader.label = label;
},
///////SHOW EVENT
showEvent: function () {
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
},
//////!SHOW EVENT
saveHiddenField: function (data) {
$("#" + HFLoader.hiddenField).val(data);
},
buttons: function () {
$("#" + HFLoader.button).click(function () {
var datatest = "Data from button ID: " + $(this).attr("id");
HFLoader.saveHiddenField(datatest);
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
return false;
});
},
init: function () {
$(function () {
HFLoader.buttons();
});
}
};
HFLoader.init();
It doesn’t work because you’re using a single instance variable,
HFLoader, and not an instance.So one way to fix it is to wrap your
HFLoaderin a closer (function, local scope) so that the object is scoped per method call. In the example below, I wrapped theHFLoadervariable in a creator function. Then, each call toHFLoaderCreatorwill produce a different version (instance) of theHFLoaderobject. The reason I chose to do it this way instead of creating a true JS class was because it required minimal code changes to demonstrate how it could be done.Edit. Let’s also say you want to recall the HFLoader at a later date to call on things, such as the
saveHiddenFieldmethod. To do this, I’ve done 2 this. 1) I’ve addeddata('HFLoader')to the three elements passed in, so you can use any one of them to recall theHFLoadersettings. And 2) I’ve added custom events that you can trigger to call the methods. These two options show two different ways that jQuery plugin developers use to allow access to underlying structures.So now to make use of it all. In JS, if you wanted to look up the HFLoader data based on the Button1 ID, you might do something like this:
If you wanted to use ButtonID1 to trigger the custom event, which would ultimately call the showEvent method, you could do:
And if you wanted to do it inline, like your first example…
Although I’d highly recommend instead using JS to wire an event to Button2, such as:
That way it’s not inline script. Overall, the script for HFLoader is a bit hacked together. I’d recommend taking a look at the examples I’ve put together to extract the pieces of useful information and consider rethinking and/or rewriting the way you’re doing things. Your brain is pushing you towards some kind of “global” view, or some kind of automatically scoped variable called HFLoader. But if you have 5 instances on a page, then you really want instances of some HFLoader object and not some global concept of HFLoader. It’s like creating a new instance of a class instead of using a static or singleton instance of a class — two very different concepts!
I hope this helps.