Installation

Download the latest version from the CodeMirror website. As of today, it is version 0.62. After you unzip it you will see 3 directories – js, css and contrib. contrib holds parsers that other people have written such as the lua, python and PHP. css holds the color schemes for syntax highlighting and js contains the necessary scripts for CodeMirror to run.

Basic Usage

If we have a textarea with an id of code that we wanted to turn into a CodeMirror editor with a MirrorFrame(more on this later) then we would use the code below. Note that we need to specify where the parserfiles and stylesheets for the particular type of syntax (in this case javascript) are located.

  var textarea = document.getElementById('code');
  var editor = new MirrorFrame(CodeMirror.replace(textarea), {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true
  });

The result would be:

MirrorFrame

The MirrorFrame class extends the syntax highlighter and makes the editor feel more of a true editor – with a toolbar/buttons. You can find the source of the MirrorFrame implementation in js/mirrorframe.js. As an example we’ll take the ‘get current line number’ function. It references this which in our case is the current editor. There are alot of functions CodeMirror makes available (list here), you can write your own functions and attach them to a button in your own MirrorFrame editor.

  line: function() {
    alert("The cursor is currently at line " + this.mirror.currentLine());
    this.mirror.focus();
  },

CodeMirror

We can pass many configuration options to the CodeMirror class when we instantiate it such as whether we want line numbering and the size of tab width. An example below:

editor = CodeMirror.fromTextArea(textarea, {
content: textarea.value,
parserfile: ["parser/tokenizejavascript.js", "parser/parsejavascript.js"],
stylesheet: "css/editor_colours/jscolours.css",
path: "js/",
autoMatchParens: true,
width: '100%',
height: '100%',
textWrapping: false,
lineNumbers: true,
tabMode: 'spaces',
iframeClass: 'ifc',
indentUnit: 4
});

There are also 2 events available for the developer to use. onChange and initCallBack. initCallBack is called when the editor has loaded and is ready for the user to start entering code (remember an iframe is created, additional javascript files are loaded). onChange occurs whenever a change is made in the editor itself. If we wanted to build an on-the-fly code tester, and needed to fetch the code from the editor whenever the code in the editor changed, then we would do the following:

  var editor = CodeMirror.fromTextArea(textarea, {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true,
    onChange: function (n) { alert(editor.getCode()); },
  });

This was just a quick look at CodeMirror, but hopefully you can appreciate just how powerful it is. It could be used in your website’s admin interface to alter code on the fly, or be used in Titanium or AIR to create a desktop IDE in HTML/Javascript.

So, instead of looking for a pure AJAX solution, I decided to implement this functionality by using a combination of AJAX (for the localhost) and a traditional PHP POST request (for the web server). The trick here is to execute the AJAX call before the form is submitted – by catching the form submission event using JavaScript. Once the AJAX call is successful, we allow the default form submission to take place. In case there is an error with our AJAX call, we should stop the propogation of the traditional form submission too.

Ok, so let’s start off with a simple example – a no-frills form with a few fields.

<form method="post" id="webform" action="http://www.example.com/path/to/PHPscript.php">

<label for="firstname">first name:</label>
<input type="text" name="firstname" id="firstname" value="" />

<label for="lastname">last name:</label>
<input type="text" name="lastname" id="lastname" value="" />

<label for="email" id="l_email">email address:</label>
<input type="text" name="email" id="email" value="" />

<input type="submit" name="Submit" id="submit_butt" value="Submit" />
<input type="reset" />

</form>

When the above form is submitted as it is, the form contents will be sent to the PHP script in the webserver. As I mentioned earlier, what we need to do now is “catch” this form submission event and insert our AJAX call before that. Let’s see how we can do that now. We will be using jQuery for our JavaScript needs.

$(document).ready(function(){
$("#webform").submit( function()
{
var success = -1;

$.post("localScript.php",
{
firstname: $("#firstname").val(),
lastname: $("#lastname").val(),
email: $("#email").val()
},

function(response){

if(response.status == "0")
success = false;
else
success = true;

}, "json");

var d = new Date();
var t = d.getSeconds();

while(success==-1)
{
var d = new Date();
if(d.getSeconds() - t > 4)
{
success = false;
break;
}
}

return success;
});
});

We set-up an event handler using jQuery, which fires whenever the form is submitted. We then make an AJAX call to the localhost to submit the form contents. We have a callback function which checks the status of the AJAX call. In case, any error occurs on the localhost, an error code can be returned (in our case, the status value will be 0) and we have to stop the form submission by returning “false” from the event handler function. This will stop the default action of the submit button, i.e. it will prevent the HTTP form submission.

This is achieved using a hack. Since the script will not wait for the callback function to return, the next statement, i.e. the “return” statement will be executed immediately after the $.post() call is made to the server. However, we cannot return from the function without knowing whether the operation on the backend succeeded or not. Since, JavaScript does not natively have any sleep()-like function, we have to force our script to get into a blocked state using a while() loop. We then manually terminate the while loop if we did not hear back from the server within a “few” seconds. In our example we have defined the timeout to be 4 seconds. In case we don’t hear from the server within this time, we will terminate the form submission by returning a “false”. This elaborate hack is required to ensure that we do not proceed to the next stage without knowing what happened to the data we submitted to the localhost.

