Question

我正在尝试使用表单来填充fancybox。基本上，我使用“获取”方法将数据传递到将在fancybox中填充谷歌地图数据的网址。基本上，用户进入城市，并填充到fancybox中的mysite.com/city。我甚至无法加载fancybox。

我正在使用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>

Answer 1

根据您的示例代码，我认为您应该选择datacity作为ID而不是CLASS。

在当前形式中，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) {

Answer 2

通过更简单的解决方案解决了问题 - 无需将表单转换为ajax

$(function() {

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

    $form = $(this);

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

    return false;

});


});

使用Fancybox和AJAX进行预览

2 个答案: