We Keep Coding

Jquery ui Progressbar for every postback in asp.net

Can you help me on how to use Jquery UI Progress bar for every postback in asp.net? I really don't know how to start I'm new to Jquery UI. I have an UpdateProgress but it doesn't work on my jquery ui dialog so I wanted to try Jquery UI Progress bar. Any suggestion will be helpful! Thank you.
So far I have this code for the progressbar i don't know how to make it work like the UpdateProgress.
$(function() {
$( "#progressbar" ).progressbar({
value: false
});
ASP:
<div id="progressbar">
</div>
this is my existing code that does not work in my button inside of Jquery UI dialog.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center" align="center">
Processing Data, Please wait..
<img alt="" src="images/loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

AJAX Collapsible Panel Extender Code Behind

I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
<asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- First collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
Hey there
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
CollapsedImage="~/Images/downarrow.jpg"
ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
ScrollContents="true">
</asp:CollapsiblePanelExtender>
Any related research link would be appreciated. Thanks in advance.

This is possible.
In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.
In that you are supposed to do something like:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
More details here: http://forums.asp.net/p/1112899/1717195.aspx
You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.
Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.
Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+

Show and hide div in C# don't work

I'm working on a web application in C# .net, using twitter bootstrap in frontoffice.
In onClick button I need to show a div that contains a progressBar div and when the process finish, hide the div. I'm using this code:
web.aspx:
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
// on load web, this div is invisible
<div class="progress progress-striped active invisible" id="progressBar" runat="server">
<div class="bar" style="width: 90%;" id="percentProgresBar"></div>
</div>
And my web.aspx.cs:
protected void btnProcess_Click(object sender, EventArgs e){
// here change class to "visible"
progressBar.Attributes["class"] = "progress progress-striped active visible";
//--- all my process ----
//--- all my process ----
//when my process finish, hide the div again, change the css class to "invisible"
progressBar.Attributes["class"] = "progress progress-striped active invisible";
}
My problem is the div is visible when my process ends, not at the beginning. How can I resolve this? tTo make visible the div before --- all my process ---- and when finish that part of my code, to make the div invisible again.
Thanks for your help!!

You can try changing/converting your div to a server-side control by giving it an ID and add runat="server" , then use it in your code.

instead of using those classes, give the attribute Style="display:none" to hide and Style="display:" to make it visible but that wont serve your purpose. But for displaying the progress bar you can simply use Update Progress
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a to make it more like a ProgressBar(such as a GIF moving-bar image)

Not able to hide the div

I'm not able to hide the in code. I have given Id to div also I have given runat server property to it but on running the code Div is visible . Please help.
My code is like this :
<a href="RoomTypeView.aspx">
<div class="dash-thum-bg" id="rt" runat="server">
<img src="../App_Themes/Akeel/images/thumb-1.gif" />
<span>Room Type</span>
</div>
In code I am writing
rt.visible=false

Try to wrap your div around a panel. Then u can hide the panel in the code behind.
<asp:Panel runat="server" id="divtohide">
<a href="RoomTypeView.aspx">
<div class="dash-thum-bg" id="rt" runat="server">
<img src="../App_Themes/Akeel/images/thumb-1.gif" />
<span>Room Type</span>
</div>
</asp:Panel>
code behind
divtohide.visible = false;

You can use javascript -
function hideMyDiv()
{
document.getElementById('rt').style.visibility="hidden";
}
Add a style -
.hidden {
display:none;
}
Now call it by codebehind

Scroll down to the specific part of page when a linkbutton is clicked using MaintainScrollPositionOnPostBack

I have a lengthy asp.net page. An HTML table in the page has a link with <a>. when the link is clicked the page shows the textbox using javascript and takes me to the top part of the page. Instead, i want to see the part of the page that has the link and textbox. It should automatically scroll down to that part once the page refreshes. How is that possible?
I have tried using Linkbutton instead of but have issues with javascript.
Here is the code.
<script type="text/javascript">
$(document).ready(
function()
{
$("#aChangeDefault").click
(
function()
{
alert('hi');
//$("#<%=trChangeLoc.ClientID %>").fadeIn(1000);
$("#<%=rowChangeLoc.ClientID %>").fadeIn(1000);
}
)
$("#btnClose").click
(
function()
{
$("#<%=rowChangeLoc.ClientID %>").fadeOut(1000);
if(document.getElementById("<%=divSearchResult.ClientID %>").style.display != "none")
{
$("#<%=divSearchResult.ClientID %>").fadeOut(1000);
}
//$("#<%=trChangeLoc.ClientID %>").fadeOut(10);
}
)
}
);
The Linkbutton is here :
<asp:LinkButton id="aChangeDefault" runat="server" style="font-size: 12px;font-family:Arial;vertical-align:bottom;" ToolTip = "Click here to set your town as default location" Text ="Change Location" > </asp:LinkButton>
And the portion that shows up when the link is clicked is here:
<input id="btnClose" type="button" class="closeButton2" language="javascript" onclick="return btnClose_onclick()" />
<div style="display: inline-block;">
<span class="searchheadder" style="color: #000000; padding-right: 8px; padding-top: 4px;">
LOCATION: </span>
<asp:TextBox ID="txtChangedLocation" onkeyup="doCapitalize();" runat="server" Height="19px"
Width="200px" CssClass="textBox" Style="margin-right: 10px;"></asp:TextBox>
<cc1:AutoCompleteExtender ID="ACE1" runat="server" TargetControlID="txtChangedLocation" ServicePath="../AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2" CompletionSetCount="10" EnableCaching="true" CompletionInterval="0" ></cc1:AutoCompleteExtender>
<asp:Button ID="btnGetNewList" BorderWidth="0" CssClass="searchButton" runat="server" OnClick="btnGetNewList_Click" /> </div>
Appreciate all your help. Thank you!

MaintainScrollPositionOnPostBack only affects the position of the page in your browser when a PostBack occurs, and if you're using JavaScript you don't want a PostBack to happen. If you're doing everything in JavaScript, it sounds like the problem is that when you click a link, the browser's default behavior is to follow the link, even if it's to a location on the same page. In some browsers, for the click event to register on an <a> tag, the href property must have a value, so it's common practice to use a blank anchor name as the href:
<a onClick="MyJavaScriptFunction()" href="#">Click here</a>
What this is actually telling the browser to do is to call your function MyJavaScriptFunction() and unless that function evaluates to false, it will then follow the anchor to the top of the page, which is where href="#" takes you. You can either finish your onClick with return false; or else change your JavaScript function to always return false, either way it will keep the browser from following the link:
<a onClick="MyJavaScriptFunction();return false;" href="#">Click here</a>

I'm not sure I understand what you're trying to do, but if the page is reloading perhaps you can use a named anchor to have the browser go to the section of the page you want automatically.