javascriptjqueryajaxoverlayjquery-tools

jQueryTOOLS Overlay lightbox not functioning when HTML/LINK is loaded via ajax


Before starting, I have researched and found this similar, previous question: Reinitialize jQuerytools Overlay on ajax loaded element

However, the "answer" to that question suggests using .live(). I attempted to us jQuery 1.9 .live() is not a function to update using .on().

$(".overlay_load[rel]").on('click', 'a', function () {
    $(this).overlay().load();
    $(this).overlay().load();
    return false;
});

I will admit I don't 100% understand exactly what that is doing other than perhaps re-initializing the newly loaded HTML so that jQueryTOOLS Overlay has 'access' to the newly loaded HTML.

I have a page loading sections of HTML content via AJAX. Here is an example of one DIV that is loaded.

<div class="ajax-returned mytop">
    <span class="username"> drkwong </span> <br> 
    <span class="full-name">Andrew Kwong</span><br> 
    <span class="action-status"> 
        <span class="mt-icon ut3"></span> 
        <span class="autoship active">A</span>
        <span class="view_profile">
            <a href="/member/downline_tree_view/?view=tree_profile&amp;program=1&amp;view_userid=13" rel="#overlay">
                <img src="/inc/downline_tree/images/more_info.png" rel="#13">
            </a>
        </span> 
    </span>
</div>

<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
    <!-- the external content is loaded inside this tag -->
    <div class="contentWrap"></div>
</div>

This has a link that should engage a jQuery and then load a jQueryTOOLS Overlay lightbox:

    <script>
            $(function() {
                // if the function argument is given to overlay,
                // it is assumed to be the onBeforeLoad event listener
                $("a[rel]").overlay({

                    mask: 'grey',
                    effect: 'apple',

                    onBeforeLoad: function() {

                        // grab wrapper element inside content
                        var wrap = this.getOverlay().find(".contentWrap");

                        // load the page specified in the trigger
                        wrap.load(this.getTrigger().attr("href"));
                    }
                });
            });
    </script>

This is the jQuery I am using to load an external page into a Light Box: http://jquerytools.github.io/demos/overlay/external.html

It simply feels like it's not triggering the jQuery.

Here's what's in the header:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.browser.min.js"></script>
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.tools.min.js"></script>

The jquery.browser.min.js is required by jQueryTOOLS Overlay to access browsers. https://github.com/gabceb/jquery-browser-plugin

EDIT:

AJAX

var ids=new Array()
var node
var param={"action":"NodeDetailAll","admin":"1"}
var users=new Array()



function get_ids(){
    for(var i=0;i<nodes.length;i++){
        users.push("child_"+$(nodes[i]).attr("class"))
        ids.push($(nodes[i]).attr("class"))
    }
}

function get_nodes(){
    nodes = $("#chart [myattr*='descendent']")
    nodes= jQuery.makeArray(nodes);

    $.when(get_ids()).then(function(){
        $.each(ids,function(key,value){
            param[users[key]]=value
        })
    })        
}

function write_html(response){
    $.each(response,function(key,value){
      $("."+key).html(value)
    })
}

jQuery(document).ready(function() {
    $(".spinner-loader").fadeIn(200)

    $.when(get_nodes()).then(function(){

        $.post("~ajax_url~",param,function(response) { 

            response=jQuery.parseJSON(response)
            $.when(write_html(response)).done(function() {
                $(".spinner-loader").fadeOut(600)
                $("#chart").css("opacity","1")

                // is this where I would add the on()? //
                // I tried that, without success.  //
                // perhaps I need to modify the on() function? //

            })
        })
    })
})

Solution

  • Use a different solution. jQueryTOOLS Overlay is no longer active and uses deprecated and even eliminated jQuery functions. Trying to solve all those issues has proven both inefficient and so far as AJAX is related, impossible with the latest versions of jQuery.

    As suggested by @sparky FancyBox 2 provided the needed solution. It was simple and intuitive to implement.