I'm trying to call a function called loadPage on click of an a tag and pass it a URL to replace the current content in a div called main via Ajax.

However, my code isn't replacing the content already in the main div or even making the Ajax call as far as I can see and I can't see where it's going wrong.

JavaScript:

$(document).ready(function () {

    function loadPage(urlToLoad) {

        $.ajax({

            type: POST,

            alert(urlToLoad);

            url: urlToLoad,

            data: dataString,

            success: function (returnedData) {

                $('#main').html(returnedData);

            }

        });

    }

});

HTML:

<nav>

    <ul>

        <li><a onclick=loadPage('load.php'); href=javascript:void(0) class=nav><img src=news.png alt=Latest news width=81 height=61 class=navImage />Latest news</a>

        </li>

    </ul>

</nav>

<div id=main>

    <section id=mainContent>abc</section>

</div>