jqueryfacebox.post

facebox not working after $.post


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'
        });
    });

}

Solution

  • 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();
        });
    }