I'm using .net 2.0. This is a project that I have taken over for another developer.
I have a aspx page that can take a long time to display under certain condition due to loading items from the database. What I want to do is to show a loading animation or something to let the user know the page is loading, so I tried to use the JQuery .ready() method, however, I can only see the results after the page is fully loaded. What I mean is that when I click on a link to my aspx page, nothing is drawn until all of the work is done. The work is done on the server side in Page_Load.
I'm looking for best practices of having the page display, even if all the user sees is an animation. Right now it appears as if something is wrong because it can take a while (over 15 seconds in some cases) before the page draws.
You might be able to use Asynchronous Pages to do this
http://msdn.microsoft.com/en-us/magazine/cc163725.aspx
One way to take the page loading code out and place it in a image button with a transparent image.
Then wrap any sections of the page that will be updated in an update panel.
Once the page has loaded you can click the hidden button with jQuery to load the data, and the update panel will handle a loading icon if you have set up a progress template.
asp:
<asp:UpdatePanel runat=server id=upMain>
<ContentTemplate>
<asp:gridView runat=server id=gridView>
<asp:ImageButton runat=server id=hiddenLoadButton>
</ContentTemplate>
</asp:updatePanel>
in button click:
protected void hiddenbuttonclick(object sender, eventargs args)
{
gridview.DataSource = yourDataSource;
gridView.DataBind();
}
jQuery:
$(document).ready(function(){
$("#hiddenLoadButton").click();
});
Another option would be to use an ajax method to load the data.
In the flow, you are coming to the database call prior to the JQuery method passing all of its information to the page. There are two solutions to this, I can see:
Get the data via AJAX after the page load
Explicitly control the HTTP Response stream and flush after the JavaScript is sent
Without seeing the code, I cannot offer a specific answer to your issue.
Related
I was hoping for a little help. I am currently using some of the jQueryUI widgets in an ASP.Net Web App. I have successfully got everything working. Basically, I have a GridView on a page which contains some hidden fields in each row containing data. I also have a dialog div containing an update panel and a few Labels.
When a user clicks on an Image Button on the GridView, the jQuery is fired to show the jQueryUI dialog and code behind is used to fill the labels from the selected GridView row. Unfortunately, the AJAX communication takes quite a bit longer to update versus showing the dialog div.
The same question actually applies to the loading of an ASP page into a jQuery popup window also as I will need to eventually do this.
So my questions are:
How can I make jQuery wait to execute until after the partial postback has returned with the AJAX information for the popup?
Is the above method the right way to go?
Is there a better way?
Is there a way to speed up AJAX
communications to make it more
instantaneous?
Thanks in advance for your input.
without knowing exactly what you're doing (code wise), the best I can understand is that you want to trigger some behavior after the ajax call has completed, which is actually supported like so:
$.ajax({
url: 'myurl.aspx',
success: function(data) {
//everything you want to happen after the ajax completes.
//this can either be code, or a call to another function that loads your div
}
});
I'm looking to create a custom date picker with code examples from several sources.
Is the code to display/hide an ASP.NET control when a user clicks a button usually done with JavaScript or ASP.NET code? By display/hide, I mean within the page not a popup window.
Please provide a simple example. (If ASP.NET, VB example preferred over C#)
The answer is, it depends. Do you want the date picker show/hide to trigger a postback and thus some code on the server, or do you want it to act purely on the client?
If you want it to act purely on the client, then, modify the markup for your button:
<asp:Button runat="server" ID="myButton" OnClientClick="ShowHideCalendar()" Text="myButton" />
<script language="javascript" type="text/javascript">
var calendarVisible = false;
function ShowHideCalendar()
{
if (calendarVisible)
{
// Code to *SHOW* calendar here
// Show the DIV it's contained in, pop the window with it in, etc..
}
else
{
// Code to *HIDE* the calendar here
}
}
</script>
The key bit is the "OnClientClick" property of the asp:Button control.
Its best practice to do such thing asynchronously, rather than having a full postback that refreshs the entire page.
That means that you have two options:
Update an UpdatePanel in which your
control is placed. That gives you
the benefit of only re-rendering the
content in the UpdatePanel.
Use
clientside scripts to toggle the
control. You also need to perform a
callback, that tells your codebehind
that you just toggled the visibility
to asure your code is in the same
state as the webpage displaying it.
I'd prefer using the second one.
I have an asp.net form used for search. The search result is showing on the same page using Ajax. If I navigate to another page and come back, I get the populated form but the search result is empty. What's the best way to go back to the page and have the result populated.
Or how to force the page to post back to repopulate the page with the results when back button is clicked?
You can do this using the EnableHistory property on the ScriptManager. Once you've set the ScriptManager's EnableHistory property to True, you can use the AddHistoryPoint method to set history points in your page.
<asp:ScriptManager runat="server" ID="MyScriptManager" EnableHistory="True">
</asp:ScriptManager>
Dino Esposito has a good pair of articles here (client-side) and here (server-side) about using the scriptmanager history functionality.
There are a number of frameworks that attempmt to handle the back button and ajax.
Here is Microsoft 's
Here is one called really simple history
Here are a few more if you are using jQuery:
http://plugins.jquery.com/project/history
http://stilbuero.de/jquery/history/
http://www.overset.com/2008/06/18/jquery-history-plugin/
https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin
In order to retain the previous selected data on the page user should add the below code:
Response.Cache.SetCacheability(HttpCacheability.NoCache)
in the Page_load event of the page.
So, when the user click the browser back button ,the debugger will come to the page load event of the page, and the user can store the values in Session Variable (Prior Search criteria) and load rebind the Gridview or any server controls.
I have a page of search results, and clicking one opens a new window where they edit the information about it. Once they finish, they currently have to hit "search" again to refresh the results to ensure it saved correctly (it refreshes the search results and reflects the new status).
Is there any way to trigger the page to automatically refresh (ie. automatically click the search button) based on the popup window closing or through some other means?
I echo the sentiments to do this without popup windows, but if you really need to...
I would do this with an update panel wrapped around the results and some javascript added to your save button on the popup page.
On your popup page, I guess you have a button to save your work, something like:
<asp:button id="btn_save" runat="server" OnClick="Save" Text="save" />
on the codebehind:
protected void Save(object sender, EventArgs e)
{
// save code ...
// bla bla
// Add this
ClientScript.RegisterStartupScript(this.GetType(), "save", "<script language='javascript'>updateResults();</script>
}
On the results page add this
<script language="javascript">
function updateResults()
{
__doPostBack('updatePanel_results','');
}
</script>
and wrap your results control in an update panel (in this example called updatePanel_results). In your page_load, you'll probably need to code to call your refresh resutls method.
I'd really avoid having the application flow spanning two windows if possible. Why not impliment some kind of modal dialogue when the user clicks an edit link?
Check out jQuery's modal form implimentation to see what I mean:
http://jqueryui.com/demos/dialog/#modal-form
Opening window does not look like the ideal solution here.
In the new window you have access to parent window in javascript. You can use it to fire refresh/or some other function in mail window.
Is there any way to trigger the page
to automatically refresh (ie.
automatically click the search button)
based on the popup window closing or
through some other means?
You can register a JavaScript event handler for the OnUnload event. However, in my experience it's not reliable (browser-to-browser inconsistencies, etc).
Have you considered using Ajax to keep the search results on the same page as the original window? Or maybe a small Silverlight control?
I have a control that on 1 page is initially shown, but on another page is initially hidden.
For the page that initially shows the control, the javascript in the control works fine, but for the page that initially hides the control, the javascript doesn't work.
I've ended up registering the javascript in the code behind using:
this.Page.ClientScript.RegisterClientScriptBlock(...);
It works fine, but it gets ugly with large javascript blocks. Plus it I want to change it, I have to rebuild the solution, which I'd rather not have to do.
Is there another way to register javascript using markup if it isn't sent to the browser when the page is loaded? I'm trying to keep network traffic slim by only sending what I need to the browser when the page loads.
thanks,
Mark
The issue is not making the button invisible, but having an invisible button that one can click on from javascript, and having the button call it's event handler.
ex:
<asp:button id="button1" runat="server" style="display:none">
is something you should use or you can setting up a css class with display:none in it instead and then assign that to your control.
I assume you're getting the control by using document.getElementById, if that is the case, you can check if it is null before using it:
var ctrl = document.getElementById("someID");
if (ctrl) {
do something here...
}
If your control is hidden by setting its server side property 'Visible' to false, then the browser can't attach the js to anything because ASP.NET doesn't render the control. You could try setting the CSS property 'display' to 'none'.