diff --git a/contents/writing/about/sharing-data-from-php-to-javascript/index.md b/contents/writing/about/sharing-data-from-php-to-javascript/index.md new file mode 100644 index 0000000..3a091e9 --- /dev/null +++ b/contents/writing/about/sharing-data-from-php-to-javascript/index.md @@ -0,0 +1,87 @@ +--- +title: Sharing Data from PHP to JavaScript +author: Brett Langdon +date: 2014-03-16 +template: article.jade +--- + +A quick example of how I decided to share dynamic content from PHP with my JavaScript. + +--- + +So the other day I was refactoring some of the client side code I was working on and +came across something like the following: + +### page.php +```php + +... + + + +``` + +There isn't really anything wrong here, in fact this seems to be a fairly common practice +(from the little research I did). So... whats the big deal? Why write an article about it? + +My issue with the above is, what if the JavaScript gets fairly large (as mine was). The +ideal thing to do is to move the js into it's own file, minify/compress it and serve it +from a CDN so it doesn't effect page load time. But, now we have content that needs to be +added dynamically from the PHP script in order for the js to run. How do we solve it? The +approach that I took, which probably isn't original at all, but I think neat enough to +share, was to let PHP make the data available to the script through `window.data`. + +### page.php +```php + +... + $myModel->getTitle(), +); +?> + + + +``` + +### page-script.js +```javascript +// window.data.modelTitle is available for me to use +console.log("My Model Title: " + window.data.modelTitle); +``` + +Nothing really fancy, shocking, new or different here, just passing data from PHP to js. +Something to note is that we have to have our PHP code set `window.data` before we load +our external script so that `window.data` will be available when the script loads. Which +this shouldn't be too much of an issue since most web developers are used to putting all +of their `script` tags at the end of the page. + +Some might wonder why I decided to use `window.data`, why not just set +`var modelTitle = "getTitle()?>";`? I think it is better to try and have a +convention for where the data from the page will come from. Having to rely on a bunch of +global variables being set isn't really a safe way to write this. What if you overwrite +an existing variable or if some other script overwrites your data from the PHP script? +This is still a cause for concern with `window.data`, but at least you only have to keep +track of a single variable. As well, I think organizationally it is easier and more concise +to have `window.data = ;` as opposed to: + +```php +var modelTitle = "getTitle()?>"; +var modelId = "getId()?>"; +var username = ""; +... +``` + +I am sure there are other ways to do this sort of thing, like with AJAX or having an +initialization function that PHP calls with the correct variables it needs to pass, etc. +This was just what I came up with and the approach I decided to take. + +If anyone has other methods of sharing dynamic content between PHP and js, please leave a +comment and let me know, I am curious as to what most other devs are doing to handle this.