jQuery AJAX request returns NULL from PHP
<p>Here is the code I am working on for my Wordpress site:</p>

<p><strong>jQuery:</strong></p>

<pre><code>jQuery(document).ready(function($)
{
    var actionValue;

    $(".tabRow li").on('click', function(event)
    {
            event.preventDefault(); //override default behaviour

            var clicked = $(this); //caches click so we don't scan DOM again

            if(clicked.attr('id')=="tabAddData") //tab1 clicked
            {
                    actionValue = "tab1Clicked";
            }

            $("li").removeClass("selected");
            clicked.addClass("selected");

            alert ('starting ajax call');
            $.ajax(
                    ajaxObject.ajaxurl, //request gets sent to this url
                    { //start of [options]
                            type: 'POST',

                            dataType: 'json', //type of data expected back from server

                            //data to send to server (JSON format)
                            data:
                            {
                                    action: 'ajaxAction',
                                    nonce: ajaxObject.nonce,
                                    actionName: actionValue
                            }
                    } //end of [options]
            ) //end ajax(), the other fuctions are chained to it (.done .fail .always)

            .done (function(data)
            {
                    alert ('success function');
                    if(actionValue == "tab1Clicked") //tab1 clicked
                    {
                            $('#dataSection').empty();
                            $('#dataSection').append(data);
                    }
            }) //end of done (success) function

            .fail (function(xhr, desc, err)
            {
                    alert ('error function');
                    console.log(xhr);
                    console.log("Details: " + desc + "\nError:" + err);
            }) //end of fail (error) function
    }); //end of onclick
});
</code></pre>

<p><strong>PHP:</strong></p>

<pre><code>&lt;?php
$my_action='ajaxAction';

if(defined('DOING_AJAX') &amp;&amp; DOING_AJAX)//check if AJAX is loaded and working
{
    //for logged in users
    add_action('wp_ajax_'.$my_action, 'ajaxResponse');
}

function ajaxResponse()
{
    if(wp_verify_nonce($_POST['nonce'], 'ajaxAction'))
    {
            if($_POST['actionName'] == "tab1Clicked")
            {
                    $addDataSection = getAddDataSection();
                    $response=array(
                            'status' =&gt; 'success',
                            'addDataSection' =&gt; $addDataSection
                    );
                    header('Content-type:application/json;charset=utf-8');
                    echo json_encode($response);//encodes the jQuery array into json format
                    die;
            }
    }
}

function getAddDataSection()
{   
    //lots of echo statements which builds the html code
}
?&gt;
</code></pre>

<p>When I first load my page, my PHP function <code>getAddDataSection()</code> generates the HTML inside my <code>&lt;div id='dataSection&gt;</code>. This works fine.</p>

<p>When I click on tab1, my jQuery AJAX call is supposed to reuse the same PHP function to generate my HTML. This is <em>not</em> working fine.</p>

<p>After I click on tab1, the jQuery fail function is triggered.</p>

<p>When I check Firebug, the response data contains the html generated by my PHP function <code>getDataSection()</code>, followed by a JSON string </p>

<pre><code>{"status":"success","addDataSection":null}
</code></pre>

<p>When replying, keep in mind I'm a newbie. Thanks :)</p>

<p>Updated to include Console error:</p>

<pre><code>Details: parsererror
Error:SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data
</code></pre>