We Keep Coding

I want to execute one code after finish another code

I have write a jQuery CLICK event, in that event there are two codes which will be executed after click the event but I want to finish the first code execution first then after finish it start execution of the second code. But now they both are executing at the same time when the CLICK event is triggered.
The first code is about slideUp, so I want to complete the slideUp first then start the execution of second code. Here is the Fiddle
I have attached the code and image both here, please check and help me if you can.
$(".team-item-area").on('click', function(){
$(this).siblings().find('.team-item-right-para').slideUp();
$(this).find(".team-item-right-para").slideToggle(function(){
var check = $(this).is(":visible");
if(check == true)
{
$(this).parents('.team-item-area').siblings().find('img').hide();
$(this).parents('.team-item-area').find("img").fadeIn();
} else {
$(this).parents('.team-item-area').find("img").show();
$(this).parents('.team-item-area').siblings().find('img').fadeIn();
}
});
})[enter image description here][1]

According to the documentation the slideup function has a second argument that is the function that will be called once the animation is complete. The first argument is the duration of the slide. You can set as you want (400 is the default)
$(this).siblings().find('.team-item-right-para').slideUp(400, function {
... code to execute after the slide is complete...
});

Use slideToggle method inside this you can right anything after completing
http://api.jquery.com/slidetoggle/

Either use the solution #BenM mentioned or use somethin like this:
$(this).find(first operation)
.delay(1)
.queue(function (next) {
$(this).find(second operation);
next();
});

jQuery How to make a popup Appears / Disappears on timer?

When my website loads, the popup appears - I need to make it automatically close after a specific time.
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
There is already a button but i need to remove it.

