Good description. Thanks.
I notice you're using the deprecated function
fb.loadAnchor which has been replaced by the more appropriately named
fb.start. loadAnchor still works, and will keep doing so, but I just want to give a heads up that the solutions offered here require v3.53 or later.
Also, I would like to refer you to
this thread. It's rather long and doesn't directly address your use case, but it's closely related. It's updating content on the main page based on an action from a form. I'm pointing it out because that is an alternate approach you could take. Instead of refreshing the entire contents of your first floatbox, you could dynamically update a portion of that content in the manner shown in that thread. Where it addresses an element on the main page, you could address an element on your floatboxed page.
It's pretty simple to refresh the content in your first floatbox, but a challenge is getting the timing right. If you refresh it as soon as the user clicks the button, the backend db processing will likely not have completed and the refreshed page won't reflect the changes. So we need to make the submission from the second box, wait for that submission to complete, and then refresh the box. Two ways to do that: post via ajax, or a form submission action. I think ajax is the cleanest.
First, let's build the function that will refresh your first floatbox. The
fb variable points to that box,
fbContent is the container element for your content in that box, and in the case of loading a php page, fbContent is an iframe. To refresh it, we merely need to update its
src attribute. We need to add a random querystring entry to make sure it changes and to make sure the page doesn't reload from cache.
function refreshBox1() {
var src = parent.fb.fbContent && parent.fb.fbContent.src;
if (src) parent.fb.fbContent.src = src + '&rand=' + Math.random();
}Notes:
- If src doesn't initially have a querystring, replace the '&' char with '?'.
- We're using 'parent' here because floatbox.js might not be included on your second form so the
fb var might not be defined in that window.
Now it's just a matter of submitting your mini confirm form and executing the refresh code in response.
Ajax:
Bundle up any post values you need to submit into a string, make an ajax post, and refresh box1 in the callback to that ajax post.
function values() {
var data = 'val1=' + encodeURIComponent('someString');
data += '&val2=' + encodeURIComponent('anotherString');
return data;
}
function onComplete() {
refreshBox1();
parent.fb.lastChild.end();
}
<button
onclick="parent.fb.ajax({ url:'targetPage.php', postData:values(), callback:onComplete });"
>confirm</button>Notes:
- If you want to use a GET rather than a POST, omit the postData entry and put that string on the url's querystring.
- If you don't need to submit any data values, just leave both postData and the querystring out of the picture.
-Make sure targetPage.php returns something (maybe just an empty div) so the ajax call will complete and fire its callback.
-Your backend can know that this is an ajax request by checking that the request header 'X-Requested-With' is set to 'XMLHttpRequest'.
Submit:
You can do a form submit instead of the ajax call if you prefer. In this case, the returned page from the submit action should contain the inline javascript that does what we did above in the ajax callback. That is, the action response should refresh box 1 and then close the top box.
A lot of words, but it's really quite straight-forward. It takes a lot more words and time to describe the process than to implement it.
Cheers...
