jquery- how to run ajax in document ready?

Question

I'm trying to load information with ajax when my page loads but no information is displaying, can anyone spot what I'm doing wrong?

$(document).ready(function (){
    $.ajax({                                      
      url: 'ajax_load.php',              
      type: "post",          
      data: "artist=<?php echo $artist; ?>",
      dataType: 'html',                
      beforeSend: function() {
          $('#current_page').append("loading..");
          },
      success: finished(html),
   });
});

function finished(result) {
    $('#current_page').append(result);
};

ajax_load.php contains:

<?php

if(isset($_POST['artist'])) {
   $artist = $_POST['artist'];
   echo $artist;
}

echo "test";

?>

the html part of the page is fine

Answer 1

You need to change the value of the success option to be a reference to a function:

$(document).ready(function (){
    $.ajax({                                      
      url: 'ajax_load.php',              
      type: "post",          
      data: "artist=<?php echo $artist; ?>",
      dataType: 'html',                
      beforeSend: function() {
          $('#current_page').append("loading..");
          },
      success: finished //Change to this
   });
});

Currently you are setting success to the return value of finished , which is undefined . If you check your browser console you will likely be getting an error along the lines of "undefined is not a function".