show/hide loading message for html table - javascript

How can I show a "loading" message when clicked/checked to expand table column(s), and hide the message as soon as its expended. Here is demo of what I've got so far. I can make the message appear, but can't hide it once the job is done. It seems useful when I'm trying to expand a large table, and I think it would be nice to let the user know that it's working. Any help/suggestion will be greatly appreciated.
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
} else {
$(".hidden").hide();
}
});
$("#load").hide();
});

Do you really need the loading message?
anyway, you could hide it like this:
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
$("#load").hide();
} else {
$(".hidden").hide();
$("#load").hide();
}
});
$("#load").hide();
});

this is a bit unuseful thing to create a loading text because this need only one reflows to the DOM so you actually not see the "loading.." message.
but if you want to create an ajax call wich gets the data form the server, it would be useful, but in this usuage this is unuseful
but if you insist to this, you need to create a new "thread" to detect is the table shown. for example
$("#link").click(function() {
$("#text").html("loading...");
$("#table").show();
window.setTimeout(function() {while(true){if($("table").is(":visible")){$("#text").html("");break;}}},0);
});

It's a matter of the page lifecycle. You don't have any blocking events in your code and there is no callback for your code to know "hey the hidden elements are shown now, hide the loading bar." Take a look at this updated jsfiddle. Instead of a callback, I've told the code to wait .5 secs after showing or hiding before calling the method to the hide the loading message.
If you were doing something with a callback, like an AJAX post, then you could invoke this on success or fail of the request.

Related

Reveal and conceal CSS animation

So I have an animation that will reveal something, this is visible in a few places on my site.
However I am now trying to reveal and conceal a modal overlay.
This appears over the modal form when submitting, and disappears when the AJAX call returns some data.
The problem is that the animation gets stuck after 'concealing', which means I cannot click submit and have it 'reveal' again.
Before AJAX:
<div class="loadingElement animate-reveal" style="display:none;">...</div>
AJAX Start:
$(".loadingElement").show();
AJAX Success:
$(".loadingElement").removeClass("animate-reveal");
$(".loadingElement").addClass("animate-conceal");
If you want to take a look for yourself please go to:
http://halden.101test1.co.uk/college/
You are removing the animate-reveal class from your element which is going to make it never animate again. Right where you do $('.loadingSignin').show(); you need to re-add that animate at the beginning of your ajax query.
Just toggle the two necessary classes which will all you to have the animation and display your element.
Where your AJAX begins add the following line:
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
Here is what that starting block would be:
if (form.valid()) {
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
$(".loadingSignin").show();
Then paste the exact same thing again where your ajax call is finished.
success: function (data) {
// log data to the console so we can see
console.log(data);
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
Result:
So I found a solution but it feels somewhat hack-y, feel free to still weigh in.
AJAX Success:
$(".loadingSignin").addClass("animate-conceal");
$(".loadingSignin").one("animationend webkitAnimationEnd", function () {
$(".loadingSignin").hide();
$(".loadingSignin").removeClass("animate-conceal");
$(".loadingSignin").off("animationend webkitAnimationEnd");
});

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

Javascript: change CSS element if jquery GET failed

I have a Javascript in my header that calls an external server to retrieve some information, like this:
$.getJSON("https://domain.tld/json/", function (something) {
var results = //stuff that formats the result, not relevant here;
window.$info = results;
}).fail(function(){
// here's where I need the code to make the warning appear
});
Then in the body I have a warning that should pop up in case the GET request failed:
<div id="warning">Warning text</div>
Problem: the javascript is in the header and I can't change the "warning" div because it has not been created yet.
If I use document.getElementById("warning").style.display='block'; I get an error message saying it is null.
So how do I use the .fail() part of the jquery GET function to make the warning div appear (that is created later) in case the GET function has failed? Or is that not possible? And some 'solution' I tried (don't remember what exactly) even delayed the loading of the whole page. I'd like to avoid that as well.
Thank you for helping me out.
You should hide your html element initialy
<div id="warning" style="display:none;">Warning text</div>
And you can call show() method to display hidden element when get request failed
$("#warning").show();
Your javascript is trying to execute and look for things before the DOM has loaded. You can solve this problem by making sure your javascript only fires when the DOM is ready. In jQuery you do that like this:
$(document).ready(function(){
//your code here
});
The native javascript version of this is much more complicated so I won't post that here. However you could also wait for the entire page to load before executing the code like so:
window.onload = function(){
//your code here
}

Javascript won't load using jQuery Mobile with navigation-geolocation

I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred
Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!

jQuery Ajax Loader

Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback

Categories