Question

我想在我的fancybox中添加一个按钮，它将调用服务器方法。请你帮助我好吗？我正在使用fancyBox2。感谢

Answer 1

实际上很简单。这是一个普通的服务器调用。让我们想象你想询问下面的url（渲染一些json）：http://echo.jsontest.com/key/value/one/two

然后，您只需要在按钮的click事件上绑定服务器调用。像这样：

$.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');
});

或者简单的ajax调用，如果你请求的不是json：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!");
                }

            });
        }
    });
});

在fancybox2中添加按钮，并调用服务器方法

2 个答案: