AJAX-enabled Sticky Notes With PHP & jQuery

22 January 2010 Friday

This application was viewed 1379 times

0

AJAX-enabled Sticky Notes With PHP & jQuery

Today we are making an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen. Every movement is going to be sent to the back-end via AJAX and saved in the database.

We are using version 1.4 of jQuery and the fancybox plugin (you can also check our CSS3 Lightbox Gallery Tutorial, where we also used fancybox).

You can download the example files and keep the demo site open in a tab so that it is easier to follow the steps of the tutorial.

Step 1 – XHTML

The first step is to create the necessary XHTML structure. The markup in the main demonstration file – demo.php is pretty straightforward, as you can see for yourself from the code below.

demo.php

<div id="main"> 
<a id="addButton" class="green-button" href="add_note.html">Add a note</a> 
  
<?php echo $notes?> 
  
</div>

It contains the main div, which holds all the notes and limits their movement during the dragging process. The rest is generated dynamically by PHP after running a SELECT query against the database, and after storing the result in the $notes variable as you will see in the next step.

If you click the “Add a note” button on the demonstration site, you will see that a form with a live preview pops up. This functionality is provided by the fancybox, which fetches add_note.html (which contains the form) and shows it within a pop-up.

add_note.html

<h3 class="popupTitle">Add a new note</h3> 
  
<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:0;top:65px;z-index:1"> 
<div class="body"></div> 
<div class="author"></div> 
<span class="data"></span> 
</div> 
  
<div id="noteData"> <!-- Holds the form -->
<form action="" method="post" class="note-form"> 
  
<label for="note-body">Text of the note</label> 
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea> 
  
<label for="note-name">Your name</label> 
<input type="text" name="note-name" id="note-name" class="pr-author" value="" /> 
  
<label>Color</label> <!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div> 
<div class="color blue"></div> 
<div class="color green"></div> 
  
<!-- The green submit button: -->
<a id="note-submit" href="" class="green-button">Submit</a> 
  
</form> 
</div>

In the form you can fill in the text of the note, your name and choose a color. Providing a way for users to see how their note will appear in the page in real time is a useful addition which serves another practical purpose – when clicking the submit button and the lightbox window closes, the preview note is copied to the main div, which saves us from writing additional code.