Not getting text be returned after an Jquery ajax request

Question

I'm trying to pass a name from a javascript file using ajax to a php file which in turn would return a user's about me text. For some reason i keep getting the error Uncaught TypeError: Cannot call method 'createDocumentFragment' of undefined and text from the php file doesn't seem to get returned. I'am completely new to ajax so any help would be appreciated.

Here is my php file the fql query at the bottom should really only be realavent but I don't know if the other neccessary code for facebook interaction might have something to do with the error

<?php
      $app_id = 'APPID';
      $app_secret = 'APP_SECRET';
      $my_url = 'MY_URL';

      $code = $_REQUEST["code"];

     // auth user
     if(empty($code)) {
        $dialog_url = 'https://www.facebook.com/dialog/oauth?client_id=' 
        . $app_id . '&redirect_uri=' . urlencode($my_url) ;
        echo("<script>top.location.href='" . $dialog_url . "'</script>");
      }

      // get user access_token
      $token_url = 'https://graph.facebook.com/oauth/access_token?client_id='
        . $app_id . '&redirect_uri=' . urlencode($my_url) 
        . '&client_secret=' . $app_secret 
        . '&code=' . $code;

      // response is of the format "access_token=AAAC..."
      $access_token = substr(file_get_contents($token_url), 13);

     $graph_url = "https://graph.facebook.com/me?"
        . "access_token=" . $access_token;
      $response = curl_get_file_contents($graph_url);
      $decoded_response = json_decode($response);

     //Check for errors 
      if ($decoded_response->error) {
      // check to see if this is an oAuth error:
        if ($decoded_response->error->type== "OAuthException") {
          // Retrieving a valid access token. 
          $dialog_url= "https://www.facebook.com/dialog/oauth?"
            . "client_id=" . $app_id 
            . "&redirect_uri=" . urlencode($my_url);
          echo("<script> top.location.href='" . $dialog_url 
          . "'</script>");
        }
        else {
          echo "other error has happened";
        }
      } 
      else {
      // success
        echo("success" . $decoded_response->name);
        echo($access_token);
      }


    // note this wrapper function exists in order to circumvent PHP’s 
      //strict obeying of HTTP error codes.  In this case, Facebook 
      //returns error code 400 which PHP obeys and wipes out 
      //the response.
      function curl_get_file_contents($URL) {
        $c = curl_init();
        curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($c, CURLOPT_URL, $URL);
        $contents = curl_exec($c);
        $err  = curl_getinfo($c,CURLINFO_HTTP_CODE);
        curl_close($c);
        if ($contents) return $contents;
        else return FALSE;
      }

    //Gets the users about me using fql
    if($_GET['first_name'] && $_GET['last_name']){
      $last_name;
      $fql_start = 'https://graph.facebook.com/fql?q=';
      $fql_query=  'SELECT about_me FROM user WHERE first_name = "'. $_GET['first_name'] . '" and last_name="'. $_GET['last_name'] . '" and uid in (select uid2 from friend where uid1 = me())';
      $fql_end='&access_token=' . $access_token;
      $fql_query = urlencode($fql_query);
      $fql = file_get_contents($fql_start.$fql_query.$fql_end);
      $fql = json_decode($fql, true); 
      $about_me= $fql['data'][0][about_me];
      echo $about_me;
    }


    ?>

Here is my much smaller javascript file which grabs the name of a user from a header and passes that name to the php file in hopes of getting the user_about_me text in return.

 $('.btn').on('click', function (e) {
    e.preventDefault(); // to prevent the default behavior of anchor a click from redirecting.
    var name = $(this).closest('.span4').find('h3').text();//Get the name of a user from the header
    name = name.split;
    var first_name = name[0];
    var last_name = name[1];
    var button = $(this);
       $.ajax({

                type: "GET",
                url: "fql.php",
                dataType: "text",
                data: {'first_name': first_name, 'last_name': last_name},
                success: function(msg){
                    $(button).text(msg);
                }

    });

    $(this).effect("slide", "normal");
});

Answer 1

If you have not already done so, use Chrome (or FireFox, IE, etc.) developer tools, reload the page or Ajax call, then look in your "Console" and "Network" tabs (or their equivalent) to see what the error is more specifically.

However, I am pretty sure your error might be in the portion of the Javascript where you write the success message ( $(this).text(msg) ) given the error message you are receiving ( ...'createDocumentFragment' of undefined ).

So, in the meantime, you can try hard-coding the DOM object id/class in the success function where you write the message to the page and see if it works, like this:

<div id="myDiv"></div>

     $.ajax({

                    type: "GET",
                    url: "fql.php",
                    data: {'first_name': first_name, 'last_name': last_name},
                    dataType: "text",
                    success: function(msg){
                        $("#myDiv").text(msg);
                    }

        });

Also, notice I set the dataType explictly above. While not always required, it is a good idea to tell jQuery what kind of response type it will receive from the server.