Hello,

I've implemented floatbox in a page which is created by Ajax. The call is made from this dynamic content of the page. I successfully included both .css and .js file but still floatbox does not work.

It works with any usual page but it does not work with that page.


Could anyone please help me?

After you dynamically load content, you have to run fb.tagAnchors() against that content to light it up. See the API reference for details.

I am not sure where to put fb.tagAnchors(document);

I tried it inserting between <script type="text/javascript" src="../design/floatbox/floatbox.js"></script>, which did not work.

I've tried rel="shadowbox fb.tagAnchors(document)", which again did not work.

Sorry, I'm a bit newbie. Could you enlighten me on this matter?

<a href="searchajax.php?showname=$form_show" rel="shadowbox" rev="fb.tagAnchors(document)" >Ara</a>

This one did not work either. I'm totally clueless now. This is an anchor from a page loaded by Ajax.

Sorry to hear you're struggling with this. These things can be a real time sink.

I'm not sure how on top of the javascript on your page you are, but your newbie reference makes me think you might be working a bit in the dark and may not know all the bits that make your page work. If so, it might be a bit of a challenge to add something to those bits.

If your page is doing an ajax fetch then there is javascript code that is initiating and responding to that fetch. In particular, there is code on your page that creates an XMLHttpRequest object, uses that object to retrieve your dynamic content, and adds that content to your page when the retrieval completes. fb.tagAnchors is a javascript call that should be fired immediately after the javascript code that inserts your new content into your page. You need to find where that content insertion is being done. If you're using some sort of library to do your ajax stuff, you'll need to look for some sort of on-complete callback or action and use that to fire fb.tagAnchor.

The short answer is: fb.tagAnchor goes immediately after the code that adds your new content to your page.

In fact, I'm not using any Ajax library. I wrote mine and just a newbie on the part of floatbox.

If I understood what you said correctly, adding this line after grabbing the content did not work. Here is how I embedded it:

function getcontent(id)
    {
    	var object = false;
        if (window.XMLHttpRequest)
            object = new XMLHttpRequest();
        else if (window.ActiveXObject)
            object = new ActiveXObject("Microsoft.XMLHTTP");

        if (object) 
		{
                var address = "/editor/onayajax.php?contentid="+id;
                object.open("GET", address);
                object.onreadystatechange = function() 
				{
                    if (object.readyState == 4 && object.status == 200) 
					{
                        document.getElementById("form").innerHTML = object.responseText;
                        fb.tagAnchors(document);
                    }
                    else
                        document.getElementById("form").innerHTML = "<div style=\"font-weight:bold; width:100px; margin-left: auto; margin-right:auto; margin-top:20px;\"><img src=\"\\images/loader.gif\" style=\"vertical-align:middle;\" /> Bekleyin...</div>";
                }
                object.send(null);
		}
		else
			document.getElementById("recommended").innerHTML ="";
            
        
    }

That's so weird. I called this function nearly from everywhere but still not working. Let me tell you how my page is configured.

There is a direct link on the page which triggers the Ajax content and new content appears on the right of the page. At this point, anchor is still not seen. In fact it is hidden in a div block. Then the user clicks on another link on the right (a javascript toggle function) which shows the hidden div block that includes the anchor link. This toggle function is found in the ajax grabbed content.

So I thought of calling fb.tagAnchors(document); from the toggle javascript function, since anchor is seen just after clicking this toggle link. Not to my surprise, it did not work again. What am I doing wrong?

Is there any chance I can see a copy of this page that's giving trouble online somewhere? I'm pretty sure I could sort it out quickly if I had something to look at.

It looks like you have the tagAnchors call in the right location. Are you sure there are floatbox enabled anchors added to the "form" element by the ajax fetch? Are you sure these anchors are correctly marked up? And those same anchors work fine when they're part of the page right from the get go? If it's all green lights regarding those questions, then I have no clue what might be getting in your way. I need a page to look at.

Could we please talk on somewhere else? The webpage language is not English and you might need directives as you go. Plus, I don't want to share it on a public place. (It would be great if we tried some instant messaging service)

Thanks for your understanding and your efforts. I appreciate that.

Sure. Why don't you send me a link and your email address through this site's contact form.

I've just figured out my mistake! I was trying to build my own theme and somehow I ruined the structure. I just reinstalled Floatbox and bam it worked!

Thank you very much for your efforts. You did a wonderful job! I think everyone should use Floatbox, I'll recommend it to everyone.