How to refresh content loaded inside fancybox with ajax submit

Question

I have some form that I'm loading inside a Fancybox. When I submit this with ajax, and I get success, I want to reload this same page, inside this Fancybox window, but i don't know how.

I already have tried $.fancybox.update() but didn't work. I'm using Fancybox 2.

Can anyone help?

Here is my code:

on parent page:

<script type="text/javascript" charset="utf-8">
    $("a.open-modal").fancybox({type: 'ajax'});
</script>

<a class="open-modal" href="edita_cadastro_imagens.asp?codProd=<%= rs_Pesq("codProd")%>&codCor=<%= rs_Pesq("codCor")%><%=str_pesq%>&ref=<%= rs_Pesq("referencia")%>"><i class="fa fa-camera fa-lg"></i></a>

Here is the code of the page: edita_cadastro_imagens.asp

my Ajax code:

<script type="text/javascript">

    $(document).on('submit', '#f1', function(event) {

        event.preventDefault();

        var formData = new FormData($(this)[0]);
        console.log(formData);

        $.ajax({
            url: "upload_produtos.asp?cod_prod=<%=codProd%>&cod_cor=<%=codCor%>&Num_Img=1",
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                if (data == "erro") {
                    alert("erro")
                } else {
                    //$.fancybox.close();
                    $.fancybox.update();
                }
            }
        });

    });

</script>

and my form:

<form name="f1" id="f1" action="" method="post" enctype="multipart/form-data">
                <div class="div_coluna col_image">
                    <% if objFSO.FileExists(Server.MapPath("../produtos/mini") & "/"& codProd&"_"&codCor&" (1).jpg") then %>
                        <img src="../produtos/mini/<%= codProd%>_<%= codCor%> (1).jpg" border="0"/>
                    <% else %>
                        <img src= "imagens/imgNDisp.png" border="0"  height="49px" width="70px"/>
                    <% end if %>
                </div>
                <div class="div_coluna col_field">
                    <input type="file" name="txtArquivo1" accept="image/jpg" class="small_form_control" style="width:90%">
                </div>
                <div class="div_coluna col_bt">
                    <button class="button">ENVIAR</button>
                </div>
                <div class="clear"></div>
            </form>

Answer 1

If you your ajax code is in the fancybox content, which is an iframe, maybe this could work:

success: function (data) {
    if (data == "erro") {
        alert("erro")
    } else {
        location.reload();
    }
}