0

I am facing issue regarding javascript. Onclick of button a call a function

function onButtonClickFunction()
{
    ajaxCall();
}

function ajaxCall()
{
    $('.black_overlay').show();

    /* Some Ajax Code */

    $('.black_overlay').hide();
}

So here I am facing the issue is, When I call the ajaxCall function, ideally overlay should be appear, But this will appear and hide at the end of the Ajax response.

There is no error in the console. And when check with the breakpoints then this function sequentially works.

I really didn't come to know, where should be the problem. What should I check for this?

Any help would be appreciated.

Thanks!

user3483449
  • 11
  • 1
  • 1
  • 6

1 Answers1

0

You should use your code to hide overlay inside ajax.success or ajax.error, because ajax runs async.

Thats why your overlay hides faster than request finishes

Developer
  • 4,158
  • 5
  • 34
  • 66
  • Thanks for you response, But here the problem is overlay doesn't show when function is called, the screen is looking unresponsive, between request and response. – user3483449 Sep 12 '16 at 05:02
  • @user3483449 then you should provide more code. Create a jsfiddle example, so we could run and test it - only then we will be able to help you – Developer Sep 12 '16 at 05:14
  • I have tried as separate application, it is working fine. but when I use like at button call, It works, but after when i got response. – user3483449 Sep 12 '16 at 06:41