Получить предварительный просмотр с Fancybox и AJAX

Question

Я пытаюсь использовать форму для заполнения fancybox. По сути, я использую метод «get» для передачи данных на URL-адрес, который будет заполнять данные карты google в fancybox. В принципе, пользователь входит в город, и он заполняет mysite.com/city в fancybox). Я даже не могу загрузить 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

решить проблему с более простой solution-- не нужно преобразовать формы к ajax

$(function() { 

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

    $form = $(this); 

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

    return false; 

}); 


}); 

Answer 2

Учитывая ваш пример кода, я считаю, вы должны быть выбор datacity в качестве идентификатора, а не 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) {