I am using BlockUI for my web app. On my page, I have
$(document).ready(function(){
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
});
The page uses Ajax to get data at page load, and I am able to see the spinning image as Ajax indicator.
After the page load, I have buttons and clicking on them invokes Ajax calls to get data and update part of the page. However, in these operations, I am not able to see the spinning image that I can see at page load.
How can I show blocking image/indicator after page load? Anything I did is wrong?
I suggest this code ;
$(document).ready(function() {
$('#yourDivName').delay(4000).hide();
});
After the 4 second your div is hiding with this way.
Atakan.
Related
I have a back and next buttons and Iframe in main page.
On pressing next button next pages (which are forms to take input) are displayed in Iframe from server side.
I want to save data of current page in DB and then load 2nd page in Iframe. On clicking again save data of Page2 in DB and then load 3rd page in Iframe.
Similarly if user clicks back button he should get data of previous page.
Please suggest me how it can be achieved.
Thanks
To chane iframe src just use JS
function changeFrm(NewSrc){
document.getElementById('YOUR IFRAME ID').src=NewSrc;
};
And in your button add onClick="ChangeFrm('NEW SOURCE');"
Good luck!
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.
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 building an ASP.NET website and I'm puzzled with the behavior of one page, I've got a long form and a submit button, I've got the piece of javascript below in the page to handle scrolling the page back up upon submiting the form, the first time I click the submit button it works all the sequent clicks don't work at all, any idea why?
<script type="text/javascript">
$(".thebutton").click(function(){
$("html, body").animate({scrollTop: 200}, 1000);
});
</script>
Cheers,
Thi
Ahh,
Using an Ajax post makes this different that my post above.
Does your ajax call change the buttons on the page? I assume you are using an UpdatePanel with the buttons in qustion in it.
Since when you make the Ajax call, the controls in the UpdatePanel are being rebuilt, the DOM is seeing them as different objects and these new objects are no longer bound to the jQuery click function. You will need to re-bind these buttons click event after the ajax post to re-enable the functionality you are looking for.
Using jQuerys new "Live" Handlers should do the trick for you:
$(".thebutton").live("click", function() {
$("html, body").animate({scrollTop: 200}, 1000);
});
Hope it helps.
If your Submit button performs a full postback, I would view source on the second web page instance, and make sure that the script is still there.
Your script will run BEFORE the Post.
Imagine if you will:
Initial Page Load
Bind Click event with jQuery
Click Button
jQuery Click is raised
html and body scrollTop are set to 200
during the "animate" the form is submitted
asp.net back end click event code is run
page is reloaded.
string script = "$(function() { $('html, body').scrollTop(200); });";
ClientScript.RegisterStartupScript(this.GetType(), "scrollTop", script, true);
That should take care of what you want to accomplish.
Hope it helps.
I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.
So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.
I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.
Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.
Some investigation shows that:
On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.
So, my questions are is:
Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?
The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.
I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.
Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:
ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);
In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.