I know this is probably elementary, and I'm probably overlooking it in the docs, but I have one floatbox opening another. On close of the child floatbox, is there a way to refresh the contents of the parent floatbox?

The parent floatbox is pulling a list from the database and outputting it in an HTML table. The child floatbox is to edit the contents of one of the table rows. Once the information is editted and the child closes, how can I refresh the parent floatbox to display the current information?

Thanks

This topic comes up periodically and I'm glad for the chance to address it directly. But first, be warned that I don't have time right now to set up test scenarios and confirm the info given here. I'm hoping you won't mind testing it out (both approaches?) and letting us know how it goes. Thanks in advance.

First approach. Is the parent floatbox an iframe, or is it direct html content like an ajax load? If an iframe, reset the src attribute of that iframe and it should refresh. Here's the details...

You need to get a pointer to the parent floatbox's iframe element. From the child floatbox, this can be done with parentIframe = parent.fb.lastChild.fbParent.fbContent;
Now we want to set parentIframe.src - but to what?

The parent floatbox iframe's src is already set to whatever was the href in the anchor that initiated that parent floatbox. We want to change it so that the change will invoke a re-get, and also change it in such a way that the get won't just pull from the cache. I think the best way to do this is with a bogus querystring on the new href. Suppose the parent floatbox was originally created with a src of "myForm.php". Let's reset src to 'myForm.php?garbage=' + Math.random(). That will look something like myForm.php?garbage=0.3847561928 and the garbage will do nothing except make it a new and uncached href.

So for all that wordiness, refreshing the parent floatbox when it's an iframe can be done from the child box with:

parent.fb.lastChild.fbParent.fbContent.src = 'myForm.php?garbage=' + Math.random();

If you know you'll only have two floatboxes stacked up and that the parent box is the first box loaded off the host page, you can simplify that with:

parent.fb.fbContent.src = 'myForm.php?garbage=' + Math.random();

The second approach is for non-iframed content in the primary. Here the plan is to assign a unique Id to the element of interest in the primary floatbox and then update the contents of that element from code in the child box.

Let's say the element of interest is a <span> element and we've given it an id attribute of "mySpan". We can update that with:

parent.document.getElementById('mySpan').innerHTML = newValue;

It's up to you to figure out how/where to get newValue in your context. Also, you may want to use different update methods on different element types. For example, you could update an input element with parent.document.getElementById('myInput').value = newValue;

And finally, you can use the second update-an-element method on an iframed floatbox as well, but that comes with the additional task of finding the document object within that iframe. Here's some cross-browser-friendly code that combines the two methods above to update an element in an iframed primary floatbox:

parentIframe = parent.fb.fbContent;
parentDoc = parentIframe.contentDocument || parentIframe.contentWindow;
if (parentDoc.document) parentDoc = parentDoc.document;
parentDoc.getElementById('myInput').value = newValue;

Hi, Byron.

First of all, let me tell you that Floatbox is a very useful and an excelent tool ! And I got really amazed when I found out that you are the only person who is behind the development of it (and also supporting it !). It is very nice to see your detailed comments and also explanations regarding the questions people face. It makes clear that you have experience and knowledge on such a topic. Congratulations and keep up the good work !

As I am replying to this topic, you may wonder that I am having similar 'parent floatbox' questions.

I navigated through all the (current) 16 pages of these forum and noticed the topics that may answer to my question were: #221, #136 and #86.

So, let me explain my context (which is not so different from what was exposed here).

I have a page (page1) which contains a table (T).

--------- Sample ------------
Id |First Name | Last Name | Manage
1 | Robert | Langdon | Edit / Delete
2 | Susan | Sarandon | Edit / Delete
---------------------------------------------
Add new person
--------- End of Sample -----------

When one clicks on "Add new person" a floatbox is loaded containing a form (iframe). This iframe contains javascript that adds a new row to table dynamically using the data inputted in form.
I need to programatically generate the "Edit" link in a way that when it gets clicked, a floatbox loads with a form filled with already existent data (from table).
The code is there, but when I click on link, no floatbox is loaded.
I suppose that it is because anchor was not already tagged.

I tried all the solutions proposed on the topics I listed before, but none of them work for me.

Logically, the "loadPageOnClose" solution is what would fit better in my case, but it is not working (clicking on link opens the form in browser, not in a floatbox).

I would appreciate if you could come with new ideas.

Thank you.

Hi bux.

I've read your post carefully, but I'm not certain I understand where your difficulty lies. Let me describe what I think might be it and you can tell me if I'm close.

You have an existing table with edit links, and those edit links have a class of "floatbox" on them, and they are opening fine in floatbox when clicked. You also have an 'add person' link which also has a class of "floatbox" and is opening your form fine in floatbox.

When the add person form is completed and submitted from within floatbox, it runs some javascript which uses either DOM functions or innerHTML sets to create a new entry in the table on the parent page. This new entry has an edit button/link and like the other edit buttons, this new button/link has a class of "floatbox" assigned to it.

But your problem is that when you click the newly added edit link, it does not open in floatbox.

If this is an accurate description of your problem, then the solution is an easy one. Just after the code that inserts the new edit link into the parent document, you need to run fb.tagOneAnchor to light it up. You will need a reference to that new edit element. If you have just added it using DOM methods, you probably already have a variable set that points to it. If not, give that new edit button a unique id when you create it, and then get the reference with document.getElementById('theUniqueId')

The call you need to make would look something like this:
parent.fb.tagOneAnchor(parent.document.getElementById('someId'));

You could also retag everything on the page and thereby pickup the new edit link by calling:
parent.fb.anchors.length=0;
parent.fb.tagAnchors(parent.document);

I hope I'm not too far off in my understanding of your issue.

I should also point out that when you create your new edit link, you don't have to give it a floatbox class and retag it. You can take the alternate approach of giving it an onclick action to launch a floatbox.
onclick="fb.start(this); return false;"

Hi, Byron.

I really appreciate your support. Also, you made a very detailed description of my issue.
Although, the proposed solutions did not work in my case.
I thought it was not working because I was not using the "parent.fb.anchors.length=0;" line, but even adding it, I was unable to make the newly created link work.

I will keep trying and will post if I get successful.
Very thanks for your help.

You're welcome to post a test page online and invite me to have a look if you like.