如何使用ajax提交内容在fancybox中加载内容提交

我有一些我在Fancybox内加载的表单。当我提交这个Ajax，并且我获得成功时，我想重新加载这个Fancybox窗口中的同一页面，但我不知道如何。如何使用ajax提交内容在fancybox中加载内容提交

我已经试过$.fancybox.update()但没有工作。我正在使用Fancybox 2.

任何人都可以帮忙吗？

这里是我的代码：

父页面上：

<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>

这里是页面的代码：edita_cadastro_imagens.asp

我的Ajax代码：

<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>

和我形式：

<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>

来源

2014-09-12 Preston

如果你的Ajax代码是在的fancybox内容，这是一个iframe，也许这可以工作：

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

来源

2014-09-12 19:50:00 reyaner

damit ...我喜欢的类型是阿贾克斯，改为iframe中，你的答案工作正常尝试.. 。ty !!! – Preston 2014-09-12 19:53:34

也许我来不及加我的解决方案。但迟到会比从未更好，对吧？：P

我的情况是：我在我加载的ajax fancybox上有一个刷新按钮，我想通过单击此刷新按钮来重新加载fancybox内容。的概念是点击fancybox触发器。

$('body').on('click','#refresh',function(){ 
    $('.fancybox').trigger('click'); 
});

希望它可以帮助

来源

2014-11-26 15:39:08 stephaniemartin

您可以在此，如果你不使用的iframe

jQuery.fancybox({'content' : html});

来源

2015-04-27 14:55:07

只是在现有的iframe中创建一个新的iframe。你需要做一些像$（'。fancybox-iframe'）。contents（）。find（'html'）。html（data）;但我无法让它刷新框架 – CrabbyPete 2016-12-21 15:28:02

如何使用ajax提交内容在fancybox中加载内容提交

回答

相关问题