web-dev-qa-db-ja.com

動的AJAXコンテンツをFancyboxにロードしています

このシナリオ：

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

さて、ページのどこかに結果を挿入する代わりに、ファンシーボックスに表示したいと思います。私は単にこれを機能させることができません。

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）を使用しています。

jqueryajaxfancybox
8
Nix

コンテンツをページの非表示のコンテナーにロードし、そのコンテンツをFancyboxに表示しました。

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

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

});

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

それでも、もっと良い解決策があるはずです。誰かが知っているなら、私はそれを聞いてみたいです！

4
Nix

これは古い質問であることは知っていますが、最近、同様の問題に対処する必要がありました。これがajaxをfancyboxにロードするために私がしたことです。

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});
14
James Chambless

fancyboxは、設定を渡すことができるパラメーター「ajax」を使用します（- jquery で説明されているように）

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});
11
emfi

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

$.fancybox({
  href : nzData,
  type : 'ajax'
});
9
Janis

同じことをすることに興味がありました。私は同様の解決策を見つけましたが、ここで推奨されている他の解決策とは異なります。両方の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>
2
EternalHour

試してください：

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
1
ori

Fancybox内にnzDataを表示したい場合は、

$.fancybox(nzData,{
 // fancybox options
});
0
JFK

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

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
0
rowilsonH