I have an ASP.NET 2.0 Web application.I want to show a progress indcator when user saves some data (Ex : Editing profile).I have already used jQuery in my application for some client side effects. How can i do this ? any jquery trusted stuff to use along with ASP.NET ? Thanks in advance
Do you want to show actual progress or just a busy indicator while the action is happening? If the former, you'll need to have some mechanism to record the save progress in the session and a method to check the state of the progress via AJAX. You'd submit the form via AJAX then periodically call the check method to get reports of the progress and update whatever client-side indicator (usually switch from one to another of a series of canned images or increase the width of some filled "bar"). This, of course, is complicated.
If you want to do the latter, just display an animated GIF that's a busy indicator while you submit the form via AJAX from jQuery using the beforeSend callback, then hide the indicator using the ajax method's complete handler.
$('form').ajax( {
url: '/updateprofile.aspx',
type: 'POST',
data: function() { return $('form').serialize(); },
beforeSend: function() { $('#indicator').show(); },
complete: function() { $('#indicator').hide(); },
success: function(data,status) { alert('Update complete'); }
});
The above code would be in the function invoked from whatever handler invokes the submission or hooked to the form's submit event -- though you'd have to prevent the default action from taking place, too.
An alternative to showing a meaningful progress indicator is to show an animated gif whilst the data is being saved, e.g. the spinning 'daisy' pattern used in Firefox.
This shows the user that something is happening and is usually well received.
Progress indicators which show % complete are often meaningless anyway unless they really have an idea how long the first '50%' will take compared to the last '50%'. Other progress indicators are more meaningful, e.g. those showing record count increments, etc.
Related
I'm using Fullcalendar v2.4.0 and related plugin Scheduler v1.0.2 with all required dependencies. jQuery-ui is at v1.11.4.
I'm loading resources via Ajax call using Fullcalendar built-in method of:
resources: {
url: 'resources_feed.php',
type: 'POST'
}
resources_feed.php simply returns few lines of dummy data.
And for the events, using a similar built-in method of:
events: {
url: 'events_feed.php',
type: 'POST'
}
events_feed.php returning few lines of dummy data.
It all works as expected until I plug in more realistic large amount of data as resources but still keeping the events data same.
The problem I experience is that button clicks like views (Day, Week, Month), Today and left/right arrows are responding after a delay of min 2 seconds sometimes longer. It behaves as if there's a delay set for a few seconds between button click and event firing. I tried to put an alert in the onClick event and alert is displayed after this few second delay.
I tested another button outside Fullcalendar object but on the same page and that works as expected, ie firing as soon as you click the button. This rules out page or jQuery issues. Same behaviour in Firefox and Chrome.
If I switch resource loading back to dummy data then buttons start firing as soon as clicked.
I can't figure out why a large amount of data still to be fetched can affect button response even before triggering an Ajax call.
Anyone seen this before? Any pointers will be much appreciated.
Regards.
Looks like the issue is on your events_feed.php maybe you are loading all the data on every call. Maybe you are not catching properly the Start and End parameters on every button.
The feed.php should catch the start and the end on every call. Something like this:
$start = $_GET['start']);
$end = $_GET['end']);
// then select database
I had this problem when i started to use fullcalendar.
Hope it helps!
Using browserstate/history.js
All my links are running through the history adapter:
History.Adapter.bind(window,'statechange',function() {
// do some stuff here
});
but if a user clicks the same link twice in a row then the second time it will not run since there is no 'statechange'. What is the solution for this?
You can add random data to differentiate the actions:
History.replaceState( {randomData: window.Math.random()}, '', url);
That way statechange will always fire.
Found answer here https://github.com/browserstate/history.js/issues/293
Hi
I want to know How to make the page reload asynchronous, for example if someone has received a message , the last message will appear without refreshing the page. just like facebook. thank you.
You would have to use something like JQuery & Javascript to poll the server for changes and display them on the page in a div.
setInterval('someFunc()', 1000)
function someFunc()
{
$.ajax({
async: true,
type: "GET",
url: "www.domain.com/url",
data: data,
success: function (html) {
$("#myDiv").html(html);
}
});
}
This will update the div with ID myDiv every second with the data from www.domain.com/url passing in data is a param (you will have to define 'data')
well there is alot of approaches
but the basics is that you call an ajax function every second or so that
checks with external php/asp or whatever file if any changes has been made to your
database/text if so
append it to the chatbox.
p.s. using libraries such as jquery simplifies things alot
Or you can use Comet model, it doesn't stress the network so much and does not fill the web servers access logs so much. The responses are also faster. Commet means that the HTTP server pushes the data to you immediately when they appear.
I need to capture an ASP.NET Session Tiemout in a GeneXus X application generated in C#. When a user stay away from keyboard more than N minutes, I would like to request User/password once again without loosing data's changes in webform
You should consider just extending the session timeout in the server, that way you wont need to solve the problem in the first place.
If that's not an option you could make a user control that checks periodically if the session is active via ajax, example with JQuery (not tested):
$(function() {
setInterval(CheckSession, 10000); /*10 seconds*/
});
function CheckSession() {
$.get("/CheckSession.aspx", function(data) {
$("body").append("<p>" + data + "<p/>"); /*shows current user*/
if(data = "")
$("#loginform").fadein(200);
});
}
Where the CheckSession is a main/http proc that does something like
&httprespone.addstring(&websession.get('userid'))
And in the case that it is not, disable the screen buttons and somehow show the login form:
I've never tried this, but it seems possible.
An alternative would be to attach the session checking code to the submit button, should be simple enough in any javascript framework.
just need tips on how to make forms where request are submitted via AJAX with a loading progress image. I am using update panels with AJAX framework. I would like to know about the recommended approach. Through JQuery or AJAX toolkit ?
Please advice, examples would be an added bonus for me.
1- Prepare a client side div with "display:none" style property. put your loading image inside.
2 - when the user or page submits a request, change that divs display property to "block".
3- Add some kind of "information received" sign to the response and check this response from the client side and then change that divs display property back to "none"
I would like to know about the
recommended approach
Well, that depends on what you are doing, what parts of the form are you updating, how big is the form, what values are you sending to the server.
Generally speaking, if you want to update something simple (dropdownlist, listbox, etc), youd generally use JavaScript (or jQuery) to call an AJAX-enabled web service. This way, you're only sending to the server the data it needs, things like ViewState/cookies are not sent over the wire. You also have full control over the pre/post execution events (so you can add your loading images, call the WS, then clear them).
However, if you want to asynchronously update an entire form (which has a lot of controls), you're probably right in using an UpdatePanel. Things like a GridView are a good case for an UpdatePanel (as you usually need to handle editing, binding and paging all asynchronously).
The progress image is made easy with the following code:
<ProgressTemplate>
<img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>
Stick that inside your UpdatePanel, and whenever an AJAX call is made, the loading image will be shown.
HTH
If you use JQuery for AJAX request then you can use the following events -
$.ajax({ url: "test.html",
type: "GET",
beforeSend: function(){
-----load your loader here-----
});,
success: function(){
------remove your loader here -----------
Remaining code
}});
You can also use POST. in above example i have used GET.
For detailed documentation you can refer - http://api.jquery.com/jQuery.ajax/
Create a small plug-in for your loader like so.
$.fn.ShowLoader = function(on){
switch(on)
{
case true:
$(this).show();
break;
default:
$(this).hide();
break;
}
}
then use the following:
$('form').submit(function(){
var Form = $(this);
$('.loader',Form).ShowLoader(true);
//Gather some params
Location = Form.attr('src');
Data = Form.Serialize();
$.post(Location,Data,function(result){
result = result || false;
if(result)
{
$('.loader',Form).ShowLoader(false); //Disable the loader
//Process result
}
});
})
html would just be a regular form, with an image / div inside with the class of loader