jQuery + CKEditor = getData() for form submit not working

Question

Searched and found many articles from before v4 of current CKEDitor. Syntax has changed a bit and I am just not getting where I want...

I am using CKEditor in my form and after the submit button is clicked, the below jQuery code is fired, resulting in an AJAX submit.

The problem is that I just cannot get CKEditor to get the latest value of the new_content textarea field before submit, always leaving me with the original placeholder text instead of the user entered text.

Appreciate any help on this, I spent way too much time on this already. Thank you

HTML:

<textarea id="new_content" name="new_content" rows="20" cols="80">
    Your article content goes here...
</textarea>

jQuery:

// when clicking SUBMIT button
$('#btn_submit').click(function() {
    console.log('Submit button clicked.');


        // getdata for CKEditor textarea
        CKEDITOR.instances['new_content'].getData();

        $.ajax({
            type: 'POST',
            url: '../../controllers/newsroom_addNewArticle.php',
            data: 'action=add_new_article&' + $('#new_newsroom_article').serialize(),
            cache: false,
            beforeSend: function() {
                // nothing
            },
            complete: function() {
                console.log('Ajax POST request complete.');
            },
            success: function(response) {
                console.log(response);
                var data = JSON.parse(response);

            },
            error: function(xhr, status, error) {
                console.log('Ajax POST request failed.');
                console.error(xhr);
                alert('Error: ' + xhr);
            }
        });

});