Passing the signed_request along with the AJAX call to an ActionMethod decorated with CanvasAuthorize

Question

This is a follow-up to AJAX Call Does Not Trigger Action Method When Decorated With CanvasAuthorize

So I found the following links and it seems that this is a common problem:

http://facebooksdk.codeplex.com/discussions/251878

http://facebooksdk.codeplex.com/discussions/250820

I tried to follow the advice by prabir but I couldn't get it to work...

Here's my setup:

I have the following snippet in the page where the button that triggers the whole post to facebook is located:

@if (!string.IsNullOrEmpty(Request.Params["signed_request"]))
{
    <input type="hidden" id="signedReq" value="@Request.Params["signed_request"]" />
}

And then I have this snippet (inside a script tag inside the same page):

    var signedRequest = $('#signedReq').val();
    $('.facebookIcon').click(function () {
        var thisItem = $(this).parent().parent();
        var msg = thisItem.find('.compItemDescription').text();
        var title = thisItem.find('.compareItemTitle').text();
        var itemLink = thisItem.find('.compareItemTitle').attr('href');
        var img = thisItem.find('img').first().attr('src');
        postOnFacebook(msg, itemLink, img, title, signedRequest);
    });

And finally, inside an external js file I have the following function:

/*Facebook post item to wall*/
function postOnFacebook(msg, itemLink, pic, itemTitle, signedReq) {
    console.log(signedReq);
    var siteUrl = 'http://www.localhost:2732';
    $.ajax({
        url: '/Facebook/PostItem',
        data: {
            'message': msg,
            'link': siteUrl + itemLink,
            'picture': siteUrl + pic,
            'name' : itemTitle,
            'signed_request': signedReq
        },
        type: 'get',
        success: function(data) {
            if(data.result == "success") {
                alert("item was posted on facebook");
            }
        }
    });
}

But signedReq is always undefined. And I'm not really sure I should be passing the 'signed_request' field inside the data object. Any thoughts?

Answer 1

Make sure you hidden input field is being populated.

Also, when you try to pull the ID of the input field via JQuery, you might not be referencing the proper element since .NET butcher's ID's of anything that's run on the server.

When I use the hidden input field trick, I set the jquery value like so:

var signedRequest = $('#<%=signedReq.ClientID %>').val();

This way, I'm getting the identifier that .NET is giving to the HTML element.

Hope that helps.

Answer 2

Just a guess - in your hidden field: id="signed_request" instead of id="signedReq"