使用Fancybox和AJAX获取预览

我正在尝试使用表单来填充fancybox。实质上，我使用“get”方法将数据传递给将在fancybox中填充Google地图数据的网址。基本上，用户输入城市，并在fancybox中填入mysite.com/city）。我甚至无法加载fancybox。使用Fancybox和AJAX获取预览

我使用的fancybox 1.3.4

下面是我当前的代码：

<form id="form" class="form" method="get"> 
<label for="search">City:</label> 
<input type="text" name="search" maxlength="50" size="30" /> 
</form> 
<a class="form" data-fancybox-type="ajax" href="URL" id="datacity">Go</a> 

<script> 
$(document).ready(function() { 
    $('.datacity').on("click", function (e) { 
    e.preventDefault(); 
$.ajax({ 
    type: "GET", 
    cache: false, 
    url: this.href, 
    data: $("#form").serializeArray(), // NOTE:I REALIZE IM NOT PASSING A URL PARAMENTER-- Id like it to add href.FORMDATA. and display that in an iframe (below) 
    success: function (data) { 
    $.fancybox(data, { 
     fitToView: false, 
     width: 905, 
     height: 505, 
     autoSize: false, 
     closeClick: false, 
     openEffect: 'none', 
     closeEffect: 'none' 
    }); 
    } 
    }); 
}); 
    }); 
</script>

来源

2013-10-07 user1049946

你加载jQuery？你的控制台中是否有JavaScript错误？ – showdev

我已经加载了没有javascript错误的jQuery – user1049946

你使用的是什么版本的jQuery？ – showdev

解决了一个简单的问题solution--无需转换form to ajax

$(function() { 

$("#form").submit(function() { 

    $form = $(this); 

    $.fancybox({ 
      'href': $form.attr("action") + "?" + $form.serialize(), 
      'type': 'iframe' 
    }); 

    return false; 

}); 


});

来源

2013-10-08 14:06:06 user1049946

鉴于你的示例代码，我相信你应该选择datacity作为一个ID而不是一个类。

在其当前形式中，jQuery选择失败并执行<a href>的默认行为，而不是您的jQuery代码。

要选择这样的：

<a class="form" data-fancybox-type="ajax" href="URL" id="datacity">Go</a>

使用本：

$('#datacity').on("click", function (e) {

，而不是这样的：

$('.datacity').on("click", function (e) {

来源

2013-10-07 23:12:53 showdev

感谢您的建议 - 做出了改变。但它仍然失败。 – user1049946

使用Fancybox和AJAX获取预览

回答

相关问题