ajax post to php a null variable

Question

I have a script that copies an entire div into a variable. It works when I alert the data, but It wont work when I try to echo it in php.

<script>
var vin = "<?php echo trim($vin1); ?>";
 function orderImage(){
    var orderIm=$('<div/>').append($('#image-dropzone').clone()).html();    
         $.ajax({
            type: 'POST',
            url: 'orderImage.php?id='+vin,
            data: {ordering:orderIm},
            dataType: 'html'
    })};
</script>

And my php:

<?php 
echo $_GET['id'];
echo '<br />';
echo gettype($_POST['ordering']);  

echo $_POST['ordering'];  

?>

Output:

JS2YB417785105302
NULL

Answer 1

You can using full post request

<script>
var vin = "<?php echo trim($vin1); ?>";
 function orderImage(){
    var orderIm=$('<div/>').append($('#image-dropzone').clone()).html();    
         $.ajax({
            type: 'POST',
            url: 'orderImage.php,
            data: {ordering:orderIm,id:vin}, // added id:vin on POST parameter
            dataType: 'html'
    })};
</script>

And my php :

<?php 
echo $_POST['id']; // converted into $_POST
echo '<br />';
echo gettype($_POST['ordering']);  

echo $_POST['ordering'];

?>

Answer 2

when i use the succes function :

var vin = "<?php echo trim($vin1); ?>";
 function orderImage(){
    var orderIm=$('<div/>').append($('#image-dropzone').clone()).html();   
             $.ajax({
            type: 'POST',
            url: 'orderImage.php',
            data: {ordering:orderIm,id:vin}, 
            dataType: 'html',
             success: function(data) {
             alert(data)}
    })};

it shows the correct data. i guess it means that its solved. i just dont see it in the php file while i access it via the console log--> double clicking on XHR finished loading.

even tho the variables types shows NULL in the php script, i can still manipulate the content of them and everything is working fine !