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
};
Related
I am migrating up from jquerymobile 1.2 to 1.4.5
the content for each of my pages on my app commences with the following syntax,
$("#DemoAccountRegistrationPage").live("pageshow", function() {
I have been able to figure out i need to transition the .live to .on so the above becomes each page reference
$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {
however i realise that the above format is still not compliant for 1.4.5 hence why the content is not loading
can someone please provide me the correct syntax to be able to change
$("#DemoAccountRegistrationPage").on("pagecontainershow", function() {
to the correct syntax for compliance with 1.4.5
I have read over the jquery docs but cannot fully understand what the correct syntax needs to be (very new to jquery mobile)
The jQuery docs are not at all very clear on this, but in a nutshell, pageshow was deprecated in JQM 1.4.0 in favour of using pagecontainershow on the pagecontainer widget.
I was able to get something working by adding the pagecontainershow listener to the document, then inspecting the arguments to figure out if it matched the page I wanted; something like this:
$(document).on('pagecontainershow', function(event, ui) {
if(ui.toPage[0].id == "my_page_id"){
// do some stuff for my_page
}
});
I tried to make it a bit more reusable, like this:
function on_pagecontainershow(page_id, fn){
$(document).on('pagecontainershow', function(event, ui) {
if(ui.toPage[0].id == page_id){
fn();
}
});
}
on_pagecontainershow('test_page', function(){
alert('pagecontainershow triggered');
});
Syntaxes I tried and failed to get working:
$(document).on('pagecontainershow', '#test_page', function(event, ui) {
alert("I don't get called (1)");
});
$(document).delegate("#test_page", "pagecontainershow", function() {
alert("I don't get called (2)");
});
$("#test_page").on("pagecontainershow", function() {
alert("I don't get called (3)");
});
You can try it out in this fiddle.
This works for me, as i'm using it in one of my projects:
$(document).on("pagecontainershow", function(e, ui) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
if (typeof ui.toPage == "object") {
/* manipulate page navigating to */
switch(pageId) {
case "page-one":
//do stuff
break;
case "page-two":
// do other stuff
break;
}
}
});
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 have a page that is created completely using Knockout. In one of the templates, clicking on a link will display a JQuery Datepicker control to select a date. Upon selecting the date, a function executes using the selected date and the Datepicker closes. That much works just fine.
It can take several seconds from when someone selects a date until the Datepicker closes. This is due to a function that is called (LoadAppointmentTimeSlots) which needs to run synchronously and can take a while to do what it does. To address this, I would like a DIV to appear that provides feedback to the user that the system is working ("#loading").
THE PROBLEM is that the DIV does not appear until after the LoadAppointmentTimeSlots function executes (by which time the DIV gets hidden again). I have experimented with setTimeout in several ways, but nothing has worked.
Below is the "offending" code:
var SchedulingViewModel = function () {
var self = this;
...
self.Date_OnClick = function () {
var selectedDate;
$("#calendarPopup").append('<div id="datepicker" />');
$("#datepicker").datepicker({
dateformat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
setDate: new Date(),
minDate: 0,
maxDate: self.SelectedRFVInterval() - 1,
onSelect: function (datetext, inst) {
selectedDate = datetext;
$("#loading").show();
self.LoadAppointmentTimeSlots(datetext); // function within view model that uses $AJAX in sync mode to return time slot data
$("#loading").hide();
$('#calendarPopup').dialog('close');
}
});
};
...
}
The difficulty you are running into is because show() is executed asynchronously, and since javascript is executed in a single thread, that means they have to wait until all synchronous code (such as LoadAppointmentTimeSlots) is done.
To get your desired behaviour, put everything after the show() call into the callback for the show command. That way LoadAppointmentTimeSlots won't execute until the show() call is done. Here is how:
// ... other code
$("#loading").show(function() {
self.LoadAppointmentTimeSlots(datetext);
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
However, it might be better to change your ajax call in LoadAppointmentTimeSlots to be asynchronous and move the hide() and dialog('close') calls to the callback of the ajax call. This allows javascript to keep doing other things while you are waiting for LoadAppointmentTimeSlots to finish. That might look more like this:
// ... other code
$("#loading").show()
self.LoadAppointmentTimeSlots(datetext, function() {
$("#loading").hide();
$('#calendarPopup').dialog('close');
});
// ... more code
function LoadAppointmentTimeSlots(datetext, alwaysCallback) {
// Prepare request details
$.ajax( "/myendpoint?param=foo" )
.done(function(data) { alert("success"); }) // do something with data
.fail(function() { alert("error"); })
.always(alwaysCallback); // called on both success and failure of ajax call
}
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.
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)