update floatbox after submit

Page: 1

Author Post
Shrekkie
Guest
First, hi to all and I like floatbox! :)
I'm a completely javascript noob but first let me explain my problem:

On a page (php/mysql to view data) a user clicks a link and then the 'main' floatbox (1st) comes up, on this main floatbox you can click a another link ( for editing the data = FORM ) and floatbox 'form' (2nd) will come up, after submiting the form, floatbox 'form' must close, floatbox 'main' must refresh / update

closing of floatbox form is no problem, but updating the floatbox main, that's the problem :)

<script language="JavaScript">
parent.fb.end();
</script>

read this at the forum:

The global var fb always points to the first primary floatbox. fb.lastChild always points to the topmost floatbox. When there's only one box, fb = fb.lastChild. If there's more than two floatboxes displayed, you can get to them through the fb.children array. fb.children[0] is the second floatbox, fb.children[1] is the 3rd, etc.

but my knowledge of java is not that good, tried something like this:

<script language="JavaScript">
var floatbox1 = document.fb; (or parent.fb)
var floatbox2 = document.fb.lastChild; (or parent.fb.lastchild)
floatbox2.fb.end();
</script>

but i can't figure it out, someone who does?
Administrator
Registered: Aug 2008
Posts: 3382
Hi Shrekkie,

I posted a response yesterday, but then realized that the problem of refreshing the first floatbox content is harder than it appears at first. This is because the ending animations invoked by calling end() are run asynchronously through timers, so the second floatbox still exists when the code to update the first floatbox content is fired and this causes the update to apply to the second floatbox. But I have something that should work for you.

First though, I should clarify something about the fb.end() function. Don't worry about what box you are calling fb.end() from. The end function always closes the top-most box. If you have 47 stacked floatboxes and you call fb.end on the bottom (1st) one, it will just refer that call to the 47th floatbox and cause that one to end. (You can close them all at once with fb.end(true) if you like.)

As for your problem of closing the second floatbox and updating the content of the first floatbox, try this:
fb.end();
parent.fb.tagOneAnchor(parent.fb.currentItem);
parent.fb.fetchContent();

I'd appreciate hearing back to know if this worked in your circumstances.
Shrekkie
Guest
parent.fb.end(); that works, just fb.end(); doesn't work.
floatbox 'form' closes

then the second line gives a error:
parent.fb is empty or is no object (translated form dutch)

I really appreciate your help, very nice!

After some reading and experimenting i have given the floatboxes a id float1 and float2 but it hasn't help me any further yet. I'm trying to fix this, reading tutorials of javascript, but it isn't easy :shock:
« Last edit by Unknown on Thu Nov 06, 2008 6:20 pm. »
Shrekkie
Guest
fb.end() without parent gives same error, object is empty or is no object.
Administrator
Registered: Aug 2008
Posts: 3382
It sounds to me like you're calling the code from within iframe content in your second floatbox. That won't work because when you call fb.end() the iframe is discarded and with that goes the iframe's window object and the code execution space associated with that window.

You will need to load the second window's content from AJAX calls or from an inline hidden div so that the javascript code execution context is the top window which will persist after the tear-down of the second floatbox.

I was a little hasty and confused when I quoted the code. You don't need the parent references. Since all the code has to run in the top window, it should just be:
fb.end();
fb.tagOneAnchor(fb.currentItem);
fb.fetchContent();
Shrekkie
Guest
I did use iframe content, changed that to type:ajax

fb.end();
fb.tagOneAnchor(fb.currentItem);
fb.fetchContent();

all 2 floatboxes are closed know, little step into right direction, at least javascript errors are away.

floatbox 'main' is of type ajax (is that oke? tried without ajax, but gives errors again)
floatbox 'form' is of type ajax
« Last edit by Unknown on Thu Nov 06, 2008 8:08 pm. »
Shrekkie
Guest
never mind , choosen for another direction for using that form:

after submit:
parent.fb.loadAnchor('page.html', 'sameBox:true width:max');

1 new problem, the page loaded is cached, must refresh, working on that
Shrekkie
Guest
even that last problem is fixed, IE7 bug with cache, thx for all the help.
Administrator
Registered: Aug 2008
Posts: 3382
Glad you found a way to make it work.

I set up a test page to mimic what I think you are trying to do and to make sure I was giving reliable information. Turns out you don't need the fb.tagOneAnchor() call. fb.end(); fb.fetchContent(); is sufficient for closing the one box and refreshing the other.

You can see it in action at http://test.randomous.com/tools/floatbox/test0.html
You may find something of use to you there.

Note: To bypass caching of the php content that is being refreshed, make sure there's a querystring on the href. An empty querystring will do. Use href="xyz.php?" instead of href="xyz.php".
« Last edit by admin on Fri Nov 07, 2008 3:49 am. »
Shrekkie
Guest
That's a good tip: viewpage.php? to refresfh, will give that a try, momently I use a expired header

I think what i had first in mind to accomplish is not so easy, because of the way I made the script:

if($_POST['submit']){
the mysql-shit;
echo "<script language=\"JavaScript\">parent.fb.loadAnchor('viewpage.php?ID=$id', 'sameBox:true width:max');</script>";

}


So the floatbox form waits for submit, after submit insert (edited / new) data into mysql, replaces the form, and gets floatbox main back (need to put parent infront to get it to work)

So it's nearly what I had in mind, think it's a good solution

and again, very good and nice that you tried to help, keep up that good work!

so I still need parent to get i to work, think because of
Shrekkie
Guest
P.S. your example works good, in mozilla, but in Internet explorer the time isn't refreshed, for your information

I use Internet Explorer 7.0.6001.18000, but that's a IE7 bug, like I said
Administrator
Registered: Aug 2008
Posts: 3382
Yup, you're right. The "?" trick doesn't work for IE. Because IE caches more aggressively than other browsers, and because a goal for floatbox is consistent behaviour across browsers, I'll add some cache-disabling headers to the ajax calls in the next version. Right after the line xhr.open('GET', url, true); will be
xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
xhr.setRequestHeader('Cache-Control', 'no-cache');
This appears to be successful in all browsers.

If you have to use "parent.fb" to reach the floatbox code then you are running your code from within an iframed window. It is because your second box is being loaded as an iframe that you are having trouble with the refresh code that I've been recommending and showing in my sample.
Shrekkie
Guest
yup, I realize that of the iframe vs ajax, but the solution I've made at this moment is oke, ajax gave me some other probs, as said before, thx for your help, my problem is solved

And yes, the example is saved on the HD, you never know :)
Administrator
Registered: Aug 2008
Posts: 3382
This update is for the benefit of other folks who may be looking to refresh dynamic content inside an already displayed floatbox. I've looked at this challenge a number of different ways and here is the best and definitive approach.

To refresh a floatbox from an action within another floatbox that is loaded over top of the first one, call parent.fb.fbParent.fetchContent(); from the second floatbox.

To refresh the topmost floatbox from itself, call parent.fb.lastChild.fetchContent();

To refresh the bottom (first loaded) floatbox, or if you only have one, call
parent.fb.fetchContent();

These calls will work from both ajax and iframe content.
Version 3.22 will include a change that will make these calls work for inline (hidden div) content too, and will block caching of ajax content.

Page: 1