jquery $.post with Twitter API works, but callback function is not returning data

Question

I have a form on my page where I type a message that uses the Twitter API (via Simple PHP Wrapper for Twitter API v1.1) to post a tweet. The tweets are successfully posting. However, I would like to display the php output in a div window, and have been unsuccessful so far.

I have gone to just trying to see if I could get the response from the $.post in the console using "data" in the call back. According to what I am reading, that should contain the response from the $.post if successful. However, I am not getting any output into my console.

here is my script that is calling it all:

    <script>
        $(document).ready(function(){
            $("#tweetButton").click(function(){
                var data = $('#tweetMsg').serialize();
                $.post('Tweet.php', data, function(data){
                    console.log(data);
                }, 'html');
            });
        });
    </script>

here is the form:

    <form>
        <label for="tweetMsg">Enter Your Message:</label>
        <textarea id="tweetMsg" name="tweetMsg" rows="4" cols="50"></textarea>
        <input type="submit" id="tweetButton" class="button" name="tweet" value="Send Tweet">
    </form>

the PHP file is successfully posting the tweet to my account, and viewed on its own, does return the content of the request.

<?php

    require("TwitterAPIExchange.php");
    require("config.php");

$message = $_POST["tweetMsg"];
$settings = array(
    'oauth_access_token' => TWITTER_ACCESS_TOKEN,
    'oauth_access_token_secret' => TWITTER_ACCESS_TOKEN_SECRET,
    'consumer_key' => TWITTER_CONSUMER_KEY,
    'consumer_secret' => TWITTER_CONSUMER_SECRET,
);

$url = 'https://api.twitter.com/1.1/statuses/update.json';
$requestMethod = 'POST';
$apiData = array(
    'status' => $message

);

$twitter = new TwitterAPIExchange($settings);
$twitter -> buildOauth($url, $requestMethod);
$twitter -> setPostfields($apiData);
$response = $twitter -> performRequest(true, Array (CURLOPT_SSL_VERIFYHOST => 0, CURLOPT_SSL_VERIFYPEER => 0));

echo '<pre>';
print_r (json_decode($response, true));

?>

Thanks for your assistance!

Answer 1

Try using $.ajax and use preventDefault() to stop the page reloading when you click on tweet button.

Use this code:

$(document).ready(function() {
  $("#tweetButton").click(function(e) {
    e.preventDefault()
    var data = $('#tweetMsg').serialize();
    $.ajax({
      url: "Tweet.php",
      type: "post",
      dataType: 'html',
      data: data,
      success: function(response) {
        console.log(response)
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
      }
    });
  });
});