jquery - fancybox2 にボタンを追加し、サーバーメソッドを呼び出します

Question

サーバーメソッドを呼び出すボタンをファンシーボックスに追加したいと思います。手伝っていただけませんか？私はfancyBox2を使用しています。ありがとう

Answer 1

実際には非常に簡単です。これは単純なサーバー呼び出しです。次の URL (json をレンダリングする) を調べたいと想像してみましょう: http://echo.jsontest.com/key/value/one/two

次に、ボタンのクリック イベントでサーバー呼び出しをバインドするだけです。このようなもの：

$.getJSON('http://echo.jsontest.com/key/value/one/two', function(data) {
    var items = [];
    $.each(data, function(key, val) {
        items.push('<li>' + key + ':' + val + '</li>');
    });

    $('<ul/>', {
        html: items.join('')
    }).appendTo('#myId');
});

または、json 以外のものを要求する場合は、単純な ajax 呼び出し: http://api.jquery.com/jQuery.ajax/

ここで機能サンプルを見つけることができます: http://jsfiddle.net/xavier_seignard/2MDpe/2/

必要な鍵はすべて揃っていると思います。

よろしく

Answer 2

返信ありがとうございますが、別のものを見つけました。それで問題ありません。ここに私のコードがあります:

$(".ad-gallery").on("click", ".ad-image", function () {
    $.fancybox({

        href: $(this).find("img").attr("src"),
        titlePosition: 'outside',
        title: $(this).text(),
        'beforeShow': function () {
            var content = $('.fancybox-inner');  
content = $('.fancybox-inner');
                $('.fancybox-wrap').append('<div class="fancy_print"></div>'); //here I add the buton
                $('.fancy_print').bind("click", function () {//and here, call the function
                    var retVal = confirm("Are you sure you want to order it?");
                    if (retVal == true) {
                            $.ajax({
                                type: "POST",
                                url: "WebForm1.aspx/coucou",
                                data: "{}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                async: true,
                                cache: false,
                                error: function() {
                                            alert("Error");
                                            },
                                success: function (msg) {
                                    alert("The item has been added to your list order!");
                                }
                            })
                        return true;
                    }

                else {
                    alert("The item hasn't been added to your list order!");
                }

            });
        }
    });
});