If everything goes well in the localhost, the contents of the form will be processed and stored in the localhost database by the PHP script we have called using AJAX. The submit event handler will then return “true”. This would in turn cause the form to be submitted to the PHP script on the remote server, as defined in the action attribute of the <form> tag. Once the form is submitted, the browser requests, and loads this PHP script. The PHP scripts recieves the form contents as POST variables and saves them (by perhaps, storing them in a database).

We are not done yet, though. We still have to send the user back to a page on the localhost once the PHP script has finished processing and storing the form contents. We do that by:

$redirect_url = "http://localhost/path/to/some/page";
header( 'Location: ' . $redirect_url );
exit;

It is important that the header() is called before any actual output is sent to the browser. For example, you should not have any echo statement, or raw HTML output before calling the header().

That’s about it! Now we are really done! In most cases, you will notice that this entire process is so slick that your user would hardly notice the redirection from the page on the webserver to the page on the localhost! I have put together a barebones HTML page containing the code fragments above, which you can download for your reference and use from here.

The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

Take this standard web page. It pulls the latest news items from a database and displays them like so. That is the basic DOM of the page.

<head>
<title>Latest News</title>
</head>

<body>

# More Header, sidebar code here #

<p class="latest">Employees at the Karate Bank are getting the chop</p>
<p class="latest">NASA shares have sky-rocketed</p>
<p class="latest">Investors at the Sushi Bank feel they are getting a raw deal</p>

# More content, footer code here #

</body>

</html>
</pre>

If we wanted to highlight all of the news items on this page we can use jQuery’s each method to iterate through them and modify their CSS.

$("p.latest").each(function(){

	$(this).css({"background-color" : "yellow"});

});

But what if we wanted to pull that information from another page? Due to some restrictions in the software the website is using, mayby they can’t display the latest posts on every page that they want to. To get this information we would need to do 2 things. The first is to pull the latest news page itselfand the second is to parse that page and only show the latest news (not the header, sidebar etc.)

Ajax

First of all we want to pull the page using AJAX and save it in a variable. To do this we use jQuery’s $.get method. We specify the page and since we are not sending any data (like information from a form) we don’t need to specify anything else. We then save the contents of latestnews.html into the variable content. This is important.

$.get('http://urlto.com/latestnews.html' ,function(content) {

});

Narrowing Our Search

At this stage we cannot simply document.write(content) as it contains all of the header, footer, sidebar and text in there. We need to select the latest news paragraphs that we want. For this we use jQuery’s standard selector. We don’t need to use a special plugin or write our own function. The only thing we need to change is to pass an extra parameter into the selector. This parameter tells jQuery’s selector engine where it look for the pattern/rule. If it isn’t specified (it usually isn’t in standard codes) then jQuery assumes you mean the current page’s source (DOM) however by specifying this we can narrow our search. In the code below we pass the content variable (which contains the entire source of latestnews.html) into the selector. jQuery will then look for all paragraphs with a class of latest inside the content variable.

$.get('http://urlto.com/latestnews.html' ,function(content) {

$("p.latest", content).each(function(){

});

});

Displaying the data

Since we have matched the URLs, we can display the content as we please.
If we wanted to highlight the latest news paragraphs on that page then we would:

$.get('http://urlto.com/latestnews.html' ,function(content) {

$("p.latest", content).each(function(){

$(this).appendTo("#latest");

});

});

More

Using the information you’ve learnt, you can apply this to other situations. For example you can parse RSS feeds and reflect live updates of the RSS feed on the website straight away. These techniques are especially useful in remotely hosted software systems where you have no control over the source code. Or if PHP coding isn’t your strong point, but you know a little bit of jQuery, you can easily modify some of your website content this way.

1. The Firebug Extension for Firefox
2. Greasemonkey

If the page that we are going to manipulate doesn’t already include jQuery on it, then we can include it with this small Greasemonkey script. If jQuery is already included on the page, there is no use for this script.

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works

    }

Source
With the jQuery library on the page we can now go ahead and start entering commands. For this example we’ll take jQuery.com, we can enter a basic jQuery Selector and see what happens.

before.png (http://img228.imageshack.us/img228/1918/beforeus0.png) Download, rehost, embed this image here.

after.png (http://img218.imageshack.us/img218/5812/aftercd6.png) Download, rehost, embed this image here.

As you can see it’s very easy to manipulate pages. You can use this to manipulate scripts that your working on. For example, if you were trying to nail down a certain selector, or find a 4th parent of something, its going to be alot easier and faster to do it in the Firebug terminal than editing, saving and refreshing the page while your trying to perfect it. With jQuery’s CSS capabilities, you can also test your CSS out live, without needing to switch back and forth between your editor and firefox.

In part 1 of the tutorial, we covered the PHP and MySQL side of things. In this part we will be enhancing it with jQuery’s AJAX and manipulation functionality. The to-do list will degrade fine – if the user has Javascript disabled, the application will still work. All changes occur in the index.php file.

There are two parts to the script. One handles the posting of new posts, while the other handles posts being deleted. We’ll start with adding new posts.

//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){

//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();

//Build the URL that we will send
var url = 'submit=1&content=' + formvalue;

//Use jQuery's ajax function to send it
 $.ajax({
   type: "POST",
   url: "process.php",
   data: url,
   success: function(){

//If successful , notify the user that it was added
   $("ul").before("<p class='new'>You just added: <i>" + formvalue + "</i></p>");

   }
 });

//We return false so when the button is clicked, it doesn't follow the action
return false;

});

