CODEWITHSUNDEEP
javascriptajaxdomcolorbox
AleMal
AleMal

Reputation: 2087

Colorbox class don't work with ajax/dom object

i usually use colorbox tool for open "popup windows" in my page and all are fine. In my new project the situation is little different because i use js/ajax/dom for create dinamically my objects in handleRequestStateChange() function.

After import js,jquery and css for colorbox, in the head of my js page i write:

 $(document).ready(function () {
        $(window).scroll(function () {
        //oP1 = document.createTextNode(posizione_menu.offsetTop);
    //divIpt.appendChild(oMtx1);
    $(".divHcss").css("position", "fixed").css("top", "0px").css("z-index", "999");
        });
        //Examples of how to assign the Colorbox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            $('.non-retina').colorbox({rel:'group5', transition:'none'})
            $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){ 
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
    });

and after in handleRequestStateChange() i create my a element and assign to a div:

var a = createElement('a');
    //a.style.display = "block";
    a.setAttribute('class','iframe');
    a.setAttribute('href',"php/whois.php?P1="+oStxt.value);
    var divIp3 = createElement('div', 'divIp3', 'divIp3css');
    var divIp31 = createElement('div', 'divIp31', 'divIp31css');
    divIp3.appendChild(divIp31);
    divIp3.appendChild(a);
    a.appendChild(divIp31);

The divIp31 become linkable but the href open page in a normal browser tab and not using attribute class for colorbox.

Someone have an idea about?

Thanks in advance

AM

Upvotes: 0

Views: 720

Answers (1)

Chandranshu
Chandranshu

Reputation: 3669

You need to call:

$(a).colorbox({inline:true, width:"50%"});

after appending the anchor element to the div. The previous colorbox call only bound the behavior to elements which were already present on the page. You need to repeat this for each new element added to the page.

UPDATE: I didn't pay attention to the fact that the variable a refers to a DOM node. Just box it in the jquery's $ so that colorbox methods become available.

Upvotes: 1

Related Questions