The page doesn't have to be blank, you could at least have a link back
to where the user came from or something.
But it's true that that isn't quite as clean. The way I do this is to
use ajax on the form page, and do the thickboxDone() stuff from the
ajax callback. With the form plugin, it's really simple:
<form id="my_form" action="/login">...</form>
$('#my_form').ajaxForm({
url: "/login-ajax", // Change the url to the ajax version
dataType: "json",
success: function(data) {
if(data.loginSuccessful) {
parent.thickboxDone();
} else {
$("#error_output").html(data.errorMessage);
}
}
});
Then, without javascript your form will go to /login, with javascript
it will do to /login-ajax. The ajax version just returns some json
like: {loginSuccessful: false, errorMessage: "Incorrect username or
password"} or {loginSuccessful: true}
If you want to get snazzy, you can disable the form input and show an
indicator while it's processing:
$('#my_form').ajaxForm({
url: "/login-ajax", // Change the url to the ajax version
dataType: "json",
beforeSubmit: function() {
// Disables all form inputs. Would want to be
// more selective if there were more forms on this page.
$("input").attr("disabled", "disabled");
$("#loading").show();
},
success: function(data) {
if(data.loginSuccessful) {
parent.thickboxDone();
} else {
$("#error_output").html(data.errorMessage);
// Don't forget to re-enable the form elements
$("input").removeAttr("disabled");
$("#loading").hide();
}
}
});
This is from (tired) memory, so it may need a little tweaking, but you
get the idea. Form plugin is here:
http://www.malsup.com/jquery/form/
One more thing. If you want, you don't even have to change the URL for
doing the ajax version. jQuery sets the "X-Requested-With" request
header to "XmlHttpRequest" for ajax requests, so you could just check
for that on the server and return JSON if you find it and your regular
HTML if you don't.
Good luck with it.
--Erik
On 4/4/07, Chris W. Parker <[EMAIL PROTECTED]> wrote:
On Wednesday, April 04, 2007 11:05 AM Erik Beeson <> said:
> It's almost 11am and I'm still awake from yesterday. I'm very likely
> not communicating well :)
It's ok. Thanks for taking the time to answer my question. :)
> If you're using separate
> pages for your form, you could have the "success" page simply look
> like:
>
<html><head><script>parent.thickboxDone()</script></head><body></body></
html>
>
> So when your form is successfully processed, your top level
> thickboxDone() function will get called. Bear in mind that this will
> only work if your form and your main page are on the exact same
> domain. If only the last part of the domain is the same (like one is
> www.site.com and the other is login.site.com), you can still make it
> work by setting document.domain to 'site.com' on both pages.
I think I can work with this but it becomes a bit of a kludge. (Not a
knock at you of course.)
Here are two scenarios:
Current, without Javascript:
Parent page > form page loads > back to parent page
Proposed solution, with Javascript:
Parent page > thickbox loads form page > successful page loads, thickbox
closes, back to parent
Proposed solution, without Javascript:
Parent page > form page loads > successful page loads, user just sits at
a blank page
I want to start writing my apps with progressive enhancement in mind so
considering the above, what are my other options?
I can say that I only chose the IFrame method of TB because it worked
correctly with my stylesheet. When I loaded the form page through the
AJAX method the styles from my page were totally ignored. I could go
back to the AJAX method if it would make my goal easier to achieve.
Thanks,
Chris.
