Communicating between Javascript and PHP, using Javascript and PHP together

I have an application that is written in PHP. PHP is not my favourite language by any stretch however I have inherited this program and need to maintain it. I recently discovered the awesome power of Javascript. Now before you spit your Coffee all over your screen watch this Google Tech-Talk called “Javascript The good parts” by Douglas Crockford < http://www.youtube.com/watch?v=hQVTIJBZook >.
Ok so lets see how I am using Javascript to give this PHP application a kick in the pants.

The PHP

I have a web page which contains PHP variables in the source code, I want to be able to get those variables and pass them to Javascript.

Extract PHP variables and pass them to Javascript

I created a hyperlink for the user to click when they are ready to execute the code and then added a class attribute with the value “rename_recording”, a href attribute with the value # (hash sign) and a data-key attribute which contains the PHP variable I want to get access to. See code below.

<a class="rename_recording" href="#" data-key='<?php echo $recording; ?>'>RUN THIS CODE</a>

The class is so that we can reference the area later, the href  is so that we can have a click-able link (the hash sign is just a pointer to nothing). The data-key is filled with the value of $recording variable in the PHP code which we will reference later in the Javascript.

The Javascript

I went and downloaded JQuery from < http://jquery.com/ > and saved this to the server as a file, really simple :)

I then created a Javascript file called rename_course.js which contains the following code.

$(“.rename_recording”).click(function(){
var that=this;
var newName=prompt(“What would you like to rename it to?”);
if(newName){
$.ajax({url:”/manage/php_ajax/rename_course.php”, data:{newName:newName}, success:function(data){
$(that).parent().parent().parent().parent().find(“.recordingName”).text(data.new_name);
},
error:function(){ alert(“error”);},
dataType:”json”});
}
return false;
});

The Javascript here is activated on the mouse click. We prompt the user for a value (just for fun), if the value is true then we call AJAX and execute a PHP file that we created to do all the work (see next part). We assign the value of “this” (“this” is a placeholder for the environment in the context of the area where the user clicked) to “that”. The reason we do this is because we need to access the DOM of the original web page where the user clicked but once the AJAX is executed the environment of “this” will shift and “this” will be in another context. Long story short “this” is over-ridden so assigning it to another value that we can reference moving forward is a good idea.

The part that does the work

<?php
header('Content-Type: application/json');
$newName=$_REQUEST["newName"];
echo "{\"new_name\":\"$newName\"}";
?>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s