This question is a bit messy, so I'll try to stick to the basics of my problem. When users logs into my site, their site preferences are fetched from the database. The preferences could, for instance, represent a certain visual layout, customized by the user himself/herself. Let's say the user can choose to show or hide 3 "info"-boxes that are, by default, shown on the webpage. The preferences are stored like this in the db:

----------------------------------
| user_id | box_1 | box_2 | box3 |
----------------------------------
| 23      | true  | false | true |
----------------------------------

This data has to be fed into the javascript on the page, in order for the user to get their personal visual layout. So I would do something like this:

<head, title, jsscripts meta tags and what have you>
<script type="text/javascript">
<?php

//fetch data from db here
$array = fetchfunction();

echo 'preference_box_1 = '.$array['box_1'].';' // this would be set to true
echo 'preference_box_2 = '.$array['box_2'].';' // this would be set to false
echo 'preference_box_3 = '.$array['box_3'].';' // this would be set to true

?>
</script>

Is this the best solution to implement? Or is there a more elegant way? My concerns are also that this would be messy when a user has 100+ preferences.

EDIT: I'm sorry, I don't think I wrote my question clearly enough. I'm aware of PHP's JSON encoder, but the PHP code is not my concern here. What I'm wondering is if this is the best way to inject external data into javascript? Should it be done otherwise?

This question is a bit messy, so I'll try to stick to the basics of my problem. When users logs into my site, their site preferences are fetched from the database. The preferences could, for instance, represent a certain visual layout, customized by the user himself/herself. Let's say the user can choose to show or hide 3 "info"-boxes that are, by default, shown on the webpage. The preferences are stored like this in the db:

----------------------------------
| user_id | box_1 | box_2 | box3 |
----------------------------------
| 23      | true  | false | true |
----------------------------------

This data has to be fed into the javascript on the page, in order for the user to get their personal visual layout. So I would do something like this:

<head, title, jsscripts meta tags and what have you>
<script type="text/javascript">
<?php

//fetch data from db here
$array = fetchfunction();

echo 'preference_box_1 = '.$array['box_1'].';' // this would be set to true
echo 'preference_box_2 = '.$array['box_2'].';' // this would be set to false
echo 'preference_box_3 = '.$array['box_3'].';' // this would be set to true

?>
</script>

Is this the best solution to implement? Or is there a more elegant way? My concerns are also that this would be messy when a user has 100+ preferences.

EDIT: I'm sorry, I don't think I wrote my question clearly enough. I'm aware of PHP's JSON encoder, but the PHP code is not my concern here. What I'm wondering is if this is the best way to inject external data into javascript? Should it be done otherwise?

• php
• javascript
• mysql

Share Follow edited Jan 24, 2011 at 13:01 soren.qvist asked Jan 24, 2011 at 12:22 soren.qvistsoren.qvist 7,4361515 gold badges6565 silver badges9393 bronze badges 3

• You can do it that way or make another JSON call on document.ready event. – MeanEYE Commented Jan 24, 2011 at 13:14
• 2 RE Your edit: The only way to get data from the database to JS running on your page is via PHP. You need a server-side language to interface with the database, JavaScript can't do it directly. Typically you'll either dump JSON/XML data onto the page during the initial request, or make a second request once the page has loaded; either way it will be PHP talking to your database and encoding the data for the JavaScript. – user229044 ♦ Commented Jan 24, 2011 at 13:15
• 3 As a side note, you shouldn't do any of this. What you are talking about is achievable server-side with no JavaScript, and that's where you should do it. Load the user's theme preference and modify the output of your script. Never rely on JavaScript when you can do hide the dynamic stuff from the user by doing it server-side. – user229044 ♦ Commented Jan 24, 2011 at 13:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Personally I would consider transferring your data via JSON. It's lightweight and far more readable.

http://ditio/2008/07/17/php-json-and-javascript-usage/

You can use JSON encoder. PHP has one in-built, it is not flawless though, Zend Framework has better one (but it will use the in-built by default, you have to disable it).

I'd suggest using jQuery and PHPs function json_encode.

Once you read database values prepare result like so:

$result = array(
             'box_1' => $array['box_1'],
             'box_2' => $array['box_2'],
             'box_3' => $array['box_3'],
             'other_setting' => $array['other']
          );
print json_encode($result);

JavaScript loading code would look like this:

function load_settings(data) {
   if (data.box_1) {
      // do something if box is visible
   } 
}

$.ajax({
   url: your_site_url,
   dataType: 'json',
   success: load_settings
});