Develop Reference

Running PHP in text/javascript environment

I'm looking to run this bit of PHP within a text/javascript environment. The point is to display a description for certain media files within the Jplayer Playlister. So how can I run this within a text/javascript environment? If you need an example of the Playerlister working fine, and then breaking upon implementation of the PHP, I can provide that.
Here's the PHP:
// CONFIGURE THESE VARIABLES:
// actual place where your mp3s live on your server's filesystem. TRAILING SLASH REQ'D.
$musicDirectory="myServerPathHere";
// corresponding web URL for accessing the music directory. TRAILING SLASH REQ'D.
$musicURL="myURLhere";
// step through each item...
$fileDir = opendir($musicDirectory) or die ($php_errormsg);
while (false !== ($thisFile = readdir($fileDir))) // step through music directory
{
$thisFilePath = $musicDirectory . $thisFile;
if (is_file($thisFilePath) && strrchr ($thisFilePath, '.') == ".mp3") // not . or .., ends in .mp3
{
// only include files that have a corresponding .txt file
$thisTextPath = substr_replace($thisFilePath, ".txt", (strlen($thisFilePath) - 4));
if (is_file($thisTextPath))
{
$myFullURL=$musicURL . $thisFile;
$myFileSize=filesize($thisFilePath);
$textContents = file($thisTextPath);
foreach ($textContents as $thisLine) echo htmlspecialchars($thisLine) . "\n";
}
}
}
closedir($fileDir);

It's possible I don't fully understand what you're asking, so forgive me if that is the case, but what you seem to be asking is how to run PHP client side.
The simple answer is you can't.
PHP is a server-side language. To accomplish what you're trying to do you need to pass some data from PHP to your javascript.
This has always been a bit of a tricky thing to do for me. I usually resort to setting my variables via an on-page <script> tag like this:
<script>
var myJSVar = <?= $myPHPVar ?>
</script>
I've also used a simple JS object to configure a later script using this same method. There are also some neat tools that enable you to create JSON objects from your PHP objects and pass that to the client side. This makes things pretty smooth, and I recommend you check it out on your own.

CakePHP controller function with parameters doesn't show javascript

