Question

I want to populate form fields with values from a database immediately after the user enters a value in the #sid field. Here is my jQuery/HTML example:

<script src='jquery-1.3.1.min.js'></script> <script type='text/JavaScript'> $(document).ready(function() {   $('#sid').bind('change', function(){     $.getJSON('test.php?sid=' + $('#sid').val(),      function(data)     {       $.each(data.items,        function(i, item)       {         if (item.field == 'saffil')         {               $('#saffil').val(item.value);         }         else if (item.field == 'sfirst')         {               $('#sfirst').val(item.value);         }       });       });    }); }); </script> 

Here is my processing script (test.php which gets called by the .getJSON method)

<? require_once('db_pers.inc');  $ssql = 'SELECT * FROM contacts_mview WHERE sempid = ''.$_GET['sid'].''';  $rres = pg_query($hdb, $ssql); pg_close($hdb);  $ares = pg_fetch_assoc($rres);  $json = array(array('field' =>  'saffil',             'value' =>  $ares['saffil']),           array('field' =>  'sfirst',             'value' =>  $ares['sfirst']));  echo json_encode($json); ?> 

According to firebug the GET param is passed just fine to test.php and the JSON object comes back just fine:

[{'field':'saffil','value':'Admin'},{'field':'sfirst','value':'Nicholas'}] 

however nothing happens on the page and I get the following error message back:

G is undefined init()()jquery-1....1.min.js (line 12) (?)()()test.html (line 15) I()jquery-1....1.min.js (line 19) F()()jquery-1....1.min.js (line 19) [Break on this error] (function(){var l=this,g,y=l.jQuery,p=l.....each(function(){o.dequeue(this,E)})}}); 

This is my first stab at ajax with jQuery so any input would be much appreciated!

Thanks,

• Nicholas

Answer 1

Nice little injection attack waiting to happen there 😉

Try changing

$.each(data.items, 

to:

$.each(data, 

Edit: to answer your comment, I like to name my fields the same as the data key:

<input type='text' name='saffil' value='' /> <input type='text' name='sfirst' value='' />  var data = {saffil:'foo', sfirst:'bar'}; $.each(data, function(key, value) {    $('[name='+key+']').val(value) })