Jquery post data

Question

I have this JS code:

var recipesPost = function(name, ingredients, steps) {
    $.post('/api/recipes',
        {
            name: name,
            ingredients: ingredients,
            steps: steps
        }
    ).done(function(data) {
        $("#result").append("RECIPES POST: OK!<br/>" + JSON.stringify(data) + "<br/>");
    }).error(function(error) {
        $("#result").prepend(JSON.stringify(error));
    });
};

Unfortunately, the HTTP request does not contain my data. It contains two empty variables (steps and ingredients) and name doesn't appear anywhere. Here's the raw request:

POST http://XXXXXXXXX.com/api/recipes HTTP/1.1
Host: XXXXXXXXX.com
Connection: keep-alive
Referer: http://XXXXXXXXX.com/
Content-Length: 19
Origin: http://XXXXXXXXX.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.68 Safari/534.24
Content-Type: application/x-www-form-urlencoded
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

ingredients=&steps=

Any idea of what could be going on? The strange this is, if I replace the data I'm sending with string literals, then it gets sent correctly:

{
    name: "Foo",
    ingredients: "Bar",
    steps: "FooBar"
}

I've already checked with a JS debugger that name, ingredients and steps variables contain valid data when the call to recipesPost happens.

Update: Reigl suggested I try calling recipesPost("Foo", "Bar", "FooBar"). That worked.

I just debugged again, and although the type of my parameters is String (with my original code), they have a toJSON method. I am passing data from a form using JQuery, like $('#recipe_name').attr('value') (recipe_name being an HTML input). Is that an incorrect way of doing it?

Here's the calling HTML

<form>
    Name: <input id="recipe_name" type="text" /><br/>
    Ingredients: <textarea id="recipe_ingredients"></textarea><br/>
    Steps: <textarea id="recipe_steps"></textarea><br/>
    <button type="button" onclick="recipesPost($('#recipe_name').attr('value'),$('#recipe_ingredients').text(),$('#recipe_steps').text())">Send</button>
</form>

Answer 1

$('#recipe_name').attr('value') is not a correct way on doing it IMO.

you can use,

• .val()
• .prop()

more proper way of doing your current code is this,

change your html

<form>
    Name: <input id="recipe_name" type="text" /><br/>
    Ingredients: <textarea id="recipe_ingredients"></textarea><br/>
    Steps: <textarea id="recipe_steps"></textarea><br/>
    <button type="submit" id="send">Send</button>
</form>

somewhere on your js do

$('#send').click(function(e){
    var rn = $('#recipe_name').val(),
        ri = $('#recipe_ingredients').val(),
        rs = $('#recipe_steps').val();

    recipesPost(rn,ri,rs);

    e.preventDefault();
});

Answer 2

Edit: Per conversation with the op, the issue was with the JQuery version. Upgrading to 1.6.1 fixed the issue.

Try quoting your key names:

    {
        'name': name,
        'ingredients': ingredients,
        'steps': steps
    }

Answer 3

What's in your name variable/post value? Have you tried an alert before your $.post to make sure there is a value for each of the variables you're using?