Wysiwyg: What you see is what you get editor

I created a wysiwyg editor using Javascript, jQuery, HTML5 and bootstrap for designing. It has some basic formatting options. I will keep adding and making it robust. But it is yours to use for the purpose.

Here is the link to demo. It is compatible with firefox and chrome for now but not that much robust.

Backbone.js: MVC framework for Javascript – Views

In the previous post, we saw Routers of Backbone. Views as name suggests give views to your page, form whatever. In a single page application, each page has a view and they in result have multiple form views eg- one for login, one for home, one for landing page. How it is done?

As we have seen in the routers we created a single page (http;//yourwebsiteurl/) and it had three views default, loginpage, loginuser. We are going to take advantage of the router and will create views for each of them

Requirement: Backbone.js ( + Underscore.js ), jQuery.js ( latest )


Consider the html below the body of a html page which we are using, default-view, userpage-view, userlogin-view.

<!--  Remember the order of the scripts. We will describe the the contents of default.js in next post while summing up the example. Right now example wont work, that is, all the views will be displayed-->
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript" src="underscore.js"></script>
     <script type="text/javascript" src="backbone.js"></script>
     <script type="text/javascript" src="view.js"></script>
     <script type="text/javascript" src="router.js"></script><!-- Router we explained in the previous post is used-->
     <!-- script type="text/javascript" src="default.js"></script -->

         <div id="default-view">
               <input id="loginpage" type="button" value="Login Page" />
         <div id="loginpage-view">
               <input id="email" type="text" name="email" /><input id="login" type="button" value="Login" />
         <div id="loginuser-view"></div>

Contents of view.js

var pageview = Backbone.View.extend({  //Creating the view by extending backbone.

    el: $(document), //it is not playing role in this example as we are creating multiple views. if in case we were implementing let say loginuser view only, we would have set it $('#loginuser').

    events: { //events that we needs to bind, here click on buttons is used.
        'click input#loginpage': 'loginpage',
        'click input#login': 'loginuser'

    initialize: function(){   //this is called when an object of view is created.
        _.bindAll(this, 'render', 'loginpage', 'loginuser', 'loginpageview', 'loginuserview');  //binds all the function that we to the view(pageview) object
       // this.model = new loginModel();  //comment it as we are not implementing model
        this.render();   //render function will be called, it is sort of convention to use it to show default view. not necessary always.

    render: function(){ //default view

    loginpage: function(){ //when Login Page button is clicked this function is called which we bound in events.
//Your pre processing of data if any.
        window.location.href = 'http://yourwebsiteurl/#/loginpage';

    loginuser: function(){ //when login button is clicked this function is called which we bound in events.
//Your pre processing of data if any. Generally model is used here. In this case when you will get email and password use model to check if the user is valid. Then perform resultant action.
    	var email = $('#email').val();
    	window.location.href = 'http://yourwebsiteurl/#/loginuser/'+email;

    loginpageview: function(){
//This function will display the contents of loginpage view.

    loginuserview: function(email){
/* Resultant of the login action is this view. This is just for the sake of explaining views. */
/*some action here to retrieve the view of logged in user, most probably from database */
	$('#loginuser-view').text('Hi '+email);


Everything is explained in the comments. We are left with only connecting router with view, which will be the content of “default.js”. In the next post over simple working backbone backed application will be ready (minus model). Hope I have managed to make you understand backbone.

Backbone.js: MVC framework for Javascript – Models

There are many MVC frameworks for Javascript. Spine.js and Backbone.js are most famous and used of all. But we’ll be seeing only Backbone.js here only.

Before that, spine is fundamentally different from backbone. Spine strictly follows MVC model, while there is actually nothing like Views in backbone conceptually. Plus there is no controller either in backbone, C stands for collection.

So, model is model+controller, and controller is views in backbone. Backbone also uses Underscore.js as helper for collections. So, we need both underscore and backbone for the application while spine is used alone.

We will start with models first. Model have numerous methods to perform various operations. The example are based on ajax requests, instead of CRUD operations using REST API. We’ll get back to those later. Its not that complicated just lets get started with what we know already.

Requirement: Backbone.js ( + Underscore.js ), jQuery.js ( latest )


* Backbone model should have everything which is interacting with your database.
* A user model can be implemented by extending backbone's existing model and its methods.
var book = new Backbone.Model.extend({
// defaults method holds key-value pair object. These are like class variables. You can set them and use them later.
    defaults: {
        'Title': '',
        'Author': '',
        'Publisher': '',
        'ISBN_No': 0

* fetch method by default is associated with url we specify for model but we have overwritten it for now.
* We are using fetch for fetching the data from database.
    fetch: function(){
        var url = 'http://example.com';
        var call = 'getBook';
        var id = '12';

// Ajax call
            url: url,
            type: 'GET',
            dataType: 'JSON',
            data: {'call': call, 'id': id},
            success: function(data){
                //Do something with your data using jquery or return some html from the handler.


* save method is used for saving data to database. By default on calling save default url is used to save.
* We have overwritten just for now. Save by itself identify create and update operation for database.
* We will come back to this later
    save: function(){
* this is pointing to the instance which has called save method.
* get method for model will get you the values stored in the variable in defaults of the model's instance.
        var url = 'http://example.com/savebook.php';
        var data = {'title': this.get('Title'), 'author': this.get('Author'), 'publisher': this.get('Publisher'), 'isbn': this.get('ISBN_No')};
            url: url,
            type: 'POST',
            dataType: 'JSON',
            data: data,
            success: function(data){
                //Do something when your data get saved in your database.
* When we try to update the defaults or save the model validate methods is called by default.
* It should return nothing if validation succeeds because this method by default returns true;
* In case of fail an error string can be returned as below.
    validate: function(attrs){
        //validation for the values to be saved.
        var error = '';

        if(attrs.ISBN_No == 0)
            error += 'ISBN No cannot be equal to 0';
        if(error != ''){
             return error;


Everything is explained in comments. Also go through the methods associated with model here.

Hope you like it. It may not seem very intuitive for now. But I think you must have gotten taste for it. We’ll work with Routers in upcoming post.

Notify.js: jQuery plugin for notification

Notify.js is a small jQuery plugin to display notification. It creates a notification box for the notification to display. You might have seen the real time notifications of Facebook in bottom-left corner, this plugin does the same.

You can see the demo and download it from here.

Refreshing a particular div

With the evolving and more dynamic web application. Refreshing particular part of the page is very much required. Recommended ads on Facebook use it. When we click on like ad, it sends the server tag of the ad the server recommends you another ad. The use of it I can think of is for Views. Create a view of different object on your page and call them using load method.

Required: jquery-latest.js


<script type="text/javascript" src="jquery-1.6.js">
<script type="text/html">
       # is selector for id which is newcontent, a div here. Load method loads the content of file2.php in newcontent div.

Pinterest: New buzz

Pinterest is a new website launched in March’10. Instead of going the traditional way, it used people’s interest as its base.

Login is by invite only for now. You can pin your interests, see and re-pin other people’s interest, follow people having same interest. It do not give the social experience which Facebook gives but its of great use for companies and individual products. They can conduct survey for their products or analyse their products.

There is also one thing I would like to focus on- design. Look at the vertical layout, jQuery plugin Masonry gave it that look. Its kind of nice and new design.

They have APIs for sharing and all. Lets see who comes up with something new using it. Try it, see if you like it.

jQuery plugin – cycle: Slideshow of your own in a sec

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.


Requires: Javascript, jquery


<div class="classObject">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.cycle.js">
<script type="text/javascript">
          Line 12: it means check if document is ready to apply javascript over it.
          Line 13: $(‘#classObject’) selects the object having class name classObject. # is called selector. We apply a method cycle over this class.
          Line 14: fx(function/effect) is required parameter which can be defined in many ways here it is shuffle.
          Line 15: shuffle is optional, if its not defined there is default value top:15px and left: width of container. Here both are defined in line 16 and 17.
         Line 19: easing can only be used with easing plugin of jquery.
         Line 20: delay is also required parameter, which takes time for effect for single transition in milliseconds.



  • Take care of the brackets people usually get it wrong. 
  • “id” can also be used instead of class (instead of #(hash) .(dot) is used as selector). 
  • jquery.js is required.
  • jquery easing plugin will make it great.
  • Give 3-4 div same class name, by this way there will equal number of div having slideshow of there own. Like if you need multiple slides at a time slideshow.
  • There are many other cool fx. You can also create custom.
  • There are also some other parameter apart from fx, delay etc. Take a look into the coding of jquery.cycle for other parameters.

There some great demos on the site of jQuery cycle. You can also find easing plugin on this site.

Jquery post method for JSON in php files

jQuery is the awesomest thing I have came across so far. It makes things so easy one can easily understand why upon seeing example below. “post” method of jQuery is frequently used by many sites even Facebook and Google. You must have seen that log-in to Gmail doesn’t redirect/reload and tells you that username or password is incorrect instead they post the values using AJAX or lets say using post method of jQuery and display the error response.

Required: jquery.js(I use jquery-1.6.js. Download latest!)



$.post( 'filename', {data : data}, function(data , status){
if(status == 'success'){
alert(data.name); //your code }
}, "json" );

In file2.php

echo json_encode(array('name'=>$_POST['data']));



  1. checks if the current document is ready.
  2. is the jquery method “post” is given arguments, first is the “filename” is the file name which you want to handle the post variables. Second is associative array sort of thing in which first “data” is name of the post variable and second “data” is the value of the variable. Third argument is the callback function, this executes when the post is complete. This function is provided two arguments, first is “data” which is the response from the file which is handling post. We will explain it after sometime. And the second is “status” it is optional in all of this without this code will still work. It actually holds the status of response.
  3. checks if status is success
  4. if status is success we use alert to check for the JSON value which is data.name and will alert “data” because we sent it back from file2.php.
  5. “json” is the last argument of the post method which tells the that this method is expecting JSON as response.


  • post variable name can be in quotes ‘data’.
  •  argument status can be omit.
  • “json” is required as argument if you want response to be JSON.



  1. checks if $_POST[‘data’] is set. The data index is the same variable name we have sent from file1.php.
  2. first we create an associative array with key as “name” and value as $_POST[‘data’]. Then we encode it in JSON using json_encode and echo it, which is accepted by first file in callback function as data and checked using alert in file1.php as data.name which is the key in associative array.


  • This file should not have any of HTML code.
  • This file should not echo anything other than JSON.
  • You can use include() but above two points should always hold.
Hope this will help you in case you find trouble. Please also go through the jQuery website, they have pretty good tutorials.