Displaying a progressbar or error message in a fancybox

Question

Here is what I have in my member.php for my fancybox:

<script type="text/javascript">
    $(document).ready(function() 
    {
            $("a#uploadpage").fancybox({
                'titleShow'     : false
            });
    });
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>

This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)

Thanks a lot, I greatly appreciate it. -Matt

Answer 1

I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change

$("a#uploadpage").fancybox({

to

$("a.uploadpage").fancybox({

fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.

<a rel="myuploadbox" class="uploadpage" ...>

Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).