adding button in fancybox2, and call server method

Question

I would like to add a button into my fancybox which will call a server method. could you please help me? I'm using fancyBox2. thanks

Answer 1

I thanks you for your response, but I've found something else, and it's ok. here's my code:

$(".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!");
                }

            });
        }
    });
});

Answer 2

It's quite simple actually. It's a plain server call. Lets imagine you want to interrogate the following url (which renders some json) : http://echo.jsontest.com/key/value/one/two

Then you just need to bind the server call on the click event of your button. Something like this:

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

Or a plain ajax call, if you request something else than json : http://api.jquery.com/jQuery.ajax/

You can find a functional sample here : http://jsfiddle.net/xavier_seignard/2MDpe/2/

I think you'll have all the keys you need.

Regards