populate plugin - getJSON to populate form

populate plugin - getJSON to populate form

Hi all,

I have a table showing users, each with an edit link like this:
  1. <td>
  2.   <a href="#" id="user1.js" class="edit">edit</a>
  3. </td>
  4. ...
  5. <td>
  6.   <a href="#" id="user2.js" class="edit">edit</a>
  7. </td>
  8. ...
The edit links have an ID which contains the name of the JSON file to load.
This will be replaced later with an url (htp://url?user1) to load the files using getJSON.


Here is an example of the JSON file:
  1. {"userID":"1","userName":"Frank","userFeat1":"","userFeat2"="Feat2","userIcon":"1.gif"}
 
At the end of the page is a form which contains all fields for editing the user settings:
  1. <div id="editForm">
  2.   <form id="editForm">
  3.     <fieldset>
  4.     <legend>Edit User</legend>
  5.     <ul>
  6.       <li>
  7.         <label for="userID">User ID</label>
  8.         <input id="userID" type="text" class="inputtext" value="" maxlength="8" name="userID" />
  9.       </li>
  10.       <li>
  11.         <label for="userName">Name</label>
  12.         <input id="userName" type="text" class="inputtext" value="" maxlength="24" name="userName" />
  13.       </li>
  14.       <li>
  15.         <label for="userFeat1">Feature 1</label>
  16.         <input id="userFeat1" type="checkbox" class="checkbox" value="Feat1" name="userFeat1" />
  17.       </li>
  18.       <li>
  19.         <label for="userFeat2">Feature 2</label>
  20.         <input id="userFeat2" type="checkbox" class="checkbox" value="Feat2" name="userFeat2" />
  21.       </li>
  22.       <li>
  23.         <label for="userIcon">Icon</label>
  24.         <select id="userIcon" class="select-single" name="userIcon">
  25.           <option selected="selected" value="0.gif">No Icon</option>
  26.           <option value="1.gif">Icon 1</option>
  27.           <option value="2.gif">Icon 2</option>
  28.           <option value="3.gif">Icon 3</option>
  29.           <option value="4.gif">Icon 4</option>
  30.           <option value="5.gif">Icon 5</option>
  31.           <option value="6.gif">Icon 6</option>
  32.           <option value="7.gif">Icon 7</option>
  33.           <option value="8.gif">Icon 8</option>
  34.           <option value="9.gif">Icon 9</option>
  35.           <option value="10.gif">Icon 10</option>
  36.         </select>
  37.       </li>
  38.     </ul>
  39.     </fieldset>
  40.   </form>
  41. </div>

Here is the script to detect which JSON file to load:
  1.     jQuery('.edit').click(function() {
  2.         var clickedSUID = jQuery(this).get(0).id;
  3.         readUserSettings(clickedSUID);
  4.     });

and here the function to load the JSON file with $.getJSON and parse the result using the populate plugin:
  1. function readUserSettings(fileName) {
  2.     jQuery.getJSON(fileName, {}, function(data) {
  3.         jQuery('#editForm').populate(data, {debug:1});
  4.     });
  5. }

When I click on an edit link I can see in firebug the correct JSON file is loaded based on the link ID.
Unfortunately, the form is not filled with the loaded JSON values.

Here is the complete file:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  6. <script type="text/javascript" src="js/populate.js"></script>
  7. <script type="text/javascript">

  9. var fileName;

  10. jQuery().ready(function() {

  11.     jQuery('.edit').click(function() {
  12.         var clickedSUID = jQuery(this).get(0).id;
  13.         readUserSettings(clickedSUID);
  14.     });
  15. });

  17. function readUserSettings(fileName) {
  18.     jQuery.getJSON(fileName, {}, function(data) {
  19.         jQuery('#editForm').populate(data, {debug:1});
  20.     });
  21. } 
  22. </script>
  23. <style>
  24. ul {
  25.     list-style-type: none;
  26.     margin: 0px;
  27.     padding: 25px;
  28. }
  29. li {
  30.     display: block;
  31.     margin: 0px;
  32.     padding: 5px;
  33. }
  34. li label {
  35.     width: 100px;
  36.     float: left;
  37. }
  38. legend {
  39.     padding-left: 10px;
  40.     font-weight: bold;
  41.     font-variant: small-caps;
  42.     font-size: 16px;
  43. }
  44. body,td,th {
  45.     font-family: Verdana, Arial, Helvetica, sans-serif;
  46.     font-size: 12px;
  47. }
  48. </style>
  49. <title>JSON TESTING</title>
  50. </head>
  51. <body>
  52. <div id="userlist">
  53.   <table>
  54.     <tbody>
  55.       <tr>
  56.         <td>User 1</td>
  57.         <td><a href="#" id="user1.js" class="edit">edit</a></td>
  58.       </tr>
  59.       <tr>
  60.         <td>User 2</td>
  61.         <td><a href="#" id="user2.js" class="edit">edit</a></td>
  62.       </tr>
  63.       <tr>
  64.         <td>User 3</td>
  65.         <td><a href="#" id="user3.js" class="edit">edit</a></td>
  66.       </tr>
  67.       <tr>
  68.         <td>User 4</td>
  69.         <td><a href="#" id="user4.js" class="edit">edit</a></td>
  70.       </tr>
  71.       <tr>
  72.         <td>User 5</td>
  73.         <td><a href="#" id="user5.js" class="edit">edit</a></td>
  74.       </tr>
  75.     </tbody>
  76.   </table>
  77. </div>
  78. <hr />
  79. <div id="editForm">
  80.   <form id="editForm">
  81.     <fieldset>
  82.     <legend>Edit User</legend>
  83.     <ul>
  84.       <li>
  85.         <label for="userID">User ID</label>
  86.         <input id="userID" type="text" class="inputtext" value="" maxlength="8" name="userID" />
  87.       </li>
  88.       <li>
  89.         <label for="userName">Name</label>
  90.         <input id="userName" type="text" class="inputtext" value="" maxlength="24" name="userName" />
  91.       </li>
  92.       <li>
  93.         <label for="userFeat1">Feature 1</label>
  94.         <input id="userFeat1" type="checkbox" class="checkbox" value="Feat1" name="userFeat1" />
  95.       </li>
  96.       <li>
  97.         <label for="userFeat2">Feature 2</label>
  98.         <input id="userFeat2" type="checkbox" class="checkbox" value="Feat2" name="userFeat2" />
  99.       </li>
  100.       <li>
  101.         <label for="userIcon">Icon</label>
  102.         <select id="userIcon" class="select-single" name="userIcon">
  103.           <option selected="selected" value="0.gif">No Icon</option>
  104.           <option value="1.gif">Icon 1</option>
  105.           <option value="2.gif">Icon 2</option>
  106.           <option value="3.gif">Icon 3</option>
  107.           <option value="4.gif">Icon 4</option>
  108.           <option value="5.gif">Icon 5</option>
  109.           <option value="6.gif">Icon 6</option>
  110.           <option value="7.gif">Icon 7</option>
  111.           <option value="8.gif">Icon 8</option>
  112.           <option value="9.gif">Icon 9</option>
  113.           <option value="10.gif">Icon 10</option>
  114.         </select>
  115.       </li>
  116.     </ul>
  117.     </fieldset>
  118.   </form>
  119. </div>
  120. </body>
  121. </html>



Please, can someone help me - what I'm missing here?


Cheers,
Boris