You can use the delay() function for that:
$(document).ready(function() {
$("#popup").hide().fadeIn(1000).delay(5000).fadeOut(1000);
$("#close").on("click", function(e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup">popup</div>
Please mind the note that is given on the documentation:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.

Javascript have option setTimeout .setTimeout is a native JavaScript function (although it can be used with a library such as jQuery, as we’ll see later on), which calls a function or executes a code snippet after a specified delay (in milliseconds).
setTimeout(function() {
$("#popup").fadeOut(1000);
}, 1000);
or in jquery use .delay(). Set a timer to delay execution of subsequent items in the queue.
$("#popup").delay(1000).fadeOut(1000);

How can you execute a javascript function after another one is completed?

I want that a javascript function executes after another one is completed. This is my code:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
window.addLoadEvent = function() {
$('#popuprel1').show();
}

You want to use the callback for fadeOut. It calls the second function once the initial animation is complete.
See http://api.jquery.com/fadeOut/
Basically - you want to do something like this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000, function() {
$('#popuprel1').show();
});
});

It's because the second onload replaces the first one. Follow this.
For multiple events on onload, use addLoadEvent

Wait for animation to complete before continuing in jQuery

Is there anyway to wait for a jQuery animation to finish before proceeding with another command?
For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.
If I put the statements one after another, you can see the items change before the animation completes.
$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();
Thanks.

You can pass callback in fadeIn/fadeOut. jQuery docs
$('#item').fadeOut('slow', function(){
$('#item').html('Changed item');
$('#item').fadeIn();
});

You can either use the callback method which gets called from .fadeOut, like
$('#item').fadeOut('fast', function() {
$(this).html('Changed item').fadeIn();
});
or use the underlaying Deferred object
$('#item').fadeOut('slow').promise().done(function() {
$(this).html('Changed item').fadeIn();
});

Pass a callback function to fadeOut.
$("#item").fadeOut(function() {
$(this).html("changed").fadeIn();
});
This is the sort of thing you'll learn in a basic jQuery tutorial.

$('#item').fadeOut('slow', function() { // do your stuff here });
For more info: http://docs.jquery.com/Effects/fadeOut#speedcallback

Can I call $(document).ready() to re-activate all on load event handlers?

Does anyone happen to know IF and HOW I could re-call all on-load event handlers? I'm referencing some .js files that I DON'T have control over, and these .js libraries do their initialization in $(document).ready(), and unfortunately don't provide any easy function to re-initialize.
I'm currently trying to replace a large div block with content from an ajax call, and so I have to re-initialize the external libraries. So, it would be nice just to call $(document).ready() in order to re-initialize EVERYTHING.
So far, I've tried this on the ajax call:
success: function(data) {
alert('1'); // Displays '1'
$('#content').html(data);
alert('2'); // Displays '2'
$(document).ready();
alert('3'); // Does not display
}
Calling $(document).ready(); fails quietly too. JavaScript console shows no errors. Does anyone know if this is possible (without modifying javascript library files)?

Since you asked how to do it without modifying the external JS files, I'll answer that way. I've traced through the .ready() function in jQuery in the debugger and it appears that the root function that gets called when the page is ready is this:
jQuery.ready();
But, it appears you cannot just call it again to accomplish what you want because it appears that when it fires the first time, it unbinds from the functions that were previously registered (e.g. forgetting them). As such, calling jQuery.ready() manually a second time does not retrigger the same function calls again and I verified that in the debugger (breakpoint was only hit once, not second time).
So, it appears that you cannot solve this problem without either changing the jQuery implementation so it doesn't unbind (to allow multiple firings) or changing each piece of ready handler code to use your own events that you can fire as many times as you want.

I did something like:
// When document is ready...
$(function(){
onPageLoad();
});
function onPageLoad(){
// All commands here
}
Now I can call this function anytime I need.

A simple way to achieve this is just to invent your own event like this:
$(document).bind('_page_ready', function() { /* do your stuff here */});
Then add this:
$(function() { $(document).fire('_page_ready'); }); // shorthand for document.ready
And last, whenever you need to run it again you simply call this:
$(document).fire('_page_ready');
[Edit]
If you really can't edit the external script-files I've made a jsFiddle that makes what you want to do possible, you can take a look at the code here: http://jsfiddle.net/5dRxh/
However, if you wan't to use this, it's important that you add this script RIGHT AFTER you include jQuery, like this:
<script src="jquery.js" type="text/javascript"></script>
<script>
//script from jsFiddle (only the plugin part at the top).
</script>
<!-- All the other script-files you want to include. -->

You can trigger document.ready second time if you change entire body content:
$('body').html($('body').html())

I don't think that this can be done since jquery unbinds the ready event after it is executed. From the source:
// Trigger any bound ready events
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger( "ready" ).unbind( "ready" );
}

You can do this simple.
Make a function:
function REinit() {
/// PLACE HERE ALL YOUR DOC.READY SCRIPTS
}
Place just the Reinit() function inside doc.ready:
$(document).ready(function(){
REinit();
});
then after an ajax action just call
REinit();

I think it is straight forward to just change the ready event to pjax success
Change it from:
$(document).ready(function() {
// page load stuff
});
To:
$(document).on('ready pjax:success', function() {
// will fire on initial page load, and subsequent PJAX page loads
});

This will be what you want, just hold the ready event until you are really ready.
https://api.jquery.com/jquery.holdready/

Or, try this:
jQuery.extend ({
document_ready: function (value) {
$(document).ready (value);
$(document).ajaxComplete (value);
}/* document_ready */
});
And instead of defining a function by saying:
$(document).ready (function () { blah blah blah });
say:
jQuery.document_ready (function () { blah blah blah });
Explanation:
Any function loaded to "document_ready" will be automatically loaded into both "$(document).ready ()" and "$(document).ajaxComplete ()" and will fire under both circumstances.

I just had the problem that my ajax code only worked if it gets called by the $(document).ready(function(){}); and not in a regular function, so I couldn't wrap it.
The code was about loading a part of my page and because of some loading errors I wanted it to be called again after a timeout.
I found out that the code doesn't have to be in the $(document).ready(function(){}); but can be run by it and can also be called by itself.
So after I read many solutions from different pages now I've got this code mixed together:
$(document).ready(loadStuff);
function loadStuff(){
$.ajax({
type: "POST",
url: "path/to/ajax.php",
data: { some: data, action: "setContent"},
timeout: 1000, //only one second, for a short loading time
error: function(){
console.log("An error occured. The div will reload.");
loadStuff();
},
success: function(){
$("#divid").load("path/to/template.php"); //div gets filled with template
}
});
}