Unable to display facebox with custom content

Question

In my html file, I have a javascript function,

$("#contactopts").change(function() {
   var response = simplefunc();
   $('#sampID').html(response);
   $.facebox($('#sampID'));
}

The function simplefunc is a jquery function that returns a html file as a response from the backend.

I am expecting a facebox with the content of the html file which is sent from the backend. But instead I'm getting an empty facebox. And I tried console.log(response. Firebird says response is undefined..

Could someone please tell me what I'm doing wrong? I can see that I'm missing something fundamental..

Answer 1

try like this,
$("#contactopts").change(function() {
   var response = simplefunc();
   //$('#sampID').html(response);
   //$.facebox($('#sampID'));
}

function simplefunc()
{
        $.ajax({
            type : "POST",
            url : "sample_ajax_page.php",
            data : {xxx:xxx,yyy:yyy},       
            success : function(html){
                            $('#sampID').html(html);
                            $.facebox($('#sampID'));
                }


}

J-Query or javascript wont wait for ajax to return,that is the reason why you getting it blank.