Sag Rising

Notes to Myself

Use PHP to Inject Code into Javascript

Posted by Richard Cockrum on May 8, 2008

Recently Habari updated it's administrative code to use a new interface. The new interface relies much more heavily on javascript than the old one did, which allows it to pull off some pretty snifty tricks. One of these is on the entries page, where a list of all the posts you have written is displayed.

At the top of the entries page is a timeline with a slider. You can move the slider back and forth to display the posts from the period of time covered by that section of the slider. You can also resize the slider to show more or fewer posts on the page.

Entries Timeline

The code to manipulate the number of posts shown on the page as a result of manipulating the time line uses javascript ajax. Unfortunately, in the process of retrieving the posts, this javascript threw away other parameters that determined what type of posts were retrieved, parameters such as whether the posts were published or drafts, regular posts or static pages, the author, and so on.

I know nothing about javascript, but from the behavior of the page I knew the javascript was the problem and what it was doing. You see,when the page first loaded it showed the correct posts, but as soon as it was done loading it would revert to just published posts by all authors, the default behavior for the post retrieval function. The problem was how to get the proper parameters into the javascript.

After much scouring of the internet, my Aha! moment came when I saw this code at WebRadiance. That's when something I already knew hit home.

PHP is processed on the web server. The server takes your PHP code, processes it, then injects the result into your web page. Javascript, on the other hand, is processed by the browser. It takes the page sent to it by the server, then processes any javascript in the page. What this means is that if you use PHP to echo text to the page, all javascript sees is the result of the echo. It never sees any PHP. You can place a bit a PHP code in your javascript, echo the results to the page, then when javascript processes the page, all it sees is another piece of javascript code.

Here's what the original ajax looked like to get the posts called for by the entries page timeline:

$.ajax({
type: "POST",
url: "<?php echo URL::get('admin_ajax', array('context' => 'entries')); ?>",
data: "offset=" + (parseInt(c) - parseInt(b)) + "&limit=" + (parseInt(b) - parseInt(a)),
dataType: 'json',
success: function(json){
$('.entries').html(json.items);
spinner.stop();
itemManage.initItems();
$('.modulecore .item:first-child, ul li:first-child').addClass('first-child').show();
$('.modulecore .item:last-child, ul li:last-child').addClass('last-child');
}
});
};

As you can see only two parameters are being sent to the function to get the posts - offset and limit. These tell Habari how many posts to return, and where to start in the list of posts.

Here's what it looked like after adding PHP to the code:

$.ajax({
type: "POST",
url: "<?php echo URL::get('admin_ajax', array('context' => 'entries')); ?>",
data: "offset=" + (parseInt(c) - parseInt(b)) + "&limit=" + (parseInt(b) - parseInt(a)) +
<?php
$vars= Controller::get_handler_vars();
$out= '';
$keys= array_keys($vars);
foreach($keys as $key) {
$out .= "&$key=$vars[$key]";
}
echo '"' . $out . '"';
?>,
dataType: 'json',
success: function(json){
$('.entries').html(json.items);
spinner.stop();
itemManage.initItems();
$('.modulecore .item:first-child, ul li:first-child').addClass('first-child').show();
$('.modulecore .item:last-child, ul li:last-child').addClass('last-child');
}
});
};

What the PHP is doing is gathering all the parameters that have been sent to the server, converting them into a string in the format &var=value and concatenating the results in the loop. After the loop it echoes the result into the page so what javascript sees is

data = "offset=" + (parseInt(c) - parseInt(b)) + "&limit=" + (parseInt(b) - parseInt(a)) + "&var1=val1&var2=val2",

PHP understand what's going on with its code. Javascript understands what's going on with its code. All the correct parameters are being passed, and the correct posts are returned. I'm happy. :)

I hope this helps you out as much as it did me.

2 Responses to Use PHP to Inject Code into Javascript

ok...
but this does not tell me how to inject code into the website script to change things.
i dont know if its possible to do that but thats one idea that i just tought of .... or someone else thought of.

This technique will inject code into the javascript on the page. Few PHP scripts allow code injection. WordPress, I believe, has plugins available to allow it. Habari doesn't.

What do you think?
Comments for this post are disabled.