8

このシナリオ:

ユーザーが自分の郵便番号を入力フィールドに挿入し、魔法のボタンをクリックすると、自分の場所に最も近い店舗が表示されます。私はサービスを完全に問題なく呼び出し、AJAX の良さをロードします。すべては順調です。

ここで、結果をページのどこかに挿入する代わりに、Fancybox に表示したいと思います。私は単にこれを機能させることはできません。

JavaScript:

$('#button').on('click', function(){    
   // Function to build the URL edited out for simplicity       
   var nzData = '/url.com?Zip=8000 #module';

   $.fancybox({
      ajax: { 
         data: nzData
        }
    });
});

Fancybox がポップアップして、URL からのマークアップを表示することを期待しています ( nzData)。Fancybox が読み込まれますが、コンテンツの代わりに、「要求されたコンテンツを読み込めません。後でもう一度試してください。 」という文字列が表示されます。

これはサービスの問題ではないので、私が何かを見落としているか、Fancybox API をレイプしているだけだと思います。それで、私は何を間違っていますか？

編集: 言い忘れましたが、Fancybox の古いバージョン (v1.3.4) を使用しています。

4

9 に答える 9

15

これは古い質問であることは知っていますが、最近似たようなことに対処しなければなりませんでした。ファンシーボックスにajaxをロードするために私がしたことは次のとおりです。

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});
于 2013-04-12T06:25:30.957 に答える
11

fancybox は、構成を渡すことができるパラメーター「ajax」を使用します ( jqueryで説明されているように)

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});
于 2014-09-06T17:11:40.010 に答える
9

URL を ajax としてロードする場合は、タイプを設定する必要があります -

$.fancybox({
  href : nzData,
  type : 'ajax'
});
于 2012-05-02T09:07:29.650 に答える
4

ページの非表示のコンテナにコンテンツをロードし、そのコンテンツを Fancybox に表示することになりました。

$('#button').on('click', function(){    
   var nzData = '/url.com?Zip=8000 #module';

     $('#foo').load(nzData, function(){
       var foo = $('#foo').html(); 
       $.fancybox(foo);
    });

});

あまりきれいではないことは認めますが、それが機能させる唯一の方法です。今朝、私は別の開発者と話をしました。彼らは、同様の問題で同じ解決策に頼っていました。

それでも、より良い解決策があるはずです。知っている人がいたら、ぜひ聞きたいです！

于 2012-05-02T09:51:08.283 に答える
2

私は同じことをすることに興味がありました。私は同様の解決策にたどり着きましたが、ここで推奨されている他の解決策とは異なります。両方の API のドキュメントを参照すると、これは V1 または V2 で機能するはずです。

$('#button').on('click', function(){    
    $('#foo').load('/content.html', function(){

        var $source = $(this);

        $.fancybox({
            content: $source,
            width: 550,
            title: 'Your Title',
            etc...
        });
    });
});

次に、データのコンテナ。

<div id="foo" style="display: none;"></div>
于 2015-02-16T09:44:06.453 に答える
1

試す：

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
于 2012-05-01T20:18:52.440 に答える
0

nzDataファンシーボックス内に表示したい場合は、使用します

$.fancybox(nzData,{
 // fancybox options
});
于 2012-05-01T23:03:28.373 に答える
0

https://stackoverflow.com/a/10546683/955745

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
于 2014-10-27T21:42:51.077 に答える
-1

これが私がやった方法です：

次の 3 つの要素が必要です。

1) ファンシーボックスのコンテナーとして機能する div が必要です。#fancycontainer と呼びましょう。

2) #fancylink は<a>、fancybox div への href で非表示になっています (この場合はhref="#fancycontainer")

3) #button は、すべてをロードするクリック可能な要素です。

onload 関数に次のコードを追加します。

$('#fancynlink').fancybox();

$('#button').click(function(){
  $.ajax({
    //OPTIONS...
    //..........
    success: function(data){
      //Here goes the code that fills the fancybox div
      $('#fancycontainer').append(blablabla.....);
      //And this launches the fancybox after everything has loaded
      $('#fancylink').trigger('click');
    }
});

これが誰かを助けることを願っています

于 2015-06-15T14:25:13.447 に答える