Question

I’m using the jquery editable plugin http://www.appelsiini.net/projects/jeditable.

I need my drop down selection to be populated from the database.

So I have something like this :

$(".edit_company").editable("banner-save.php", { 
indicator : '<img src="img/indicator.gif">',
data   : "{ 'Package 1' : 'Package 1', 'Package 2' : 'Package 2'  }",
type   : "select",
submit : "OK",
event     : "dblclick",
submitdata : function() {
  return {type : 'package'};
}

});

The ‘data’ there, I need to populate it from an array, something like

$query=mysql_query("select * from company"); 
while ($query as $comp) { 
  // how 
}

How can I pass the values I get from the query into the ‘data’ in the js?

Thanks in advance

Answer 1

Accumulate your query rows into a PHP associative array and json_encode() it into the jQuery plugin.

$data = array();
// Assuming you had a column called `name` in your query...
while ($row = mysql_fetch_assoc($query)) {
  $data[$row['name']] = $row['name'];
}

This produces an array something like the following. Supply the correct column names from your query to get the key : value pairs you need.

Array
(
    [Name 1] => Name 1
    [Name 2] => Name 2
    [Name 3] => Name 3
)

.. which produces the JSON:

{"Name 1":"Name 1","Name 2":"Name 2","Name 3":"Name 3"}

Pass it into the jQuery plugin via json_encode().

$(".edit_company").editable("banner-save.php", { 
  indicator : '<img src="img/indicator.gif">',
  // json_encode() will supply the correct format.
  data   : '<?php echo json_encode($data); ?>',
  type   : "select",
  ...
});

It is weird that the JSON is passed as a string rather than a plain object into the JavaScript, but this is consistent with examples in the documentation for the plugin.

Based on the documentation, if there is a specific option you would like selected by default, you can set that in the PHP array like:

// Start with Name 3 selected
$data['selected'] = 'Name 3';