title: Ajax error not a function when called from document.ready()
body: <p>I am getting an error on my ajax request but only if I call it from document.ready.</p>
  
  <p>If I run the below script all works OK but username has been manually entered and not coming from the DOM</p>
  
  <pre><code>getProfile("steve8428");
  
  function getProfile(userName) {
    var data = { username: userName };
    var dataSend = JSON.stringify(data);
    console.log(dataSend);
    $.ajax({
      url: "fetchProfile.php",
      type: "POST",
      data: dataSend,
      dataType: "json",
      success: function(data) {
        console.log(data);
      }
    });
  }
  </code></pre>
  
  <p>This would indicate AjaX and jQuery including my php are all working ok.</p>
  
  <p>But I want to get the username variable from a HTML element which is created on my main page using php. So I tried the following and here is where I get the error "jquery-3.2.1.min.js:2 Uncaught TypeError: $.ajax is not a function"</p>
  
  <pre><code>$(document).ready(function() {
    var userName = $("#username").html();
    getProfile(userName);
  });
  
  function getProfile(userName) {
    var data = { username: userName };
    var dataSend = JSON.stringify(data);
    console.log(dataSend);
    $.ajax({
      url: "fetchProfile.php",
      type: "POST",
      data: dataSend,
      dataType: "json",
      success: function(data) {
        console.log(data);
      }
    });
  }
  </code></pre>
  
  <p>To give some back ground the variable username is coming from a php file which is generated from a php database request which is why I am doing the document.ready to ensure the username s available before making the Ajax request.</p>
  
  <p>Am i missing something or do I need to look at a better way to do this</p>