Fancybox 3 - Unable to POST data

Question

I am unable to send data to a fancybox that opens once a button is clicked.

$('.edit-user').click(function(){
    var data = {};
    data.user_id = $(this).data('id');
    data.system_id = $('input[name="system_id"]').val();
    console.log(data);

    $.fancybox.open({
        maxWidth  : 800,
        fitToView : false,
        width     : '100%',
        height    : 'auto',
        autoSize  : false,
        type        : "ajax",
        src         : "/ajax/edit_user.php",
        settings        : { data : data, type : 'POST' }
    });
});

The click event runs when the button is clicked and the file opens within the fancybox. They only problem is when I check network in the inspector the only value sent across is fancybox=true???

When I attempt to check values using a print_r it comes up as an empty array?

<form id="edit-user">
<pre><?php print_r($_POST)?></pre>
<div class="col-sm-12">
    <div class="col-sm-6 form-group">
        <input type='text' name="first_name" class="form-control input-md" placeholder="Firstname..."/>
    </div>
    <div class="col-sm-6 form-group">
        <input type='text' name="last_name" class="form-control input-md" placeholder="Surname..."/>
    </div>
    <div class="col-sm-6 form-group">
        <input type="email" name="email_address" class="form-control input-md" placeholder="Please Enter An Email Address..."/>
    </div>
    <div class="col-sm-6 form-group">
        <input type="text" name="username" class="form-control input-md" placeholder="Please Enter A Username..."/>
    </div>
    <div class="col-sm-12">
        <button type="submit" id="register" class="btn btn-default pull-right">Update Details</button>
    </div>
</div>
<input type="hidden" name="system_id" value="<?=$_POST['system_id']?>">

Answer 1

You have not passed settings properly to the $.fancybox.open().

Here is the updated code.

   $.fancybox.open({
        maxWidth  : 800,
        fitToView : false,
        width     : '100%',
        height    : 'auto',
        autoSize  : false,
        type        : "ajax",
        src         : "/ajax/edit_user.php",
        ajax: { 
           settings: { data : data, type : 'POST' }
        }
    });

This should work.