floatbox + xajax problem.

Page: 1

Author Post
vinson
Guest
Hello,

I got an question and hope anyone can help smile

I use floatbox to display a form.

in html
<div id="formdiv" rel="floatbox" style="display:none;"></div>
<a onclick="xajax_member('email');">{$row.email}</a>


in php
$objResponse->script('fb.loadAnchor("#formdiv", rev="width:800 height:max scrolling:auto")');


It works normally then a floatbox displays.


After that, I would the change some status by using xajax, such as user's status change to 'banned' or 'No'

There is a div id 'ban' in html page : <div id="ban">

in php

$objResponse->assign("ban",innerHTML,"<a onclick=\"xajax_changestatus('changeban','email');\">Banned</a>");


The main problem is that how can I response back this $objResponse to the float box of 'formdiv'

I tried

$objResponse->script('fb.tagAnchors(document.getElementsById(\'ban\'));');

It is not working....
Administrator
Registered: Aug 2008
Posts: 3382
Hi Vinson. I'll take a stab at this.

First, I think you've misquoted your html. When floatbox takes its content from a hidden div it copies that div's content into the floatbox content div. Your div is empty - nothing to copy, nothing to display. I'm going to assume you typo'd this and meant to say
<div id="formdiv" rel="floatbox" style="display:none;">
<a onclick="xajax_member('email');">{$row.email}</a>
</div>


Then I get confused. I don't understand what this <div id="ban"> element has to do with the content your are displaying from "formdiv". Is the "ban" div inside "formdiv"???

As to your main problem, you want to display the new content so you should be using the fb.loadAnchor function. If I understand your setup, you will want to use the "sameBox:true" option in the rev attribute to replace the content in the existing floatbox, rather than loading a second floatbox over top of it. Because I am not clear on what exactly your page is doing and how it is structured, I can't give a definitive answer, but perhaps you should be trying something like:
$objResponse->script('fb.loadAnchor("#ban", "sameBox:true");');


If you need floatbox to clear out previously inventoried content first, you could try something like:
$objResponse->script('fb.anchors.length=0; fb.loadAnchor("#ban", "sameBox:true");');


Or perhaps it is fb.loadAnchor("#formDiv",... you want to use in your circumstances.

Good luck. Let us know how it goes.
« Last edit by admin on Sat Nov 01, 2008 5:46 pm. »
vinson
Guest
Let me explain more about my problem.

1. There is

<div id="formdiv" style="display:none;"></div>

and

<a onclick="xajax_showform();">Show the form</a>

in the same page.


2. When I click the above <a> tag, it calls functions.php to fetch "form.tpl" then assign it to "formdiv".

$formdiv = $smarty->fetch('form.tpl');
$objResponse->assign("formdiv",innerHTML,$formdiv);

then I use

$objResponse->script('fb.loadAnchor("#formdiv", rev="width:900 height:max caption:FORM")');

to make it display on the screen.


3. In the content of form.tpl, there is
<div id="ban">
<a onclick="xajax_changestatus('ban');\">NO</a>
</div>

it calls functions.php to change the content of ban div from"NO" to "BAN"
$objResponse->assign("ban",innerHTML,"Banned");


This method
$objResponse->script('fb.anchors.length=0; fb.loadAnchor("#ban", "sameBox:true");');

is working, but the page refreshed. :roll:
Not instant change the value <div id="ban"></div>

any other way to do it?
Administrator
Registered: Aug 2008
Posts: 3382
Thanks. I understand now. (Sometimes I'm a little slow...)

So to summarize your basic problem, you have content displayed in floatbox but when you update the innerHTML of this content the change is not seen in the browser display.

I'm pretty sure I know what the problem is, and it's a general problem you can have with content that is loaded from an inline hidden div.

Because the content is copied from your hidden div into the floatbox display, if you have something in your hidden div with an ID on it, you will end up with two elements with that same ID - one in your hidden div and one in the floatbox content div.

So in your case when you call $objResponse->assign("ban",innerHTML,"Banned") it's a crap-shoot as to which of the two "ban" divs gets the new content. Since you're not seeing it in the floatbox content we can assume that it is the "ban" div inside the hidden div that is getting the update.

What can you do about it?
I think the only thing is to move away from using an inline hidden div and load your floatbox content from an external file as an iframe instead. This way the ID attributes in the floatbox content will be unique and can be reliably referenced and accessed. Note that you will have to move some of your php code into the new iframed document so that you are referencing it and not the original top document. From code within the iframed document, use "parent.fb" to reference the floatbox object and functions on the original top page.

You could also consider bringing the content into floatbox as type=ajax and avoid the duplicate IDs that way.
« Last edit by admin on Mon Nov 03, 2008 12:26 am. »

Page: 1