Optopidioky
New Member
I have an issue with a .NET updatepanel updating when I don't want it to.I am using a combination of .NET Ajax and Twitter Bootstrap Javascript. I have two update panels on a page (You will notice both panels have ChildrenAsTriggers set to false and UpdateMode set to conditional, hence the fact that I'm at a loss!!)
ANEL 1:\[code\] <asp:UpdatePanel ID="upAreas" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <asp:Literal ID="litEmptyAreas" runat="server" Text="You currently have no goals or actions." Visible="false" /> <asp:Repeater ID="rptAreas" runat="server" OnItemDataBound="getAreaGoals" > <ItemTemplate> <div class="accordion-group" id="areagroup"> <div class="accordion-heading area-heading"> <a class="accordion-toggle" data-toggle="collapse" href='http://stackoverflow.com/questions/14085196/#collapse-<%# Eval("area_id") %>' > <div class="areatitle"> <asp:Literal ID="litAreaTitle" runat="server" Text='<%# Eval("area_title") %>' /> <!-- <span class="areacreatedate"><asp:Literal ID="litAreaCreateDate" runat="server" Text='<%# "created " + String.Format("{0:dd MMMM yyyy}", Eval("area_createdate")) %>' /></span>--> </div> </a> <div class="areaicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white areaiconplus"></i></a> <!--<a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-file icon-white areaiconlist"></i></a>--> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white areaiconeye"></i></a> </div> </div> <div id='collapse-<%# Eval("area_id") %>' class="accordion-body collapse"> <div class="accordion-inner"> <asp:Literal ID="litEmptyGoals" runat="server" Text="You currently have no goals or actions for this life area." Visible="true" /> <asp:Repeater ID="rptGoals" runat="server" OnItemDataBound="setUpGoals" > <ItemTemplate> <div class="theGoals clearfix"> <span class="goalid"><%# Eval("goal_id") %></span> <span class="goaltitle"><asp:Literal ID="theGoal" runat="server" Text='<%# Eval("goal_title") %>' /></span> <div class="goalicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white goal_iconplus"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white goal_iconeye"></i></a> </div> <span class="goalduedate"><asp:Literal ID="theDuedate" runat="server" Text='<%# "<span>Due:</span> " + String.Format("{0:dd MMM yy}", Eval("goal_duedate")) %>' Visible="true" /></span> </div> </ItemTemplate> </asp:Repeater> </div> </div> </div> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel>\[/code\]This is populated at Page_Load, but may need to be updated later in the event of a user adding a new item.When the user clicks on a div in this update panel, it should up date the second update panel on the page. (FYI The panels are not nested)PANEL 2: \[code\]<asp:UpdatePanel ID="upActionlist" runat="server" UpdateMode="Conditional" OnLoad="getActions" ChildrenAsTriggers="false"> <ContentTemplate> <div class="listheading"> <div class="goaltitle"> <asp:Literal ID="litGoalTitle" runat="server" Text="Nationally Recognised Consultancy" /> </div> <div class="goalicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white goaliconplus"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white goaliconeye"></i></a> </div> </div> <div class="listinner"> <asp:Literal ID="litEmptyActions" runat="server" Text="You currently have no actions to view." Visible="true" /> <asp:Repeater ID="rptActions" runat="server" OnItemDataBound="setUpActions"> <ItemTemplate> <div class="theActions clearfix"> <div class="actiontitle"> <span class="actionid"><%# Eval("item_id") %></span> <asp:Literal ID="theAction" runat="server" Text='<%# Eval("item_title") %>' /> </div> <div class="actionicons"> <!--<a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-th-list icon-white actioniconlist"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-file icon-white actioniconnote"></i></a>--> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white actioniconeye"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-check icon-white actioniconcomplete"></i></a> </div> <div class="actiondate"> <span class="actionduedate"><asp:Literal ID="theActionduedate" runat="server" Text='<%# "<span>Due:</span> " + String.Format("{0:dd MMM yy}", Eval("item_duedate")) %>' Visible="true" /></span> </div> </div> </ItemTemplate> </asp:Repeater> </div> </ContentTemplate> </asp:UpdatePanel>\[/code\]The update is called using the following javascipt click event added to the DIV in the first update panel in document.ready:\[code\] $('.theGoals').click(function () { //remove from all goal other classes $('.theGoals').removeClass('active'); // "this" is the current element in the loop $(this).addClass('active'); // Load content __doPostBack('<%=upActionlist.ClientID %>', $(this).children('.goaltitle').text() + "|" + $(this).children('.goalid').text()); });\[/code\]When this javascript it run, it updates both panels, not just the second panel. Any help gratefully received, as this is driving me mad.
ANEL 1:\[code\] <asp:UpdatePanel ID="upAreas" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <asp:Literal ID="litEmptyAreas" runat="server" Text="You currently have no goals or actions." Visible="false" /> <asp:Repeater ID="rptAreas" runat="server" OnItemDataBound="getAreaGoals" > <ItemTemplate> <div class="accordion-group" id="areagroup"> <div class="accordion-heading area-heading"> <a class="accordion-toggle" data-toggle="collapse" href='http://stackoverflow.com/questions/14085196/#collapse-<%# Eval("area_id") %>' > <div class="areatitle"> <asp:Literal ID="litAreaTitle" runat="server" Text='<%# Eval("area_title") %>' /> <!-- <span class="areacreatedate"><asp:Literal ID="litAreaCreateDate" runat="server" Text='<%# "created " + String.Format("{0:dd MMMM yyyy}", Eval("area_createdate")) %>' /></span>--> </div> </a> <div class="areaicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white areaiconplus"></i></a> <!--<a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-file icon-white areaiconlist"></i></a>--> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white areaiconeye"></i></a> </div> </div> <div id='collapse-<%# Eval("area_id") %>' class="accordion-body collapse"> <div class="accordion-inner"> <asp:Literal ID="litEmptyGoals" runat="server" Text="You currently have no goals or actions for this life area." Visible="true" /> <asp:Repeater ID="rptGoals" runat="server" OnItemDataBound="setUpGoals" > <ItemTemplate> <div class="theGoals clearfix"> <span class="goalid"><%# Eval("goal_id") %></span> <span class="goaltitle"><asp:Literal ID="theGoal" runat="server" Text='<%# Eval("goal_title") %>' /></span> <div class="goalicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white goal_iconplus"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white goal_iconeye"></i></a> </div> <span class="goalduedate"><asp:Literal ID="theDuedate" runat="server" Text='<%# "<span>Due:</span> " + String.Format("{0:dd MMM yy}", Eval("goal_duedate")) %>' Visible="true" /></span> </div> </ItemTemplate> </asp:Repeater> </div> </div> </div> </ItemTemplate> </asp:Repeater> </ContentTemplate> </asp:UpdatePanel>\[/code\]This is populated at Page_Load, but may need to be updated later in the event of a user adding a new item.When the user clicks on a div in this update panel, it should up date the second update panel on the page. (FYI The panels are not nested)PANEL 2: \[code\]<asp:UpdatePanel ID="upActionlist" runat="server" UpdateMode="Conditional" OnLoad="getActions" ChildrenAsTriggers="false"> <ContentTemplate> <div class="listheading"> <div class="goaltitle"> <asp:Literal ID="litGoalTitle" runat="server" Text="Nationally Recognised Consultancy" /> </div> <div class="goalicons"> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-plus-sign icon-white goaliconplus"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white goaliconeye"></i></a> </div> </div> <div class="listinner"> <asp:Literal ID="litEmptyActions" runat="server" Text="You currently have no actions to view." Visible="true" /> <asp:Repeater ID="rptActions" runat="server" OnItemDataBound="setUpActions"> <ItemTemplate> <div class="theActions clearfix"> <div class="actiontitle"> <span class="actionid"><%# Eval("item_id") %></span> <asp:Literal ID="theAction" runat="server" Text='<%# Eval("item_title") %>' /> </div> <div class="actionicons"> <!--<a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-th-list icon-white actioniconlist"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-file icon-white actioniconnote"></i></a>--> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-eye-open icon-white actioniconeye"></i></a> <a href="http://stackoverflow.com/questions/14085196/#" data-toggle="modal" data-target= "#myModal"><i class="icon-check icon-white actioniconcomplete"></i></a> </div> <div class="actiondate"> <span class="actionduedate"><asp:Literal ID="theActionduedate" runat="server" Text='<%# "<span>Due:</span> " + String.Format("{0:dd MMM yy}", Eval("item_duedate")) %>' Visible="true" /></span> </div> </div> </ItemTemplate> </asp:Repeater> </div> </ContentTemplate> </asp:UpdatePanel>\[/code\]The update is called using the following javascipt click event added to the DIV in the first update panel in document.ready:\[code\] $('.theGoals').click(function () { //remove from all goal other classes $('.theGoals').removeClass('active'); // "this" is the current element in the loop $(this).addClass('active'); // Load content __doPostBack('<%=upActionlist.ClientID %>', $(this).children('.goaltitle').text() + "|" + $(this).children('.goalid').text()); });\[/code\]When this javascript it run, it updates both panels, not just the second panel. Any help gratefully received, as this is driving me mad.