We Keep Coding

Hide loading image once page has finished loading

I have 2 php pages. The user submits a form (form.php) and the results are viewed on the next page (results.php). There can be a delay of a few seconds while the results are shown - I've added a standard spinning loader gif above where the results appear (it's showing 2 mini calendars of available dates). I would like to then hide this once the calendars have loaded.
Here's the script that gets the calendars:
$( document ).ready(function() {
$(document).on('click', '#calendar_1 .next, #calendar_2 .next', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .next").attr("href");
$( "#cals" ).load( href_link );
});
$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .prev").attr("href");
$( "#cals" ).load( href_link );
});
$( "#cals" ).load( "loadCalendar.php" );
});
I'm showing the loading gif and calendars in the html as follows:
<img id="loading_spinner" src="loading_spinner.gif">
<div id="cals"></div>
I gather I need to do something like:
$('#loading_spinner').hide();
to hide the gif image but I only want to do this once the calendars have actually loaded. I can't work out the correct context or how to do this or even if it's possible.

You can add a callback to your load() function and hide the spinner from there. This will hide it only when load() completes execution.
$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .prev").attr("href");
$( "#cals" ).load( href_link, function() {
$('#loading_spinner').hide();
});
});

Jquery codes does not work on external loaded html file

I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});

Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});

Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});

need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});

jQueryUI, function on window close

I've this function in jQuery:
$("#bottone_mail").on("click", function(){
$('#container_body').fadeTo(1000, 0.25);
$( "#form" ).dialog({
width:510,height:500});
return false;
That creates a form window. When the user clicks the "Send" button, this script is executed:
$("#invia").on("click", function(){
$( "#form" ).dialog("close");
$('#container_body').fadeTo(1000, 1);
$("#spc1").html("<div id='mess_invio'> Messaggio inviato con successo, grazie!</div>");
return false;
});
I want $('#container_body').fadeTo(1000, 1); to be executed when the user closes the form window with the "X" button, other than when the "Send" button is pressed.
The only related answer I could find is this:
jQuery UI Dialog Box - does not open after being closed
It doesn't work for me, though, as a function name is required.
I'm at my first steps with jQuery, so I'd be very thankful if someone was to post a tailored solution with an explanation...

you have options when you create the dialog.
Maybe you can use something like:
$( "#form" ).dialog({
width:510,
height:500,
close: function() {
$('#container_body').fadeTo(1000, 1);
}
});

You can do it like this -
$("#form").on('dialogclose', function(event) {
$('#container_body').fadeTo(1000, 1);
});
http://api.jqueryui.com/dialog/#method-close

JQuery button each click, show/hide forms

Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...
I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.
What I want, basically is that buttonA shows formA, but when I click buttonB, I want to hide formA and show formB. Now what's happening is that it's overlaying formA and formB.
Here's my current code..
function runEffect() {
$( "#effect" ).show( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
};
//callback function to bring a hidden box back
function hideEffect() {
$( "#effect:visible" ).hide( "drop");
};
// set effect from select menu value
$( "#button" ).each(function(index) {
$(this).click(function(){
runEffect();
});
});
$( "#button2" ).each(function(index) {
$(this).click(function(){
runEffect2();
});
});
$( "#effect" ).hide();
$( "#effect2" ).hide();
I know this is easy, but I can't seem to find the answer to it.
Thanks!

try this
function runEffect() {
$( "#effect" ).show( "drop");
$( "#effect2" ).hide( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
$( "#effect" ).hide( "drop");
};

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});
something like this?

I haven't tested it, but maybe you want to a more dynamic function.
Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..
(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"
$(".formButton").click(function(e) {
e.preventDefault(); //prevent default action
var id = $(this).attr('id');
var formId = id.replace('Button', '');
$('#' + formId).show();
$('form').not(document.getElementById(formId)).hide();
});
When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.

Trying to Load Page on Load instead of click

I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"

This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>