I'm using this code:
$(document).ready(function() {
$("#test-list").sortable({
handle : '.handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("process-sortable.php?"+order);
},
});
});
I want a loading indicator (GIF animation if possible) to show up when I drop the item and the request is being sent to the server until the PHP request is done and load is succesful.
How can I do this ?
Thanks.
Show the image in the update function before you start the ajax-call, make a callbackfunction for the load and hide the image there (so after the ajax-call is done)
Related
I am using Jquery Mobile 1.4 and I would like to create a button that sends the user to another page, and opens the panel on this new page once landed :
I am trying this :
$(document).on('pagecreate','#faq-page', function(){
$('#faqcontactus').on("tap", function() {
$( "body" ).pagecontainer( "change", "#welcome-page", { transition: "fade" });
$( "body" ).pagecontainer( "getActivePage" ).find('#mypanel').panel("open");
});
});
which goes to the page, opens the panel, but closes it instantly.
Can you help ?
Thanks
You can't do it after you initiate page change process. That process is asynchronous and pane open will not wait for this function to end. What you need to do is wait for next page to became visible, then you should trigger panel.
Something like this:
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
var activePageId = activePage .attr('id')
if(activePageId === 'welcome-page') {
activePage.find('#mypanel').panel("open");
}
});
You should wait until page is fully loaded before you open the panel, i.e. use pagecontainershow.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activePage[0].id == "welcome-page") {
$(".ui-panel", activePage).panel("open");
}
});
I would like to set the number of seconds a flash notice is shown to the user, before it is automatically dismissed.
You can use some simple JavaScript on your page (using jQuery in this example):
$('document').ready(function() {
setTimeout(function() {
$('#flash').slideUp();
}, 3000);
});
Assuming the id of the HTML element holding your flash message is #flash, this will slide it up and hide it after 3000 milliseconds (3 seconds).
Just combining what #LouisSimoneau and #rlecaro2 already mentioned – I currently use:
function clearNotice(){
$(".notice").animate({opacity:'0'}, 1500);
}
Note that if your using rails 4 with turbolinks, you'll need to call it from a ready function:
$(document).ready(ready);
$(document).on('page:load', ready);
var ready = function() {
setTimeout(clearNotice, 1000); //Flash fade
};
I am sure this must be a basic error on my part - but I am completely failing to see it.
I have a jQuery UI dialog which I use to present a form to edit a record .. at the bottom of the html (which itself is loaded via ajax) it has a div containing an (animated loading gif). The loading div is hidden after loading the html.
The CSS puts the div in an absolute position in the bottom right corner.
When the Save button on the dialog is clicked I call a function to save the info via ajax. In the ajax call I have:
beforeSend: function() {
$("#ajaxLoading").show();
},
complete: function() {
$("#ajaxLoading").hide();
}
The problem is that the image does not show.
If I remove the hide() after the initial dialog load, then the gif is displayed throughout.
I tried putting the show() just before the ajax call rather than in the beforeSend .. still nothing.
I tried putting the show() in the dialog setup - in the "Save" button click. Nothing.
If I put a breakpoint in the script with Chrome and step through then I DO see the gif!
So, I tried putting a couple of second timeout after the show() .. but still nothing.
I have no more ideas what to try.
Thanks for all the suggestions and comments ... I have got to the bottom of the problem - it was ... it was down to a combination of running ajax async and me closing the dialog at the wrong time.
i hope this helps
I had the same issue and i really don't know how it's happening, but it can
be fixed using a small delay in code like follows.
solution 1
$.ajax({
method: "GET",
url: "/",
beforeSend:function(){
$("#ajaxLoading").show(1);
// please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
},
complete:function(data){
$("#ajaxLoading").hide();
//here i write success code
}
});
solution 2
$.ajax({
method: "GET",
url: "/",
beforeSend:function(){
setTimeout(function(){
$(".loader-image").show();
}, 1);
// please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
},
complete:function(data){
$(".loader-image").hide();
//here i write success code
}
});
How I use and working fine scripts is...
$("#save_button").click(function () {
// start showing loading...
$("#ajaxLoading").show();
// make an ajax call
$.ajax({
type: 'POST',
url: url,
data: $("#form").serialize(),
success: function() {
// when success, hide loading.
$("#ajaxLoading").hide();
// your additional scripts
if( a == null ){
// some script
}
else{
// some script
}
}
});
Use this.
jQuery.ajax({
data: 'your data',
url: 'your url',
type: "POST",
dataType: "html",
async:false,
onLoading:jQuery("#ajaxLoading").html('<img src="http://example.com/images/spinner.gif" />').show(),
success: function(data){
jQuery("#ajaxLoading").fadeOut();
}
});
Add the loader gif as html like this:
beforeSend: function() {
$("#ajaxLoading").html('<img src="image source" />');
},
complete: function() {
$("#ajaxLoading").html('')
}
I want to show progress bar when user submit the form because that process will take time may be around 8 to 10 seconds, so i want to show the progress bar so user must have an idea of how much time it will take. This process will be executed on simple call of a controller action like normal postback no ajax involve. So how can i achieve this task i am using asp.net mvc 2
Fraz,
Whilst i notice you say NO AJax INVOLVED, thought I'd chuck this in for info purposes.
As long as you don't care about the 'plase wait' indicator showing exact progress, then there's a simple way to do this with jquery and my answer here is dependent on that.
basically, create a 'Wait' view that contains a simple message along with an animated gif embedded within it. then just fire off your insert (or long running action) via the following basic outline:
$(document).ready(function() {
$('#btnSave').click(function() {
$.ajax({
type: "POST",
url: '<%=Url.Content("~/Booking/Save") %>',
data: { data: prepareData() }, // your data properties to be saved
beforeSend: beforeQuery(),
success: function(data) {
saveDataResponse(data);
},
error: function(xhr) { alert(xhr.statusText); }
});
});
});
// here we show the 'wait' view prior to processing starting
function beforeQuery() {
var url = '<%= Url.Action("Wait", "Booking") %>';
$("#mainDiv").load(url);
}
// when the long running process has completed (or error'd)
// either populate mainDiv with the details view of the booking
// or show the error appropriately
function saveDataResponse(data) {
if (data.length != 0) {
if (data.indexOf("ERROR:") >= 0) {
$("#mainDiv").html(data).css('backgroundColor','#eeaa00');
}
else {
$("#mainDiv").html(data);
}
}
}
obviously, there would be a little more involved for error conditons etc, but this is the basic 'template'.
hope this helps
I'm using a jQuery modal dialog to display a 'Please Wait' type message to a user when a ajax call is made back to the server.
I'm doing this by making the dialog visible using the jQuery ajaxSend method. And I close the dialog using the jQuery ajaxComplete method.
All fairly routine stuff I'm sure.
However if the call takes a very short about of time (say 10 milliseconds) then I want wait until a second has passed since making the dialog visible before I then close the dialog. The reason is to provide user feedback ... and to stop the horrible flicker of the dialog quickly opening and then closing.
How can I achieve this using jQuery and / or ajax?
Many thanks for any pointers.
Would a better paradigm be to actually wait for a period of time before showing the dialog? If you have a responsive app then it would make sense to only show the modal if the response does not come back within say 100ms. This would avoid delaying the UI just to avoid flicker which is what you are proposing.
Note I am using beforesend and success here to dummy up the code
var timerid;
beforeSend: function(){
//open the dialog in 100 milliseconds
timerid = window.setTimeout( function(){
$('#dialog').dialog('close');
}, 100)
},
success: function(){
//cancel the showing of the dialog if not already called
window.clearTimeout( timerid );
//close the dialog regardless
$('#dialog').dialog('close');
}
If you dont like this idea then simplay put the dialog close function inside a setTimeout within the ajax complete callback e.g
complete : function(){
//close the dialog in 1 second
window.setTimeout( function(){
$('#dialog').dialog('close');
}, 1000)
}
I've pulled together a solution for this myself - based on the great response from 'redsquare' and some further reading.
I have used the code from redsqure to open the modal dialog only after a given duration has passed - thus hopefully not having to open the modal at all.
For when the modal has opened I've added code to ensure it remains open for a minimum of 800 milliseconds ... just to avoid the possibility of it quickly flashing up on the screen. To achieve this I start a javascript timer in the 'ajaxSend' method and then I use the 'ajaxComplete' method to determine whether the modal is open. If so I use the timer to calculate how long it has been open for and make up the difference to 800 milliseconds. I adapted a script I found on line for my timer. Script below.
var timer_ms = 0;
var timer_state = 0;
/// <summary>
/// Responsible for starting / stopping the timer. Also calculates time.
/// </summary>
function timerStartStop() {
if (timer_state == 0) {
timer_ms = 0;
timer_state = 1;
then = new Date();
then.setTime(then.getTime() - timer_ms);
}
else {
timer_state = 0;
now = new Date();
timer_ms = now.getTime() - then.getTime();
}
}
/// <summary>
/// Resets the timer.
/// </summary>
function timerReset() {
timer_state = 0;
timer_ms = 0;
}
Thanks.
Thanks.