jQuery旋转和Ajax保存

Have a problem with a little jquery function. Just not sure where to put the second part of the function to make it work. Can someone help with the flow?

<div id="image-tools"><button type="button" id="rotate">Rotate</button></div>
    <div id="image-frame"><img id="image" src="../../images/DBImages/<?php echo $image_data['image_id'] ?>.jpg"></div>

    <script type="text/javascript" src="includes/jQueryRotate.2.1.js"></script>

<script type="text/javascript">
    function rotate() {
    var value = 0;
    $("#rotate").rotate({
        bind:
            {
            click: function() {
                value+=90;
                $("#image").rotate({ angle: value });
                }
            }
    },  function() {
                $.post('script/image_rotate_save.php',
                {
                    file: $("#image").attr('src'),
                    value: value
                }, function(response) {
                    console.log(response)
                });
        });
}
</script>

What's it do? You click a button to rotate the image through 90deg, the rotate function rotates the image on the page (this works fine) and then the ajax function updates the image on the server to the new orientation.

Even when I change the url to the image_rotate_save.php I do not get a 404 error so as far as I can tell the ajax part of the function is not even firing.

Any ideas?