The url part confuses some people. What we are doing is sending a request to the process page, we need to include some data with that request. In process.php there was the line

if($_POST['submit']){

It checks to see if $_POST['submit'] isn’t null (has a value). If it is null (has no value), then it means that the form hadn’t been submitted, by sending any value, in our case submit=1, we are telling process.php that the button had been clicked so it should run the rest of the PHP script. The rest of the PHP script calls for the content, which we also send in the url (content= ‘ + formvalue). Instead of sending anything, we only want to send the value of the form (The stuff inside the textarea – that the user wants to submit). By returning false at the end, it prevents the submit button from carrying through with its action=”process.php”. If it did, it means the page would refresh when the information was sent which is exactly what we don’t want.

The code that handles the deletion of posts is similar.

//Check to see if an anchor link was clicked (The delete link)
$("a").click(function(){

//Save the link in a variable called element
var element = $(this);

//Find the id of the link that was clicked
var noteid = element.attr("id");

//Built a url to send
var info = 'id=' + noteid;

 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   element.parent().eq(0).fadeOut("slow");
   }
 });

//We return false so the browser doesn't actually follow the link
return false;

});

When we were displaying the posts in process.php we echo’d the id of the post in the anchor tag. We are then getting this id element.attr(“id”) and building the URL. So when the AJAX call is sent, it will be something like delete.php?id=POSTID. If the AJAX call is successful, then we need to hide the list item.

element.parent().eq(0).fadeOut("slow");

In that bit of code, we select the element (anchor tag) that was clicked. We then find it’s parents and take the first one using eq(0). It’s ‘first’ parent is the list item its in (<li><a href></a></li>) and we fade that out slowly.

Demo: http://query7.com/demos/php-jquery-todolist/

Download: http://query7.com/wp-content/uploads/php-jquery-todolist.zip

You can read the first part of the series at PHP + jQuery Todo List Part 1

In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.

It will consist of a few files.

• delete.php – delete the note.
• process.php – create the note, display the notes.
• index.html – form, javascript

We will be storing the list items in a MySQL database. The query:

CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)

index.php will only contain the form (for now). It’s a fairly basic form, it contains a textarea (where the user enters their note) and a button they hit to submit it. The information is sent to a file called process.php through the post method.

<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Post it" />
</form>

process.php then handles the information that was sent from the form. We only need to insert the content into the database because the id field auto_increments itself. We display the to-do list in a nice and tidy list. We also provide a link after the post to delete it.

<?php
//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

//Was the form submitted?
if($_POST['submit']){

//Map the content that was sent by the form a variable. Not necessary but it keeps things tidy.
$content = $_POST['content'];

//Insert the content into database
$ins = mysql_query("INSERT INTO `notes` (content) VALUES ('$content')");

//Redirect the user back to the index page
header("Location:index.php");
}

/*Doesn't matter if the form has been posted or not, show the latest posts*/

//Find all the notes in the database and order them in a descending order (latest post first).
$find = mysql_query("SELECT * FROM `notes` ORDER BY id DESC");

//Setup the un-ordered list
echo '<ul>';

//Continue looping through all of them
while($row = mysql_fetch_array($find)){

//For each one, echo a list item giving a link to the delete page with it's id.
echo '<li>' . $row['content'] . ' <a id="' . $row['id'] . '" href="delete.php?id=' . $row['id'] . '"><img src="cancel.png" alt="Delete?" /></a></li>';

}

//End the un-ordered list
echo '</ul>';

?>

delete.php does nothing more than delete the post. It uses the id parameter its provided to find the post entry in the database. Once it’s found, it’s deleted.

<?php

//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

//delete.php?id=IdOfPost
if($_GET['id']){

$id = $_GET['id'];

//Delete the record of the post
$delete = mysql_query("DELETE FROM `notes` WHERE `id` = '$id'");

//Redirect the user
header("Location:index.php");

}

?>

All of this produces a tidy to-do system. The source, stylesheet and images will be provided in a .zip file at the end of Part 2 of this tutorial.

You can read the second part of the series at PHP/jQuery Todo List Part 2

Chapter 7 is another excellent chapter – showing you how to write your own plugins. It goes into alot of detail, from extending the wrapper to proper naming conventions to looping through each element effected. This chapter is a must read for anyone considering writing their own jQuery plugins. Again, the authors have written 3 example plugins providing alot of reference material.

Check it out