jQuery ajax returning undefined

Question

I am trying to return a row from my database where the id sent via jquery to the php matches a field value. I am getting back undefined and can't seem to work my way out of it.

My jquery:

function renderPreview( event ) {
    target = event.target.id;

    console.log(target) // should say the id name

            $('#results').removeClass();
            $('#results').addClass(target).html( $('#textInput').val() );
            $('html, body').animate({ scrollTop: 600}, "slow");

    console.log('start ajax')

    $.ajax({
        url: '../test.php',
        type: 'POST',
        data: [{'class' : target}],
        dataType: 'json',
        success: function(data) {
            var id = data[0];
            var name = data[1];
            var style = data[2];
            $('#codeTest').html("<b>id: </b><br />"+id+"<br /><b> name: </b><br />"+name+"<br /><b> style: </b><br />"+style);
        }
    });
};

PHP:

$dbstylename = $_POST['class'];
$result = mysql_query("SELECT * FROM style where stylename like '$dbstylename'");
$array = mysql_fetch_row($result);

echo json_encode($array);

mysql_close($con);
?>

Also is there a line of code I can put in my jquery or php to see what query is going through in my chrome developer console?...like the console.logs I already have.

have you tried putting debugger in your success section, or tried alerting data[0], if yes what is the result — rahul, Nov 19 '12 at 07:05
Is `$dbstylename` the right value? What is `data`? Note that your code is prone to **SQL injection**! — Felix Kling, Nov 19 '12 at 07:13
@rahul data.d[0] returns an for cannot read property of undefined. — tehaaron, Nov 19 '12 at 07:15
@tehaaron is your test.php returning the correct data. problem is not in jquery-ajax check your test.php — rahul, Nov 19 '12 at 07:17
@FelixKling what do you mean by the right value? =\ I am very new to php and read through a few tutorials to get to this point. I had a basic ajax function working and then when attempting to merge it into this existing function encountered problems I havent been able to work out (obviously). Maybe `data` should be `array` since that is what holds the data in the php? Also, I figured it was prone to SQL Injection just based on my inexperience. Can you point me somewhere that can teach me about preventing that? — tehaaron, Nov 19 '12 at 07:19
Regarding SQL injection: http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection. I wanted to know whether `$dbstylename` holds the value you expect it have. Because I believe that jQuery will send `undefined=undefined` to the server, which is is probably not what you want. Try changing `data: [{'class' : target}]` to `data: {'class' : target}`. — Felix Kling, Nov 19 '12 at 07:26
Why can't use the `Network` tab in chrome developer toolbar to monitor the request and the response and share the same? — Arun P Johny, Nov 19 '12 at 07:28
@FelixKling Wow that worked! If you wouldn't mind explaining a tad bit more about why that fixed it in an answer I'd really appreciate it and be able to give you the checkmark! :D — tehaaron, Nov 19 '12 at 07:31

score 2 · Accepted Answer · answered Nov 19 '12 at 07:44

The problem is that you are not sending the data in the correct way. jQuery is passing the value you assign to the data: property to jQuery.param. This function converts the data to a proper query string.

But if you pass an array instead of an object, .param expects it to be an array of objects, where each of the objects has a name and value property.

You can see what jQuery generates in your case by calling .param directly:

> jQuery.param([{'class' : target}])
  "undefined=undefined"

You get the correct query string, if you pass either

[{name: 'class', value: target}]

or

{'class': target}

Both generate:

"class=<whatever the value of target is>"

jQuery ajax returning undefined

1 Answers1