jquery fadein() is being called after all jquery function tranactions are completed?

0
votes

i have a submit button that , when the user hits the submit button i want to fire up a Div with fadein() in jquery, from the same function im calling another function called monthlyReport() , but this fadein div is being called after the montlyReport is called and its functionality is over

<script type="text/javascript">
$(function () {
    $("#submitbtn").click(function () {
        $("#loading").fadeIn();
        monthlyReport($(this));
    });
});


function monthlyReport(Obj1) {

  //some transactions

  alert('test');

}


<div id="loading">
<div id="loadingcontent">
    <p id="loadingspinner">
        Searching things...
    </p>
</div>
</div>

my requirement here is that $("#loading").fadeIn(); should fire first and then monthlyReport() can continue with its transactions

2
jqueryfadein

2 Answers

2
votes

Set the monthlyReport call to happen once the fadeIn() function has finished:

$(function () {
    $("#submitbtn").click(function () {
        var self = this;
        $("#loading").fadeIn('slow', function() {
           monthlyReport($(self));
        });
    });
});

function monthlyReport(Obj1) {    
  //some transactions

  alert('test');    
}

EDIT : Modified code to set the variable self to be the value of this in the click handler.

0
votes

Like this:

$(function () {
    $("#submitbtn").on('click', function () {
        $("#loading").fadeIn('slow', function() {
           monthlyReport($(this));
        });
    });
});

function monthlyReport(Obj1) {    
  //some transactions

  alert('test');    
}