CODEWITHSUNDEEP
javascriptjquery
Shane Jones
Shane Jones

Reputation: 905

Painful jquery error with Jquery post

I have the below function erroring and its begin a real pain.

For some reason it is saing postData is not defined on the lines marked with error. But I have defined postData and populated it with the returned json from get.php?? Is there something missing here.

<script>
 function postToFeed(shoeID) {

    $.post("get.php",{id: shoeID}, 
                function(data){
                               var postData = data;
                               }, "json");  

    var obj = {
      method: 'feed',
      link: 'https://developers.facebook.com/docs/reference/dialogs/',
      picture: 'http://fbrell.com/f8.jpg',
      name: postData.title, //ERROR
      caption: '<?=SHARE_CAPTION?>',
      description: postData.description //ERROR
    };

    function callback(response){
        if(response['post_id']){
            $.post("vote.php",{id: '<?=(isset($_POST['fbid'])? $_POST['fbid'] : $data['id'])?>', shoe: shoeID, type: 'share'}, 
                            function(score){
                            $("#shoe_"+shoeID).html(score)
                            }); 
        }
    }

    FB.ui(obj,callback);
  }
</script>

Upvotes: 0

Views: 142

Answers (4)

Kevin B
Kevin B

Reputation: 95022

You just need to rearrange your code a little bit:

function postToFeed(shoeID) {
    function callback(response) {
        if (response['post_id']) {
            $.post("vote.php", {
                id: '<?=(isset($_POST['fbid'])? $_POST['fbid'] : $data['id'])?>',
                shoe: shoeID,
                type: 'share'
            }, function(score) {
                $("#shoe_" + shoeID).html(score)
            });
        }
    }

    $.post("get.php", {
        id: shoeID
    }, "json").done(function(postData){
        var obj = {
            method: 'feed',
            link: 'https://developers.facebook.com/docs/reference/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            name: postData.title,
            caption: '<?=SHARE_CAPTION?>',
            description: postData.description
        };
        FB.ui(obj, callback);

    });   
}​

Notice how obj is built and FB.ui() is called only after the original $.post() is done.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Since you have defined it inside the success handler of post it is not accessible. Define postData in the outer scope it will work fine.

function postToFeed(shoeID) {
    var postData;//
    $.post("get.php",{id: shoeID}, 
                function(data){
                               postData = data;
                               }, "json");  

....
....

One more thing to note here. You are using $.post which makes an ajax call asynchronously so even if you define postData in the outer scope it will not work because until the post request executes the postData is null or empty.

So you should execute rest of the code inside the success handler of $.post. Try this.

function postToFeed(shoeID) {

    $.post("get.php",{id: shoeID}, function(data){
      var postData = data;
      var obj = {
           method: 'feed',
           link: 'https://developers.facebook.com/docs/reference/dialogs/',
           picture: 'http://fbrell.com/f8.jpg',
           name: postData.title, //ERROR
           caption: '<?=SHARE_CAPTION?>',
           description: postData.description //ERROR
      };

      function callback(response){
        if(response['post_id']){
            $.post("vote.php",{id: '<?=(isset($_POST['fbid'])? $_POST['fbid'] : $data['id'])?>', shoe: shoeID, type: 'share'}, 
                            function(score){
                            $("#shoe_"+shoeID).html(score)
                            }); 
        }
      }

      FB.ui(obj,callback);

    }, "json"); //$.post-End 

}

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Move postData outside the callback so it is accessible inside obj..

var postData;
$.post("get.php",{id: shoeID}, 
           function(data){
               postData = data;
           }, 
           "json");

Upvotes: 2

Simon Wang
Simon Wang

Reputation: 2943

you should not define it in the inner function, define it outside and only assign the value in that function

<script>
var postData;
function postToFeed(shoeID) {


$.post("get.php",{id: shoeID}, 
            function(data){
                             postData = data;
                           }, "json");  

var obj = {
  method: 'feed',
  link: 'https://developers.facebook.com/docs/reference/dialogs/',
  picture: 'http://fbrell.com/f8.jpg',
  name: postData.title, //ERROR
  caption: '<?=SHARE_CAPTION?>',
  description: postData.description //ERROR
};

function callback(response){
    if(response['post_id']){
        $.post("vote.php",{id: '<?=(isset($_POST['fbid'])? $_POST['fbid'] : $data['id'])?>', shoe: shoeID, type: 'share'}, 
                        function(score){
                        $("#shoe_"+shoeID).html(score)
                        }); 
    }
}

FB.ui(obj,callback);
}
</script>

Upvotes: 1

Related Questions