I have an issue where I have exhausted my google search results that seem relevant to my issue so I'm looking for some specific help. I have a user control which includes several dropdown lists, two of which are visible depending on the value of another.
I have incorporated jQuery to hide and show the dropdown lists accordingly. When I add one of these user controls to a page it runs as just as desired, but once I add a second user control of the same type on the same page the selection of one dropdown effects
all the user controls of that type in the page. I have tried several different strategies in my jQuery code to effect a single control relative to the dropdown change event and cannot make it work, what am I missing or doing wrong here? Below is the code for
my last attempt simplified for concept.
You could try using an updatepanel to put these in. Then if you used server side code to hide/show them based on the dropdown change it should only apply to that user control.
Marked as answer by greisenj on Feb 09, 2012 06:32 PM
You can solve this problem by doing some arrangement.
First remove the script file from the usercontrol and add it to the containing page. Other wise your jQuery code will get initialized multiple times as equal to the number of controls.
Add the content of your usercontrol in a container div like this-
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Using jQuery in a User Control with Multiple Control Instances on a Page.ascx.cs" Inherits="Using_jQuery_in_a_User_Control_with_Multiple_Control_Instances_on_a_Page" %>
<div class="ddlContainer">
<asp:DropDownList ID="ddFaCode" runat="server" >
<asp:ListItem Value="R-VIBRO" Text="R-VIBRO"></asp:ListItem>
<asp:ListItem Value="R-PU" Text="R-PU"></asp:ListItem>
</asp:DropDownList>
<div class="PuHours">
<asp:DropDownList ID="ddPuHours" runat="server">
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="0.01">< 500</asp:ListItem>
<asp:ListItem Value="0.02">1000</asp:ListItem>
<asp:ListItem Value="0.03">1500</asp:ListItem>
</asp:DropDownList>
</div>
<div class="ElastomerQuality">
<asp:DropDownList ID="ddElastomerQuality" runat="server">
<asp:ListItem Value="0">New</asp:ListItem>
<asp:ListItem Value="0.02">Good</asp:ListItem>
<asp:ListItem Value="0.03">Decent</asp:ListItem>
<asp:ListItem Value="0.04">Bad</asp:ListItem>
</asp:DropDownList>
</div>
</div>
asteranup, this works great! Thank you for responding and giving your insight as I am just learning the ins and outs of jQuery and how things work with asp.NET objects. Just curious though, I was leaning towards moving the jQuery out of the user control
myself but thought it would take away from the point of creating the usercontrol in the first place.
I'm curious to know if it common practice to have your jQuery included outside of a usercontrol that is implementing the script? I would think it would take away from the simplicity of using the control, seeing as you must require the scirpt to be included
as well as the implementation of the control on any page you are trying to use the control in. I guess I always thought of usercontrols as a all encompassing compact unit.
The reson I have taken the script out of usercontrol is because as you can implement multiple instances of the user control in the same page. If you have the script in the usercontrol then multiple times the script will get executed.
But if you want the script to be inside the usercontrol. You can do one thing add a JavaScript global variable may be in some global js file other theen the current, set the variable to false. And inside the script after the script gets executed set the
variable to true and at the begining of the scriptcheck the variable if false then acrivate it again like below-
Thanks for the advice asteranup, the script is working well. I have ran into another issue with the same script when using it with setup you first described, but adding the user controls inside an update panel for dynamic addition and removal. The only time
the script works is on a full page postback, other than that it is ignored by the controls in the updatepanl.
From my rookie knowledge, I thought the script should be registered with the ScriptManager.RegisterClientScriptInclude to be called with every postback of the updatepanel, but this is not working. When I register the script with the ScriptManager it works
at first, but once there is a postback within the user control, which is now inside the updatepanel, the script works for a brief second and then all hidden objects become visible? Can you provide anymore insight? It is much appreicated.
I also found some pages describing the use of the jQuery .live() method which has been superceded by the .on() method. These are very new to me, I have never seen or used them before. Not completely sure I understand them yet. Please let me know what you
recommend as a solution, as for now I am using the pageLoad() in the script file with the script include in the page.
Marked as answer by greisenj on Feb 16, 2012 04:02 AM
Whenever we attach an event say onclick. During the page load it find the element based on selector and attach the event. Now simply click event attached will work properly. Now suppose your paged is loaded and rendered. If you add any elemet dynalically
after the page has already rendered. In that case, even the selector matches the click event will not get applied to the newly added element. Live event comes in here. If you use live event to attach any event, everytime there any change in the DOM, it find
the changes and uses the selector to find the newly added control and bud the desired event.
As you have used pageLoad to solve your problem. There is one more way you can solve is using add_EndRequest check the following post-
I read through the jQuery documentation on the .live() method, but I am just learning jQuery and was not able to update the code you gave me in the earlier post with the .live() method successfully given my inefficiencies with the syntax. I did however get
the gist of how a live event attachment works compared to the standard event attachment. I did see some other pages in my search referencing the add_EndRequest method, thank you for the suggestion and your help.
greisenj
Member
47 Points
20 Posts
Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 09, 2012 06:56 AM|LINK
I have an issue where I have exhausted my google search results that seem relevant to my issue so I'm looking for some specific help. I have a user control which includes several dropdown lists, two of which are visible depending on the value of another. I have incorporated jQuery to hide and show the dropdown lists accordingly. When I add one of these user controls to a page it runs as just as desired, but once I add a second user control of the same type on the same page the selection of one dropdown effects all the user controls of that type in the page. I have tried several different strategies in my jQuery code to effect a single control relative to the dropdown change event and cannot make it work, what am I missing or doing wrong here? Below is the code for my last attempt simplified for concept.
User Control:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductSalesLine.ascx.cs" Inherits="SalesCalculator.ProductSalesLine" %> <script src="Scripts/ProductSalesLine.js" type="text/javascript"></script> <asp:DropDownList ID="ddFaCode" runat="server" AutoPostBack="True"> <asp:ListItem Value="R-VIBRO" Text="R-VIBRO"></asp:ListItem> <asp:ListItem Value="R-PU" Text="R-PU"></asp:ListItem> </asp:DropDownList> <div class="PuHours"> <asp:DropDownList ID="ddPuHours" runat="server"> <asp:ListItem Value="0">0</asp:ListItem> <asp:ListItem Value="0.01">< 500</asp:ListItem> <asp:ListItem Value="0.02">1000</asp:ListItem> <asp:ListItem Value="0.03">1500</asp:ListItem> </asp:DropDownList> </div> <div class="ElastomerQuality"> <asp:DropDownList ID="ddElastomerQuality" runat="server"> <asp:ListItem Value="0">New</asp:ListItem> <asp:ListItem Value="0.02">Good</asp:ListItem> <asp:ListItem Value="0.03">Decent</asp:ListItem> <asp:ListItem Value="0.04">Bad</asp:ListItem> </asp:DropDownList> </div>User Control Code Behind:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ddFaCode.Items.Insert(0, new ListItem("Select One", "Select One")); ddFaSubclassCode.Items.Insert(0, new ListItem("Select One", "Select One")); } }jQuery Code (ProductSalesLine):
$(function () { var identifierClass = $(this).parents('div:first').attr('class'); if ($('.ddFaCode').val() == 'R-VIBRO') { $('.PuHours').hide(); $('.ElastomerQuality').show(); } else if ($('.ddFaCode').val() == 'R-PU') { $('.PuHours').show(); $('.ElastomerQuality').hide(); } else { $('.PuHours').hide(); $('.ElastomerQuality').hide(); } $(identifierClass).children('.ddFaCode').change(function () { if ($(identifierClass).children('.ddFaCode').val() == 'R-VIBRO') { $(this).next('.ElastomerQuality').show(); } else if ($(identifierClass).children('.ddFaCode').val() == 'R-PU') { $(this).next('.PuHours').show(); } else { $(this).next('.PuHours').hide(); $(this).next('.ElastomerQuality').hide(); } });User Control Implementation:
usercontrol user controls JQuery multiple
breath2k
Contributor
2101 Points
821 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 09, 2012 10:58 AM|LINK
You could try using an updatepanel to put these in. Then if you used server side code to hide/show them based on the dropdown change it should only apply to that user control.
asteranup
All-Star
30184 Points
4906 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 09, 2012 02:04 PM|LINK
Hi,
You can solve this problem by doing some arrangement.
First remove the script file from the usercontrol and add it to the containing page. Other wise your jQuery code will get initialized multiple times as equal to the number of controls.
Add the content of your usercontrol in a container div like this-
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Using jQuery in a User Control with Multiple Control Instances on a Page.ascx.cs" Inherits="Using_jQuery_in_a_User_Control_with_Multiple_Control_Instances_on_a_Page" %> <div class="ddlContainer"> <asp:DropDownList ID="ddFaCode" runat="server" > <asp:ListItem Value="R-VIBRO" Text="R-VIBRO"></asp:ListItem> <asp:ListItem Value="R-PU" Text="R-PU"></asp:ListItem> </asp:DropDownList> <div class="PuHours"> <asp:DropDownList ID="ddPuHours" runat="server"> <asp:ListItem Value="0">0</asp:ListItem> <asp:ListItem Value="0.01">< 500</asp:ListItem> <asp:ListItem Value="0.02">1000</asp:ListItem> <asp:ListItem Value="0.03">1500</asp:ListItem> </asp:DropDownList> </div> <div class="ElastomerQuality"> <asp:DropDownList ID="ddElastomerQuality" runat="server"> <asp:ListItem Value="0">New</asp:ListItem> <asp:ListItem Value="0.02">Good</asp:ListItem> <asp:ListItem Value="0.03">Decent</asp:ListItem> <asp:ListItem Value="0.04">Bad</asp:ListItem> </asp:DropDownList> </div> </div>And use the following JavaScript-
$(function () { $(".ddlContainer").each(function () { div(this); $("select[id*=ddFaCode]").change(function () { div($(this).closest(".ddlContainer")[0]); }); }); }); function div(inputDiv) { if ($(inputDiv).find('select[id*=ddFaCode]').val() == 'R-VIBRO') { $(inputDiv).find('.PuHours').hide(); $(inputDiv).find('.ElastomerQuality').show(); } else if ($(inputDiv).find('select[id*=ddFaCode]').val() == 'R-PU') { $(inputDiv).find('.PuHours').show(); $(inputDiv).find('.ElastomerQuality').hide(); } else { $(inputDiv).find('.PuHours').hide(); $(inputDiv).find('.ElastomerQuality').hide(); } }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
greisenj
Member
47 Points
20 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 09, 2012 06:33 PM|LINK
breath2k, this would work, but I think I'm going to stick with client side script on this one.
greisenj
Member
47 Points
20 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 09, 2012 06:45 PM|LINK
asteranup, this works great! Thank you for responding and giving your insight as I am just learning the ins and outs of jQuery and how things work with asp.NET objects. Just curious though, I was leaning towards moving the jQuery out of the user control myself but thought it would take away from the point of creating the usercontrol in the first place.
I'm curious to know if it common practice to have your jQuery included outside of a usercontrol that is implementing the script? I would think it would take away from the simplicity of using the control, seeing as you must require the scirpt to be included as well as the implementation of the control on any page you are trying to use the control in. I guess I always thought of usercontrols as a all encompassing compact unit.
asteranup
All-Star
30184 Points
4906 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 10, 2012 06:10 AM|LINK
hi,
The reson I have taken the script out of usercontrol is because as you can implement multiple instances of the user control in the same page. If you have the script in the usercontrol then multiple times the script will get executed.
But if you want the script to be inside the usercontrol. You can do one thing add a JavaScript global variable may be in some global js file other theen the current, set the variable to false. And inside the script after the script gets executed set the variable to true and at the begining of the scriptcheck the variable if false then acrivate it again like below-
var glovalFlag = false; $(function () { if (!glovalFlag) { $(".ddlContainer").each(function () { div(this); $("select[id*=ddFaCode]").change(function () { div($(this).closest(".ddlContainer")[0]); }); }); glovalFlag = true; } });Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
greisenj
Member
47 Points
20 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 15, 2012 04:37 PM|LINK
Thanks for the advice asteranup, the script is working well. I have ran into another issue with the same script when using it with setup you first described, but adding the user controls inside an update panel for dynamic addition and removal. The only time the script works is on a full page postback, other than that it is ignored by the controls in the updatepanl.
From my rookie knowledge, I thought the script should be registered with the ScriptManager.RegisterClientScriptInclude to be called with every postback of the updatepanel, but this is not working. When I register the script with the ScriptManager it works at first, but once there is a postback within the user control, which is now inside the updatepanel, the script works for a brief second and then all hidden objects become visible? Can you provide anymore insight? It is much appreicated.
greisenj
Member
47 Points
20 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 16, 2012 04:02 AM|LINK
After some research I found this guide, which describes three ways to fix my issue:
http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx
I also found some pages describing the use of the jQuery .live() method which has been superceded by the .on() method. These are very new to me, I have never seen or used them before. Not completely sure I understand them yet. Please let me know what you recommend as a solution, as for now I am using the pageLoad() in the script file with the script include in the page.
asteranup
All-Star
30184 Points
4906 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 16, 2012 04:35 AM|LINK
Hi,
Whenever we attach an event say onclick. During the page load it find the element based on selector and attach the event. Now simply click event attached will work properly. Now suppose your paged is loaded and rendered. If you add any elemet dynalically after the page has already rendered. In that case, even the selector matches the click event will not get applied to the newly added element. Live event comes in here. If you use live event to attach any event, everytime there any change in the DOM, it find the changes and uses the selector to find the newly added control and bud the desired event.
As you have used pageLoad to solve your problem. There is one more way you can solve is using add_EndRequest check the following post-
http://forums.asp.net/p/1759576/4789371.aspx/1?Re+JQuery+Code+not+working+properly+after+cascading+dropdownlist+is+used+
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
greisenj
Member
47 Points
20 Posts
Re: Using jQuery in a User Control with Multiple Control Instances on a Page
Feb 16, 2012 05:32 AM|LINK
I read through the jQuery documentation on the .live() method, but I am just learning jQuery and was not able to update the code you gave me in the earlier post with the .live() method successfully given my inefficiencies with the syntax. I did however get the gist of how a live event attachment works compared to the standard event attachment. I did see some other pages in my search referencing the add_EndRequest method, thank you for the suggestion and your help.