My application has one master page and 5 child page to load inside it.
Contents of Master Page:
1. UserControl (Drop Down)
2. 5 Main Tabs (Child Page loads for every Main Tab Click).
Initially when application loads, all the data is loaded for Drop Down and one of the child page .
so whenever a click on one of the main tab link (its href),so whole page gets reloaded and data will be loaded again for all the controls of the page.
so , i don't want to load the data for my drop down again and again on every Main Tab Click.
As i am working on legacy application every thing is coded, i can't use Update panel for this as a solution because it requires lot of code change.
so i am looking for a solution to keep my Drop Down Data static across all the tabs, even if it refreshes for every tab click.
Why not hide the information in a div and display only each div when its clicked?
...this will keep the links static and only navigate between the pages.
Put all the code on one page:
CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
HTML:
<!-- All static Page data here -->
<ul>
<!-- Menu Links -->
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page X</li>
</ul>
<div id="content">
<div id="div1">
<!-- All Page 1 Data Here -->
</div>
<div id="div2">
<!-- All Page 2 Data Here -->
</div>
<div id="div3">
<!-- All Page 3 Data Here -->
</div>
<div id="divX">
<!-- All Page X Data Here -->
</div>
</div> <!-- Closing the content div tag -->
Let me know how you get on :)
Good Luck
IMO you need to use a common place to store your data , you may use session
fill the session with data on app start -- now on every page refresh / page load keep a check if session has data don't bind the drop down (in user control).
Related
I hope this is a simple one for someone to answer.
If i have a button that allows a user to edit something on the page, they can click on
Edit this page
This then opens a modal on the page with the following DIV
<div id="editpage" class="modal" tabindex="-1" role="dialog">
This is the content in my modal
</div>
The issue I am having is that when I add a runat="server" to the modal's div tag, so that I can determine if the user can even see/inspect the page source if they are not a moderator,, that the modal no longer pops up when i click on my edit button.
Is there anything I can do so that I can still control if the modal is rendered from code-behind based on logic there, and still have the edit to modal click function still work without turning it into a server control.
Found the answer which was to wrap the modal div in another div or placeholder tag and then control that from the server side controls. This meant that the modal's div did not have it's ID modified due to the server side assignment and therefore I am now able to remove this markup entirely if the user is not a moderator.
<asp:Panel ID="editpage_panel" runat="server" Visible="false">
-- modal here
</asp:Panel>
I have a div inside the form tag of master page.
I want to change it dynamically as and when a page loads.
I am building a e-commerce web site where in I have a cart icon along with which I display the total amount corresponding to a user.
This Cart tag and the amount tag is inside the form tag of master page and I cannot find it from the code behind using HtmlGenericControl.
C# code
HtmlGenericControl myObject = new HtmlGenericControl();
myObject = (HtmlGenericControl)Master.FindControl("simpleCart_total");
Html code
<div class="ca-r">
<div class="cart box_1">
<a href="../ShoppingCart.aspx">
<h3> <div class="total">
<span class="simpleCart_total" runat="server" style="display:none"></span> </div>
<img src="/images/cart.png" alt=""/></h3>
</a>
How do i access the simpleCart_total from code behind of master page itself to change it accordingly.
Please Help
Thank You
I have a user control that has a GridView and when a user clicks on a row in this GridView the function OnSelectedIndexChanged is called, I'd like a modal to pop up after this occurs. I used the ScriptManager to invoke the script $('#seasonInfoModal').modal() which works in opening modals. The problem is it doesn't work when opening a modal which is defined within the same user control. The modal opens when it is inside the page.aspx , but doesn't open when inside the control .ascx. I have everything hooked up properly and have omitted some details. Here's what the overall code looks like
main page.aspx
<%# Page Title="" Language="C#" ... %>
<%# Register Src="~/Controls/MyControl.ascx" TagPrefix="ACT" TagName="GeneralADM" %>
<ACT:GeneralADM runat="server"" />
MyControl.ascx
<%# Language="C#" AutoWireUP="true" Codebehind="" Inherits="" %>
<div runat="server">
<!-- Seasonal Info-->
<div runat="server" id="seasonInfoModal" class="modal fade" role="dialog" draggable="true">
</div>
<!-- End seasonal info-->
<!-- Start of Season Edit Modal -->
<div id="seasonEditInfo" class="modal fade" role="dialog" draggable="false">
</div>
<!-- End of Season Edit Modal -->
<asp:GridView>
</asp:GridView>
</div>
In the code behind I try to open the modal like this
MyControl.ascx.cs
protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
ScriptManager.RegisterStartupScript(this,
this.GetType(),
"seasonInfoModal",
"$('#seasonInfoModal').modal();",
true);
}
issue
#seasonInfoModal doesn't popup instead a new modal is made with nothing inside it and the screen fades to dark on click. When I pull the #seasonInfoModal out of the control into the page where I am inserting the control itself, the modal actually pops up.
question
How can I open the modal #seasonInfoModal when it is inside the control from that control's codebehind specifically from inside OnSelectedIndexChanged function?
The problem may be caused by the ID mangling performed by ASP.NET. Since the modal div is a server control (as specified by runat="server"), its ID in the rendered HTML is not seasonInfoModal but something like MyControl1_seasonInfoModal. As a result, the Javascript selector $('#seasonInfoModal') cannot find it.
You can change the startup script code, and pass the value of seasonInfoModal.ClientID to the jQuery selector, to account for the ID mangling:
protected void OnSelectedIndexChanged(object sender, GridViewEventArgs e){
ScriptManager.RegisterStartupScript(this,
this.GetType(),
"seasonInfoModal",
string.Format("$('#{0}').modal();", seasonInfoModal.ClientID),
true);
}
Other alternatives to avoid ID mangling would be:
To remove the runat="server" attribute if you don't need to access the div control in code-behind
To add clientidmode="static" to the div.
To use a class name (with the corresponding jQuery class selector) instead of an ID for the modal div.
These 3 solutions, however, would not behave correctly if several instances of the user control are present in the form. The modal of the first instance would always be used, and in cases 1 and 2, several controls of the form would have the same ID.
I am using jQuery tabs. There are 8 tabs. In each tab there is a form. I am facing this problem: when user enter the data of a form (for example in 5th tab) after saving its come back to first tab. I want to come back on same tab after post back I tried this:
my asp code is this
<input type="hidden" runat="server" id="aid" value="0" />
<div class="inner-wrap">
<div class="container">
/a> </li>
<li>Content 5 </li>
tent">
Save the value of selected tab in cookie (or some other place) and then restore that value on page refresh.For saving the value of cookie you can check the following jquery plugin
jquery-cookie
$( ".selector" ).tabs({
active : $.cookie('activetab'),
activate : function( event, ui ){
$.cookie( 'activetab', ui.newTab.index(),{
expires : 10
});
}
});
i have a accordion control(using jQuery) on the page. When I insert accordion into an updatepanel, set a button outside the updatepanel as its trigger and click on the button the accordion stops working. If I remove the updatepanel, it starts working.
Why?
How can i fix this error?
Do i have to re-instantiate the accordion script/plugin, If yes then how?
<script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
},
onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="applemenu">
<div class="silverheader">Dynamic Drive</div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader">JavaScript Kit</div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader">CSS Drive</div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader">Coding Forums</div>
<div class="submenu">
Some random content here<br />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
When elements are removed from the DOM their event handlers go with them, even if you replace those with identical elements. You need to re-initialize the event handlers, or look into using jQuery's .live() functionality.
You need to maintain the structure of the Jquery widget.
I achieved what you want by surrounding the controls I want within the sub-divs of the accordion div with update panels.
Hence, you should maintain the following structure:
Accordion Div
Heading 3 caption for the sub div 1
div 1
update panel
div 1 contents that will be refreshed using Ajax technology.
And so on, of course you need the Script Manager so don't forget to insert one :)