Setting Cookie with Ajax Request

Question

I have a php page with a form, that has a button. When the button is clicked, a jquery function is run, which performs some validation tests, then submits the form using ajax. In the php script run by ajax, a cookie is set. Immediatly after the cookie is set, I then try to get the cookie value, which I echo from the script and spit out in the success function of the ajax request. The cookie value hasn't set.

Code is as follows.

mainpage.php

<script type="text/javascript">
    $( document ).ready(function()
    {
        $('#submit_compare_stage1').click(function()
        {
            //Validation stuff

            if (passed_validation)
            {
                var form_data = $('#compare_form').serialize(); //Collect query details into a form

                $.ajax({
                    type: "POST",
                    url: "scripts/process_compare.php",
                    data: form_data,

                    success: function(data)
                    {
                        alert(data);
                    },

                    error: function(jqXHR, textStatus, errorThrown)
                    {
                        //Error stuff
                    }
                });
            }

            return false;
        });
    });
</script>

<form name="compare_form" id="compare_form" action="">              
    ....

    <button id='submit_compare_stage1' name='submit_compare_stage1'>Next</button>
</form> 

process_compare.php

<?php
    //MySQL Stuff

    makeCookie('cs', '2');

    echo 'hi' . getCookie('cs', false);

    echo "success";

    function makeCookie($name, $contents, $length = 3600)
    {
        // Create a new cookie
        setcookie($name, $contents, time() + $length, '/');
    }

    function getCookie($name, $delete = true) 
    {
        // Return the contents of a cookie and delete it if requested

        $contents = $_COOKIE[$name];

        if($delete) {
            setcookie($name, '', time() - 3600, '/');
            setcookie($name, '', time() - 3600);
        }

        return $contents;
     }
?>

The ajax request is posting alert messages saying "hisuccess" so the cookie isn't being set.

I'm not sure if it's because the page needs refreshing or something else, but I do know the code used to work when we had a regular submit the form using action="/process_compare.php" and an iframe to put results into.

Can anyone help?

Solution

A cookie is sent as a header of the response. In the data argument, you get the body of the response, not the headers.

It seems, that the headers of the response, you get from getResponseHeader() or MDN - getAllResponseHeaders(), do not include the Set-Cookie headers.

But the cookies are handled transparently by the browser. So, in order to access the cookies, you can use the document.cookie property

$.ajax({
    ...
    success: function(data, status, jqxhr) {
        var cookies = [];
        if (document.cookie)
            cookies = document.cookie.split('; ');

        // do something with the cookies
    },
});

or use the jQuery Cookie plugin available at github.

Comments

[Pippa Rose Smith]

Ok, I think I understand. So what do I need to add to my ajax code to make the cookie readable by the rest of the program at a later date?

[Pippa Rose Smith]

Thanks very much Olaf :)

[Pippa Rose Smith]

Sorry, when I actually tested it, the variable cookie comes back with null :(

[Olaf Dietsche]

@PippaRoseSmith I tested this myself and can confirm the missing cookie headers. Right now, the only way I see is using document.cookie, see updated answer.

[Pippa Rose Smith]

Thanks, I don't know why that works, but it just does :)