I´m working on a wordpress template.

I´m trying to load the single.php of a post using ajax. I´m doing all the load thru a loader.js file that has this:

// load single project page         
$("#project_slider").live("click", function(){
    $("#content").hide();
    $("#content").load("<?php the_permalink(); ?>", function(){
    $(this).fadeIn("slow");
    });
});

The problem is that I can´t just put on the .load because it doesn´t works.

this is the markup:

<div id="project_page" class="item">
    <a href="#">
        <img src="<?php the_field('artworks_thumbnail'); ?>" alt="" width="240" height="173">
    </a>
    <div class="art_title">
        <p>SWEET LIFE</p>
    </div>
    <div class="mask"></div>
</div>

How can I add the permalink via the loader.js?