Question

I have this method:

checkFancyBox=function(){
  ldValue=LD(user,'admin')+LD(pass,'admin');
  if(ldValue<2){
    myHashMap[pass.concat(user)]=ldValue;
    $.fancybox({
      content: "<span style='color:black'>Wrong username or password. </span>", 
      showCloseButton: true,
      transitionIn: "elastic"
    });
    $('#funny').show("");
    return false;  
  }
};

when it is placed within the :

$(document).ready(function() { 
  //... 
  checkFancyBox(); 
  //...
  checkFancyBox=function(){ /*...*/ };
};

it crashes and instantly refreshed,

and when when it is placed outside the $(document).ready…. it is working,

but for some reason it does not displays the content of the fancybox,

and again, instantly refreshes.

where should i place it and how to make it show the content and continue only if the

‘close’ button on fancybox is pressed?

thank you!

Answer 1

This is a hoisting issue.

checkFancyBox=function(){...};
};

Hoists the declaration to the top of the function, but not the initialization. So when you have

$(document).ready(function() { ... 
     //checkFancyBox declaration is hoisted to here, and is undefined
     checkFancyBox(); //calling an undefined variable is an error

     checkFancyBox = function(){...}; //now checkFancyBox is initialized, but too late to prevent the error
     };

Placing this declaration outside of the document.ready handler causes this declaration and initialization to happen before the handler is run, so checkFancyBox has a value, and can be called. If you choose to stick with your original way of declaring the function, make sure you put a var in front of it.

var checkFancyBox = function(){...};

But note that the function can simply be declared like this

function checkFancyBox(){
  //...
}

If on the other hand you want the function to be local to your document.ready handler, then simply move the declaration to the top of that handler:

$(document).ready(function() { ... 
    var checkFancyBox = function(){...};
    //checkFancyBox declaration and initialization are both accomplished, 
    //and the function is safe to call

    checkFancyBox();
};