$.post not working when element dropped - php

Question

I'm teaching myself jQuery and PHP and I'm having a few problems. I need the element id to be posted to my php script once dropped over my droppable div. The following code does not post when I drag and drop an element over a droppable div. I have tried the following:
I have removed everything apart from an alert box to check that an item has been dropped which it does, so the item is being seen as droppable!.
I have entered some content into the div manually to ensure results can been seen
I have replaced name to var name="test", to test the varible contents.
The javascript file and the php script reside in the same directory, file names are correct. The javascript drag and drop script is included after droppable area
<script type="text/javascript" src="js/drag-drop.js"></script>
I have replaced the result of php script as plain text to see if the problem could be the variable received, nothing returns. So the post does not seem to be getting to the php script. Hope someone can provide a few pointers!
Below is my code, the HTML is just a div.
$(document).ready(function() {
$('#carousel-ul li').draggable({
helper: 'clone',
revert: true
});
$('#drop').droppable({
hoverClass: 'drophover',
accept: '#carousel-ul li',
drop: function(){
//alert("has been accepted and dropped");
var name = ui.helper.attr('id').val();
$.post('javascript.php', { name: name }, function(data){
$('#drop-content').html(data);
});
}
});
});
<?php
//echo "id was posted";
if(isset($_POST['name'])){
$name = $_POST['name'];
var_dump($name);
echo name;
//echo "id was posted inside";
}
?>

Answer 1

The API documentation for the Droppable widget says that the ui parameter is a jQuery object, so you should try something like this:
$('#drop').droppable({
hoverClass: 'drophover',
accept: '#carousel-ul li',
drop: function(event, ui) {
var name = $(ui.helper).attr('id');
var content = $(ui.helper).html();
$.post('javascript.php', { name: name, content: content }, function(data) {
$('#drop-content').html(data);
});
}
});