i'm using facebox to open a remote page,
i includedjQuery
, facebox.js
and facebox.css
and put it in document.ready like this
jQuery(document).ready(function ($) {
$('a[rel*=facebox]').facebox({
loadingImage: 'imgs/loading.gif',
closeImage: 'imgs/closelabel.png'
});
});
everything works till i call this function
function lecFunc(year)
{
var name = year + '_lec';
$.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
document.getElementById("lecs_tbody").innerHTML = data;
document.getElementById("lecs_boxbody").style.display = 'block';
document.getElementById("qus_boxbody").style.display = 'none';
});
}
the facebox doesn't work any more
EDIT :: Solved
Actully the problem was that i was using two jQuery versions
then i read this qustion Can-i-use-multiple-versions-of-jquery-on-the-same-page
then added this code by the exact sequence
<script src="js/jQuery.js"></script>
<script type="text/javascript" src="js/facebox.js" ></script>
<script type="text/javascript" src="js/onClick.js" ></script>
<script>var $j = jQuery.noConflict(true);</script>
<script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
<script>
$(document).ready(function () {
console.log($().jquery); // This prints v2.1.3
console.log($j().jquery); // This prints v1.4.2
});
</script>
and in onClick.js
file
jQuery(document).ready(function ($) {
$('a[rel*=facebox]').facebox({
loadingImage: 'imgs/loading.gif',
closeImage: 'imgs/closelabel.png'
});
});
function lecFunc(year) {
var name = year + '_lec';
$.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
document.getElementById("lecs_tbody").innerHTML = data;
document.getElementById("lecs_boxbody").style.display = 'block';
document.getElementById("qus_boxbody").style.display = 'none';
$j('a[rel*=facebox]').facebox({
loadingImage: 'imgs/loading.gif',
closeImage: 'imgs/closelabel.png'
});
});
}
You're initializing facebox when the page is loaded. In this case, the facebox plugin will be applied only to those elements that are already available in the DOM. After you insert the content with AJAX, the new content won't be initializied with facebox. In order to make it work, you'll have to initialize it after the $.post
, like so:
jQuery(document).ready(function ($) {
function facebox_init() {
$('a[rel*=facebox]').facebox({
loadingImage: 'imgs/loading.gif',
closeImage: 'imgs/closelabel.png'
});
}
});
function lecFunc(year) {
var name = year + '_lec';
$.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
document.getElementById("lecs_tbody").innerHTML = data;
document.getElementById("lecs_boxbody").style.display = 'block';
document.getElementById("qus_boxbody").style.display = 'none';
facebox_init();
});
}