Colorbox not appearing on links called through ajax

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mfaisalwarraich
    New Member
    • Oct 2007
    • 194

    #1

    Colorbox not appearing on links called through ajax

    Hi everyone,

    I am trying to use colorbox on a page where i have three links each of which have onclick event which call an ajax page and response text is shown in the necessary divs. everything is working fine except colorbox links. After i call the content through ajax the links are not working to appear the colorbox. Here is my code to call the colorbox which is when page is loaded working.
    Code:
    $(document).ready(
    
    	function()
    	{
    	$(".editchecklist").colorbox({width:"50%", height:"35%", iframe:true, onClosed:function(){ location.reload(true); } });		
    	}
    );
    I tried to look for this problem but everything is related to jqeury ajax call not simple ajax call. The are advising to use .live() or rebind methods which i have no idea how and where should i use them.
    here is my ajax call code:
    Code:
    function getxmlhttp()
    {
    	var xmlHttp = false;
    	if (window.XMLHttpRequest)
    	{
    		// If IE7, Mozilla, Safari, etc: Use native object
    		var xmlHttp = new XMLHttpRequest();
    	}else
    	{
    		if (window.ActiveXObject)
    		{
    			// ...otherwise, use the ActiveX control for IE5.x and IE6
    			var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}
    	}
    	return xmlHttp;
    }
    function process_ajax2(phpPage, objID, getOrPost,clickedLink)
    {
    
    	xmlhttp = getxmlhttp();
    	var obj = document.getElementById(objID);
    	if(getOrPost == "get")
    	{		
    		xmlhttp.open("GET",phpPage);
    		xmlhttp.onreadystatechange = function()
    		{		
    			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
    			{
    				document.getElementById('change_'+clickedLink).innerHTML = xmlhttp.responseText;
    			
    			}
    		}
    		xmlhttp.send(null);
    	}
    }
    Please tell me how would i solve this problem?

    thanking you.
  • mfaisalwarraich
    New Member
    • Oct 2007
    • 194

    #2
    I found solution. just need to add the following code after the response text i.e. after line 30.

    Code:
    $('a.test').fancybox({
    					'transitionIn'    : 'elastic',
                    	'transitionOut'    : 'elastic',
    					'titlePosition'    : 'over',
    					'type'				: 'iframe'
     
        });

    Comment

    Working...