Cannot populate form with ajax and populate jquery plugin

Question

I'm trying to populate a form with jquery's populate plugin, but using $.ajax

The idea is to retrieve data from my database according to the id in the links (ex of link: get_result_edit.php?id=34), reformulate it to json, return it to my page and fill up the form up with the populate plugin. But somehow i cannot get it to work. Any ideas:

here's the code:

 $('a').click(function(){
     $('#updatediv').hide('slow');
     $.ajax({
   type: "GET",
   url: "get_result_edit.php",
   success: function(data)
      {
                                   var $response=$(data);
                                   $('#form1').populate($response);           
                               }
            });
     $('#updatediv').fadeIn('slow');
     return false;

whilst the php file states as follow:

<?php
$conn = new mysqli('localhost', 'XXXX', 'XXXXX', 'XXXXX');
@$query = 'Select * FROM news WHERE id ="'.$_GET['id'].'"';

$stmt = $conn->query($query) or die ($mysql->error());
if ($stmt) 
  { 

     $results = $stmt->fetch_object(); // get database data
    $json = json_encode($results); // convert to JSON format
      echo $json;

      }


?>

Now first thing is that the mysql returns a null in this way: is there something wrong with he declaration of the sql statement in the $_GET part? Second is that even if i put a specific record to bring up, populate doesn't populate.

Update:

I changed the populate library with the one called "PHP jQuery helper functions" and the difference is that finally it says something. finally i get an error saying NO SUCH ELEMENT AS i wen into the library to have a look and up comes the following function

function populateFormElement(form, name, value)
{
    // check that the named element exists in the form
    var name = name; // handle non-php naming
    var element = form[name];
    if(element == undefined)
    {
        debug('No such element as ' + name);
        return false;
    }

    // debug options       
    if(options.debug)
    {
        _populate.elements.push(element);
    }
}

Now looking at it one can see that it should print out also the name, but its not printing it out. so i'm guessing that retrieving the name form the json is not working correctly.

Link is at http://www.ocdmonline.org/michael/edit%5Fnews.php with username: Testing and pass:test123 Any ideas?

Answer 1

First you must set the dataType option for the .ajax call to json:

$.ajax({dataType: 'json', ...

and then in your success function the "data" parameter will already be a object so you just use it, no need to do anything with it (I don't know why you are converting it into a jQuery object in your code).

edit:

$( 'a' ).click ( function () {
 $( '#updatediv' ).hide ( 'slow' );

 $.ajax ( {
  type: "GET",
  url: "get_result_edit.php",
  success: function ( data ) {
   $( '#form1' ).populate ( data );
  },
  dataType: 'json'
 } );

 $( '#updatediv' ).fadeIn ( 'slow' );
 return false;
}

also consider using $.getJSON instead of $.ajax so you don't have to bother with the dataType

Answer 2

Try imPagePopulate (another jquery plugin). It may be easier to use:

http://grasshopperpebbles.com/ajax/jquery-plugin-impagepopulate/