I have a page, its contents dynamically loading using jquery/ajax. After calling the content using jquery/ajax, the popup in the page is not working. It was due to the fact that, the new elements came from ajax/jquery call not binded with the light box/ facebox. We have to reinitialize the lightbox/facebox after calling the ajax request like following:
function catdisp(val,id){
$("#loaderimg").show();
$.post(BASE_URL+"/catalog/categoryMultipleAjax",{filter:val,id:id},function (data){
document.getElementById('ajaxcat').innerHTML=data;
$("#loaderimg").hide();
$('a[rel*=modal]').facebox() ;
});
}
function catdisp(val,id){
$("#loaderimg").show();
$.post(BASE_URL+"/catalog/categoryMultipleAjax",{filter:val,id:id},function (data){
document.getElementById('ajaxcat').innerHTML=data;
$("#loaderimg").hide();
$('a[rel*=modal]').facebox() ;
});
}