When I'm using controller function with parameters the rendered view just seems to forget every included .js files.
public function view($id = null) {
if(!$id) {
throw new NotFoundException(__('Invalid post'));
}
$post = $this->Post->findById($id);
if(!$post) {
throw new NotFoundException(__('Invalid post'));
}
$this->set('post', $post);
}
If I take parameters away and put variable '$id = 1' on function the view with postID 1 renders okay in 'posts/view'.
I included javascript files to default.ctp in traditional way:
echo "script type='text/javascript' SRC='../js/jquery-1.9.1.min.js'></script>";);
(it includes '<' but this text editor won't me type it for safety reasons I guess)
I don't have knowledge about 'js helpers' of cakePHP. Can't I use javascript in traditional way?
Site renders okay in every other view (e.g. posts/add) and .js files are included in source code of 'posts/view/1'

The problem
You're using relative paths to the javascript;
<script src='../js/jquery-1.9.1.min.js'></script>
In this url, ../ means '1 directory up from the current location`, so when you're currently visiting this URL;
http://mysite.com/home/
Then your browser will correctly try to load the script from;
http://mysite.com/js/jquery-1.9.1.min.js
However, if you're visiting this url;
http://mysite.com/home/and/some/more/
Then the browser will look for the JavaScript here:
http://mysite.com/home/and/some/js/jquery-1.9.1.min.js
How to fix the problem
Use absolute paths for all 'assets' (CSS, JavaScript, Images);
src='/js/jquery-1.9.1.min.js'
Output the script-tags using CakePHP Helpers (after all, that's what they are meant for: to simplify your work :), e.g. echo $this->Html->script('jquery-1.9.1.min');

Loading local javascript file from one directory level above

I am currently contracted to a place that cannot use a CMS or PHP, but they want me to build something like a CMS using HTML and JavaScript.
I know it sounds ridiculous but I do not want to be searching for another job these days and they are the nicest people that I have ever worked for - EVER - and I old.
One of the concepts of a CMS is to have global files that you can include at any given time.
As a result, I tried the $.ajax, $.get, etc..., but I was running into issues of Access URI denied and those kind of things for trying to load a file which is one directory level the current directory.
I was able to get the javascript file to load by using the old XMLHttpRequest/ActiveXObject.
However, the script within the div that has been loaded cannot be called. I receive an error of "Can't find variable: mFunc" which is the name of the function that has been loaded into the div.
Here's the code for my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>retrieve local file one level up</title>
<script type="text/javascript">
<!--
var createRequestObject = function(){
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('There was a problem creating the XMLHttpRequest object');
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
var sendRequestPost = function(){
var jscript = '../test.js';
// Open PHP script for requests
http.open('GET', jscript);
http.setRequestHeader('Content-Type', 'text/javascript');
http.onreadystatechange = handleResponsePost;
http.send(null);
var mT = setTimeout("mFunc()", 2000);
}
var handleResponsePost = function(){
if(http.readyState == 1){
document.getElementById('mDiv').innerHTML = "Please wait, loading... " ;
}else if(http.readyState == 4 && http.status == 200){
// Text returned from PHP script
var response = http.responseText;
document.getElementById('mDiv').innerHTML = response;
if(response){
// Update ajaxTest2 content
document.getElementById('mDiv').innerHTML = response;
}
}else if(http.readyState == 2){
document.getElementById('mDiv').innerHTML = http.responseText;
}else if(http.readyState == 3){
document.getElementById('mDiv').innerHTML = http.responseText;
}
}
-->
</script>
</head>
<body onload="javascript:sendRequestPost();">
<div id="mDiv"></div>
</body>
</html>
Here is the javascript that loads just fine into mDiv:
<script type="text/javascript">
<!--
var mFunc = function(){
var mScript = document.createElement("script");
mScript.setAttribute("type","text/javascript");
var data = 'alert("gets here");'
mScript.text = data;
var head = document.getElementsByTagName("head")[0];
head.appendChild(mScript);
}
-->
</script>
Yet, after the two seconds have passed, I receive the error.
I am sure that it is probably because the browser just sees this as text within the div, so how do I make it recognize that it is javascript.
I have tried using eval, which I do not want to use, but even returns a parse error.
Thanks in advance

../ has meaning to the local filesystem (on most platforms), but not to HTML or to most webservers. Remember that the URL is just a query string for the server.
Generally speaking, you need to parse the URL to remove the undesired few elements. If you just want scripts that are common across the website, though, they should be referenced from the root, so the relative URL would begin with /.
A quick hack would be /(.*)\/.*/.exec( '/foo/bar/baz.html' )[1]. This doesn't handle the query string following ? or anchor following # but you won't have a query on a static website, and won't have anchors until you get into more advanced techniques. jQuery has a better utility for parsing URLs, also based on regexps.
It's offtopic for this site, but you will have to be very familiar with XHR to implement a JavaScript CMS.

OK, another programmer that I work with, has found a simple solution.
Instead trying to use ajax to load a JavaScript file from a higher directory level and then run a document.writeln or document.getElementById("someDiv").innerHTML -- reverse the steps.
Include the JS file as you would normally:
<script type="text/javascript" src="../../common/header.js"></script>
Within this JS file
function CommonHeader(mPath) {
document.writeln('<header>');
document.writeln(' <div class="PageWidth">');
document.writeln(' <h1>Something<sup>®</sup> <em>Learn about us</em></h1>');
document.writeln(' <nav>');
document.writeln(' <ul>');
document.writeln(' <li id="loginOut"></li>');
The order needs to be for you to call document.writeln at the beginning of the process.
We can now load header.js, footer.js, and whatever other file that we wish to load, along with having an array at the top of each page denoting the path to those files, for lower directory level htmls
dynamicPathArr[0] = "../../";
Then within whatever file, you can call the function to write the date into the page
<script type="text/javascript">CommonHeader(dynamicPathArr[0])</script>
I cannot believe that I did not think of this completely simple solution.
Although this is not SEO friendly, it is good for only updating header, footer, nav, etc... in one location, until everything is finalized.
And thanks you for the response

Loading JavaScript Inline

I am trying to load some JavaScript files inside another JavaScript file in the following case:
js/script1.js
var script_1_method = function () {
console.log("Hello Script 1");
}
js/init-script.js
console.log("Initiating Scripts...");
loadScriptMethod('js/script1.js');
script_1_method();
console.log("Hello Script 2");
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/init-script.js"></script>
</head>
<body>
</body>
</html>
The Console output should be
Initiating Scripts...
Hello Script 1
Hello Script 2
I have looked into many JavaScript loaders like curl.js, RequireJS, JSL almost all of them do an Asynchronous way of loading files requiring callbacks for my scenario.
Is there a library to load the scripts in a synchronous way as in the above case without requiring callbacks.
Please let me know if there are any JavaScript loader libraries which cater to the above case.

It's possible to load same-origin scripts using a synchronous XHR:
var scr = getViaSynchronousXHR('js/script1.js'),
el = document.createElement("script");
el.appendChild(document.createTextNode(scr));
document.documentElement.firstChild.appendChild(el);
script_1_method();
A script element without a source is parsed and executed synchronously, because there is no wait for the file to be downloaded/fetched from cache.

if all your scripts are on the same domain, you can run a synchronous ajax call to get the script, use eval to run it, and then continue

The thing you want to do is quite difficult. I had a lot of problems with synchronous AJAX requests to correctly load my javascript files dynamically.
Actually I implemented something that worked synchronously on my project which is the same as you want.
It is only possible if you have a server-side scripting engine (e.g. PHP) to generate your HTML page.
The idea is to parse the init-scripts.js on server side prior to include them into the html code.
Instead of writing echo <script type="text/javascript" src="js/init-script.js"></script> in my PHP script I write : JavascriptLoader::addJavascript('js/init-script.js');
JavascriptLoader is a PHP class which manages scripts to be loaded.
This addJavascript function parses the init-script.js and, each time it encounters a line which starts with "loadScriptMethod(",
it parses and uses the string between brackets (e.g loadScriptMethod('thisString')) as the scriptToLoad
and then calls recursively JavascriptLoader::addJavascript($scriptToLoad);
JavascriptLoader::addJavascript then do an echo '<script type="text/javascript" src="'.$scriptToLoad.'"></script>' to write
I cannot publish the JavascriptLoader code from my project, but here is a simplified example of PHP code:
class JavascriptLoader{
...
public static function addJavascript($filepath){
self::init(); //Init to write the javascript loadScriptMethod definition into HTML output
if (!self::isScriptAlreadyLoaded($filepath)){
self::parseFile($filepath);
echo '<script type="text/javascript" src="'.$urlScript.'"></script>',"\n";
self::ajouterScriptDejaCharge($chemin);
}
}
private static function parseFile($filepath){
if (file_exists($filepath)){
$lines = file($filepath, FILE_SKIP_EMPTY_LINES);
foreach($lines as $line){
$matches = array();
$test = preg_match ('/^loadScriptMethod\(\s*[\'\"](.+)[\'\"]\s*\)/' , $line , $matches);
if ($test > 0){
$scriptToLoad = $matches[1];
//On inclut le fichier
self::addJavascript($scriptToLoad);
}
}
}
else{
throw new Exception('javascript source file '.$filepath.' does not exist.');
}
This also stores the $scriptToLoad into an array to avoid loading twice the same script (functions isScriptAlreadyLoaded and addScriptToAlreadyLoadedList).

Cross-site XMLHttpRequest

I want to provide a piece of Javascript code that will work on any website where it is included, but it always needs to get more data (or even modify data) on the server where the Javascript is hosted. I know that there are security restrictions in place for obvious reasons.
Consider index.html hosted on xyz.com containing the following:
<script type="text/javascript" src="http://abc.com/some.js"></script>
Will some.js be able to use XMLHttpRequest to post data to abc.com? In other words, is abc.com implicitly trusted because we loaded Javascript from there?

Will some.js be able to use XMLHttpRequest to post data to abc.com? In other words, is abc.com implicitly trusted because we loaded Javascript from there?
No, because the script is loaded on to a seperate domain it will not have access...
If you trust the data source then maybe JSONP would be the better option. JSONP involves dynamically adding new SCRIPT elements to the page with the SRC set to another domain, with a callback set as a parameter in the query string. For example:
function getJSON(URL,success){
var ud = 'json'+(Math.random()*100).toString().replace(/\./g,'');
window[ud]= function(o){
success&&success(o);
};
document.getElementsByTagName('body')[0].appendChild((function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = URL.replace('callback=?','callback='+ud);
return s;
})());
}
getJSON('http://YOUR-DOMAIN.com/script.php?dataName=john&dataAge=99&callback=?',function(data){
var success = data.flag === 'successful';
if(success) {
alert('The POST to abc.com WORKED SUCCESSFULLY');
}
});
So, you'll need to host your own script which could use PHP/CURL to post to the abc.com domain and then will output the response in JSONP format:
I'm not too great with PHP, but maybe something like this:
<?php
/* Grab the variables */
$postURL = $_GET['posturl'];
$postData['name'] = $_GET['dataName'];
$postData['age'] = $_GET['dataAge'];
/* Here, POST to abc.com */
/* MORE INFO: http://uk3.php.net/curl & http://www.askapache.com/htaccess/sending-post-form-data-with-php-curl.html */
/* Fake data (just for this example:) */
$postResponse = 'blahblahblah';
$postSuccess = TRUE;
/* Once you've done that, you can output a JSONP response */
/* Remember JSON format == 'JavaScript Object Notation' - e.g. {'foo':{'bar':'foo'}} */
echo $_GET['callback'] . '({';
echo "'flag':' . $postSuccess . ',";
echo "'response':' . $postResponse . '})";
?>
So, your server, which you have control over, will act as a medium between the client and abc.com, you'll send the response back to the client in JSON format so it can be understood and used by the JavaScript...

The easiest option for you would be to proxy the call through the server loading the javascript. So some.js would make a call to the hosting server, and that server would forward the request to abc.com.
of course, if that's not an option because you don't control the hoster, there are some options, but it seems mired in cross browser difficulties:
http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain

You could use easyXSS. Its a library that enables you to pass data, and to call methods across the domain boundry. Its quite easy and you should be able to use it.
There are many examples on the code.google.com site