Hi everyone, this is my first time on the forum, so please be gentle ! Firstly, congratulations on a terrific product.

I am working on a new ecommerce template that features a mini-cart on each page so that customers can see what they have purchased. At any time, they can view and edit the contents of the minicart byhitting a button on the minicart. In doing so, floatbox is ignited and detail contents are revealed.

If possible, can I place a button allowing customers to "close" the floatbox (instead of the existing close text" and at the same time refresh/reload the page that hosts floatbox ?? (Ajax is well and truly beyond me, hence the need to refresh._

Any help would be greatly appreciated

Hi. Welcome, and I'm glad you're liking the floatbox.

Trust me, ajax is not well and truly beyond you. It's pretty simple, especially if you use a helper like floatbox's built-in ajax API functions. But you'll be relieved to know you don't need it for what you want to do. You just need to set an onclick action on some element of your displayed cart that closes the box and refreshes the originating page. Here's how you do that (using an <a>nchor element for this example):
<a href="#" onclick="parent.fb.loadPageOnClose = 'self'; parent.fb.end(); return false;">klose kart</a>

Many thanks for the reply and the ajax suggestion.

I inserted the code but did not get the results.

If you have a chance, have a look at he following page (http://www.dap.com.au/DAP_Product_Template1.asp). Add more than one product to the minicart, and then view the cart. You will see that floatbox loads detail of the shopping cart. If you edit the volumes and close floatbox, the minicart volumes do not change !! It is only when you hit refresh is when everything is adjusted accordingly.

We're talking about two different things. You originally asked about adding your own close button to your cart form. The anchor example that I gave you was intended to go inside your floatboxed form as a custom click-to-close thingy.

Now you are asking about updating the page when floatbox's built in close button is used. This is easy to do too. You still use the loadPageOnClose functionality but you would set this as an option in the rev attribute of the anchor that opens your cart form in floatbox. What you want that initiating anchor on your main page to look like is:
<a class="floatbox" rev="width:560 height:520 loadPageOnClose:self" href="http://www.dap.com.au/cart.asp">view cart</a>

My apologies... should have pointed you to an online example in the first place. Terrific support.

HI again, can the the solution you provided also apply to any element on the main page ? For example, instead of refreshing the whole page, can a particular div or table sitting outside of the floatbox (called "cartbox") be refreshed instead ?

This is an interesting question. The answer is yes, but not using the loadPageOnClose functionality previously described. I'd like to post a working approach here, and in fact want to add a small tutorial to the floatbox site that covers doing things like this. But first I need to know... Where does your new content come from? Do you make an ajax call to fetch it from your server? Do you build the html code using javascript functions based on the contents of the form inside the floatbox? Until I know the source of the data you want to insert into "cartbox" I can't really nail the example for you.

At the risk of annoying everyone, including myself. This is the flow of events that I am trying to achieve....

I have a minicart that sits in a table/div in the right column of every page that displays what has been added to the cart. This is called "cartbox" and it contains a link called "view cart". When you want to view extra details and edit the quantities of the minicart, the view cart button opens a floatbox that displays a detailed page called cart.asp

When cart.asp is updated, the customer then hits another button within cart.asp floatbox called "continue shopping" which will hopefully close the floatbox and update cartbox.

At the moment this is exactly what is happening, but rather than update the whole page, we simply update the table/div on the mainpage and remove the clunkiness of updating the whole page

Great, but the missing ingredient for me is around the phrase "and update cartbox". Update cartbox with what? Where does the new content for the cartbox come from?

Sorry for the delsy, but it is 4:30 am in Sydney and need another dose of coffee !

The "add to cart" buttton that sits on the on the main page updates pre-written minicart.asp and cart.asp pages that are dynamically updated via javascript. No ajax is involved...unfortunately.

As it stands, if the cart.asp page is edited by the customer, a routine also sends instructions to minicart.asp to update ....but only on page refresh.

Go to bed. I'll have something for you in 12 hours.

Too late for that.

Apologies for being so vague and thanks for the support. This is extremely generous.

Tony

I lied. I won't have something for you in 12 hours. Sometimes life gets in the way. It may be as much as two days out now.

But the concept is real simple. Use floatbox's event callback function beforeBoxEnd to update the innerHTML of the target div on the main page.

I'll get the sample up when I can. Sorry for the delay.

Sorry for the delay. Here's the example of updating an element on the parent page from a value set in a floatboxed iframe child page. Probably a good idea to look at the example page first; then looking at the html and code will make more sense.
http://test.randomous.com/misc/magic

Had a look? Ok, good. Here's the page source for the little child form that's loaded in the floatbox:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head> 
<body>

<p>
<label>What&#039;s the magic word?<br />
<input type="text" id="magic" name="magic" size="8" />
</label>
</p><p>
<button type="button" onclick="parent.fb.end();">OK</button>
</p>

</body>
</html>

The only thing that needs noticing on that page is that we've given the input element an id so that we can access the value that's set in that input. We also put an "OK" button with an action of fb.end on it, but this isn't really needed. This example works fine without it.

The heavy lifting, such as it is, is done by a little bit of code on the main page. Here's the source:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="/includes/floatbox/floatbox.css" />
<script type="text/javascript" src="/includes/floatbox/floatbox.js"></script>

<script type="text/javascript">
function update() {
	var formDoc = fb.getIframeDocument(),
	    formInput = formDoc.getElementById(&#039;magic&#039;);
	fb.setInnerHTML(fb$(&#039;word&#039;), formInput.value);
}
</script> 

</head> 
<body>

The magic word is <span id="word">not yet known</span>.<br />
<a href="magicBox" class="floatbox" rev="beforeBoxEnd:`update();` width:200 height:140 scrolling:no">set the magic word</a>

</body>
</html>

Let's walk through this page:

First, notice that there's a span element with the id of 'word' set on it. This will be the page element that we will update dynamically. (You can use any kind of element and any id you want).

In the head section, we've defined a function called 'update'. It uses some of floatbox's utility API functions. First, we get the document element of the iframe that's in the floatbox by calling fb.getIframeDocument. Using that document element, we then get the input element from that page by calling getElementById.

The last line of the update function does the actual update of the span element contents. It uses the utility function fb$ to fetch the span element. (fb$ is a short-hand for document.getElementById and emulates prototype's $ function.) The fetched span element and the value of the input element from the child page are passed to fb.setInnerHTML which updates the span element's contents without refreshing the entire page. We could have said fb$('word').innerHTML = formInput.value, but setting innerHTML directly on pages served as application/xhtml+xml fails. fb.setInnerHTML works everywhere.

The final piece of wiring to make this work is to set floatbox to run our update function when the floatbox closes. We do this by setting a beforeBoxEnd event callback in the rev tag of the anchor that is used to launch the box.

That's all there is to it. It takes a lot of words to describe, but really it's just 3 or 4 lines of code wired up to run when the floatbox closes. You could of course insert something more complex into the updated element, including a string of html. I'll follow this posting up with a similar, but more useful, one that uses ajax to pass the input values around.

Ok, there's also an ajaxian version of this update-from-a-form at http://test.randomous.com/misc/magicAjax. It's very much the same as the previous example except it passes the form values to a php backend page letting you do useful things like update a database.

See the above posting and example for the context of what we're doing here. The change to using ajax is a fairly minor one. The only thing that has changed is that the update function has got a couple more lines to make the ajax calls, and there's a small php backend file to handle those ajax requests.

Here's the updated update function:

function update() {
	var formDoc = fb.getIframeDocument(),
	    formInput = formDoc.getElementById('magic'),
	    formValue = 'magicWord=' + encodeURIComponent(formInput.value);
	fb.ajax({ url:'magicAjaxPhp', postData:formValue, updateNode:'word' });
}

This is a fairly straightforward function. We're using floatbox's builtin ajax function. See the API reference for details.

First we fetch the value from the input element on our floatboxed form, much the same way we did in the example in the previous posting, encoding the value so that it can be transmitted reliably. Then we call floatbox's ajax function, posting the form data and updating the 'word' span on the main page with the returned content from the ajax call.

The backend page in this case is pretty straightforward. It's just returning the posted form value.

<?php
$magicWord = $_POST[&#039;magicWord&#039;];
// do stuff here, like update a db
echo &#039;<b>&#039;.$magicWord.&#039;</b>&#039;;
?>

In the real world, you would do something more interesting and useful with the submitted data.

A couple of notes:
- You need version 3.53.0 or later of floatbox for the ajax library functions.
- We used a POST here, but you could do a GET if you prefer. Just don't define postData and instead use a query string on the url, like ?magicWord=value. In both the postData string and the query string, you separate multiple name=value pairs with ampersands.
- We hooked into floatbox's beforeBoxEnd event callback, but it's probably more useful to fire the code from an "OK" or "Submit" button on the form which calls parent.update(); parent.fb.end(); and have a "Cancel" button that does only parent.fb.end().

There's lots of different ways to structure forms, functions and AJAX calls. The sample given here is just one approach and my not be your preferred way or the best for your circumstances. One alternate approach is to place the js code into the child form page and not have it on the main page. In fact, if I was doing these examples over, I'd probably do it with the code on the child form page as it's then more self-contained and just a little bit simpler.

Another quite different approach doesn't use ajax at all, but rather just does a normal form submit to a backend page. You can then have that backend page return the javascript to the floatboxed iframe document and have that javascript update the main page and exit the box. There's lots of ways to skin a cat and one fine day I'll put up tutorials of most of the interesting ones, including duplicating the info found in these two postings.

This is excellent stuff. Many thanks for this.

A quick question, what if both parent and child are iframes and both sit in the same domain ? Using your example, you wrote

<script type="text/javascript">function update() { var formDoc = fb.getIframeDocument(), formInput = formDoc.getElementById('magic'); fb.setInnerHTML(fb$('word'), formInput.value);}</script>

and

The magic word is <span id="word">not yet known</span>.<br /><a href="magicBox" class="floatbox" rev="beforeBoxEnd:`update();` width:200

Given my limited scripting knowledge, I assume you are posting from a form that sits on the main page and posting to a iframe that sits in floatbox. What if the form sits in a iframe on the main page and needs to post to anothert iframe ?

Since communication between two iframes is not a floatbox-specific action, I won't pretend to offer expert advice about it. Instead, let me refer you to our good friend the search engine for information on this topic. One short, good and correct article that covers this is at http://www.dyn-web.com/tutorials/iframes/refs.php.

Many thanks Admin

Thanks for this thread!

Impeccable support I must say. There is no website or support forum I surf that gives such concise, lucid, and thorough support, along with real-world solutions to tackle and solve webmaster issues. Admin, you're truly a diamond in the rough when it comes to forum/email support of a product. The majority of support forums use a simple two line SMS (cell phone style) text message with acronym's to answer a customer's questions. But, not here.

I don't know when I will use this code and feature, but I definitely will. Thanks to both of you for planting a seed. I can think of several scenarios where this will be a great feature, particularly, the PHP form passes to update the database.

Good to see you Admin again and I hope you are eating lots of "fish". In lieu of Sole, I'm living off whiskey and buried in work over the past couple of months. Working so hard, I often wonder why I'm still going broke. Do you have any wisdom to impart here?

Been out of pocket here, and it's good to see you haven't last your spark and input in this forum.

Thanks again for the detailed, descriptive thread. Always informative.

I'd like to do something similar to this but for a photo sharing website where I want to call a JS function in the parent floatbox. To clarify, the base page loads a floatbox that loads another floatbox all of which are using iframes. I want the 2nd floatbox to call a function in the 1st floatbox.

I can get the 1st floatbox using:

var parentIframe = fb.getIframeDocument(fb.lastChild.parent.fbContent);

Shouldn't I be able then to execute a JS function (properly declared in that floatbox's iframe document) with something like parentIframe.myFunctionName()?

All content is off the same server/domain btw...

Any help is appreciated!

-b

You're close.
First, it's easier to get the 1st floatbox than the way you are doing it. "fb" is the 1st floatbox.
Second, you want to get the iframe's window, not its document. Functions and global vars attach to the window object.
var parentWin = fb.getIframeWindow(fb.fbContent);
parentWin.myFunc();

Oh, and if you don't have floatbox.js included in the second stacked iframe page, use parent.fb instead of fb.

Thank you, works perfectly.

-b