The best way to pass data from PHP to JavaScript for my particular case

Question

I created an online community in Drupal with a homepage that looks like a Facebook wall. You see the 25 most recent posts with the last two comments below those posts. There is also a text box right below these comments so you can quickly post a new comment on a specific post.

These Facebook-style posts have many features built into them via JavaScript. By clicking the "view all comments" link directly below the message, you get an AJAX call that captures all the comments for that message and displays them directly below it. You can also mark posts as useful, as a solution to your question, edit inline comments, etc. All these actions require AJAX requests, which means that the JavaScript executing the request needs to know important information such as Node identifier (unique identifier for the message), comment identifier (unique comment identifier), etc.

In my initial implementation, these pieces of important data were scattered across all posts, which complicated the JS record that was supposed to find it. Thus, my second implementation simply prints all this data in a JSON-compatible string in the main packaging element of each message. Although this greatly simplified JS to find the necessary data, writing JSON as a string is a pain (slipping quotes, no line breaks).

So now I have a third idea, and I am looking for feedback on this before its implementation. The idea is to create a single global JS array for all these messages, which contains objects inside it that store data for each message. Each element in this array will contain the necessary data needed for AJAX calls. Therefore, it looks something like this:

Facebook-style email philosophy

<div class="post" data-postindex="<?php echo $post->index; ?>"> <!-- lots of other HTML for the post --> </div> <script type="text/javascript"> globalPostArray.push({ nid: <?php echo $post->nid; ?>, authorID: <?php $post->authorID; ?>, //etc. etc. etc. }); </script> 

The result of the above code is that when you click on a link that requires an AJAX request, JS simply crosses the DOM up from that link until it finds the main .post element. Then it will capture the value of data-postindex to find out which element in globalPostArray contains the data it needs.

Thoughts? I feel that there must be some standard, acceptable way to achieve something like this.

Answer 1

I have never heard of a standard way to "pass" information between PHP and Javascript, as these are server and client languages, respectively. I personally would use a hybrid of your second and third solutions.

Store the message identifier in the data-postindex attribute (the data attributes are new, and the “right” way to store small amounts of data). But I would still just use a JSON array for the rest, since storing a lot of data in data attributes (and escaping them!) Is potentially problematic. PHP has a json_encode function that takes care of all screens and for you - just create a PHP array (like $postdata ) as usual and then throw it into your post template:

 <script type="text/javascript"> globalPostArray.push(<?php echo json_encode($postdata) ?>); </script> 

Where $postdata looks something like this:

 $postdata = array( 'nid' => 5, 'authorId' => 45 ...etc... ); 

It's easy enough to create such an array from your existing code.

I wrote a blog post some time ago about my implementation of this kind of thing, but it looks like all you need is a pointer to json_encode .

Answer 2

The most reliable way to pass any PHP variable to JavaScript: json_encode .

 <script type="text/javascript"> var something = <?php echo json_encode($var); ?>; </script> 

You cannot go through the closure and resources, but otherwise it will fail.

Answer 3

I would save the data inside the element:

 <div class="post" data-postindex="<?php echo $post->index; ?>" data-nid="<?php echo $post->nid; ?>" data-authorID="<?php echo $post->authorID; ?>"> 

... or saving the full JSON string in 1 data attribute:

 <div data-data="<?php echo htmlentities(json_encode($somedata));?>"> 

Answer 4

My answer is about the same as the other guys, but more detailed. I usually do it this way and I think this is the best approach: (of course, you can capture data using ajax, but it depends on the context)

somefile.html

  <html> <head>..</head> <body> html code <script> window.my_data = <?php echo json_encode($my_php_var); ?> </script> </body> </html> 

somefile.js

  $(function() { window.myitem = new myClass(window.my_data); }); var MyClass = function(init_data) {...}