Code & Config – sharing the smart bits

I have build simple function which helps me to make my code nice and clean as well as to have general solution for “on_change” AJAX submit. I have named the function q_submit_ajax_on_change with q in the front because I use it in my quantify project. The function uses another pre-build function called q_submit_ajax_on_change which I will describe next. You called this function from anywhere you have your form which should be submitted via AJAX. You need to pass the element (input or textarea) which will be controlled by this function. The function basically checks the value of the element and if the value has changed then the data are submitted via AJAX on blur, which means when the user leaves the element.

function q_submit_ajax_on_change ($element, $form){
	$($element).live('focus', function(){
		$characters = $(this).attr('value');
	});

	$($element).live('blur', function(){
		$current_characters = $(this).attr('value');

		if($characters == $current_characters){
			// No change ....
		}else{
			// Submit the Form when the user looses focus
			q_ajax_form_submit($form, $('#system_message'));
		}
	});
}

The data are submitted using the q_ajax_form_submit function which I have also build for quantify project. It requires 2 variables, form and the id of the element where the success or failure message should be displayed. This function uses the basic jQuery Ajax function but on top displays the progress bar (handled by q_display_progress_bar() function and displays custom success and failure messages, using functions – q_display_success_message() and q_display_failure_message().

function q_ajax_form_submit (form, message_box){

	q_display_progress_bar();

	$form = form
	$url = $form.attr('action');
	$dataString = $form.serialize();	

	$.ajax({
		type: "POST",
		url: $url,
		data: $dataString,
		success: function (data) {
			q_display_success_message();

			// Return the data as well
			$(message_box).html(data);
		},
		error: function () {
			q_display_failure_message();
		}
    });
}

This is my basic framework for the AJAX calls. Here are the last three functions mentioned before.

Function q_display_progress_bar basically inserts animated gift which is specified as background css image for ajax_loader id. You can see this loader is inserted before id called content. We could also specify variable instead of id directly as I have done in my case.

Function q_display_success_message is pretty specific for my case where I have decided to insert the “Saved” image into the page and fade it out. You can see that I remove the animated loader from the page before I insert the “saved” image.

The q_display_failure_message is doing basically the same what the success function but is using one more additional function which scrolls the page to the top. q_scroll_top(110,250) as well as inserts the black overlay using function q_insert_overlay(’body’).

function q_display_progress_bar (){
	// Display animation during the ajax call
	$('<span id="ajax_loader"></span>').insertBefore('#content');
}

function q_display_success_message (){
	// Display "Saved" message when ajax returns success
	$('#ajax_loader').remove();
	$('<span class="saved">Saved</span>').insertBefore('#content');
	$('.saved').hide().fadeIn(500).delay(1000).fadeOut(500);

	setTimeout(function(){
		$('.saved').remove();
	},2000);
}

function q_display_failure_message (){
	// Display "Failure" message when ajax returns failure
	$('#ajax_loader').remove();

	// Insert Overlay background
	q_insert_overlay('body');

	$('<span class="failure">There has been problem. Some of data might not be saved.<span id="small_close">close</span><span id="big_close">Close</span></span>').insertBefore('#content');
	$('.saved').hide().fadeIn(500);

	// Scroll the view point
	q_scroll_top(110,250);
}

So here are the last two functions. These are visual functions so you do not need to use them and they might not be the right solution in your case. I have specified semi transparent background css image for popup_cover which brings the black overlay on top of which the Ajax messages are positioned.

function q_insert_overlay($body){
	// Inserts the overlay into the page
	$window_height = $($body).height();
	$('<div id="popup_cover"></di>').insertBefore($('#page'));

	$('#popup_cover').css({
		'height': $window_height
	});
}

function q_scroll_top ($top, $time){
	$('html, body').animate({
		scrollTop: $top
	}, $time);
}

And this is it. This brings modern web application into the life where pages do not have to be reloaded and consume users time so user can focus more on the core of her/his work.

Based on user statistics, users prefer to have the form validated as they type so they do not have to come back and correct stuff after they submitted the whole form. In our example I will show you how to validate the form with multiple email addresses. You can start by defining CSS class called “incorrect_email” where you define how the input field should look like when the validation fails. I can imagine you will define something like this.

.incorrect_email {
  border: 1px solid red;
  background: pink;
  color: red;
}

After this we will create jQuery script which will validates every input field which has assigned class “email_validation”. This could be done in so many ways but I have chosen this for its simplicity. The key here is to user blur() function to validate the input field right after the user leaves the field and it does not matter if its by pressing TAB or clicking with mouse.

$('form input').blur(

  // check the input fields which has a class email_validation as we expect more email fields in the form
  if($(this).hasClass('email_validation')){

   // get the current value
    var email = $(this).val();

    // define regular expression for email
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    // validate the email address
    if(!filter.test(email)){

      // email incorrect add the class "incorrect_email"
      $(this).addClass("incorrect_email")

    // email corrected remove the class "incorrect_email"
    }else if(filter.test(email)){

      // you could also check in this point if the the input has already the class...
      $(this).removeClass("incorrect_email");
    }
  }
);

This can be quite handy if you have forms with multiple fields and few of them are email type (for example: inviting your contacts). You might also need to do some other type of validations like if the fields are empty and so on, this is just a part of your validation function.

It is always great when you can allow users to send data from your forms via ajax. The user does not need to leave the page and if the data has been successfully transferred he/she is provided with success message.

This piece of code should placed into your javascript function after the successful validation which means it should only be executed if the content of the form elements passes the validation.

There is couple of ways how you can implement ajax to your form with jQuery. This is one of them.

     // lets define which form are we going to use, so the data could be serialized
      dataString = $("#footer_contact_form").serialize();  

      $.ajax({
        type: "POST",
        global: false,
	url: $url,    // you would usually pass the url as a variable into the function which includes this ajax section - e.g. ajax_form($url)  but you could also specify the url directly in this place
        data: dataString,

        // here we will specify what will happen after the data  is sent
        success: function() {
          if($('.success_message').length == 0){
            $('<p class="success_message">Thank you for your message!</p>').insertBefore('#submit_cover');       // insert the success message into the DOM and hide it
            $('.success_message').hide();						

	    // Clear the form
	    $('#footer_contact_form input').val("");   // clean the form default values so the user gets the feeling that they were sent away
	    $('#footer_contact_form textarea').val("");
	    $('.success_message').fadeIn(1000);   // fades in the success message which we have inserted before but hided
          }else{
            $('.success_message').show();   // as you can see on top we have condition which check if the success message is already in place so we do not insert it more then once. If it is already in the DOM we just show it.
          }
        }
      });

There are so many ways how you can do this. You could also add condition which will cover the case when the form is not sent, lets say there are internet connection problems. Do not forget to validate the code first before using the ajax function.

I am sure you have seen it on facebook and some other sites. You start typing into the textarea and when there is almost no room left for your text then the textarea adjusts the height and you can continue typing more text without getting the scroll bar on the right.

I have build this function almost into the plugin stage but you can just simple grab the whole code and adjust the first 4 variables and you are ready to go.

(You can see working example on lewro.com)

$(function(){
  $textarea = $('#contact_us_wrapper form textarea');             // Set the textarea (it could simple be just $('textarea') and it would be applied to all of them across this site
  $characterLimit = 105;                                                          // Maximum number of characters in single line
  $originalHeight = $($textarea).css("height").replace("px","");  // Height of single line (without 'px')
  $animateTime = 500;                                                            // Set the time for animation

 $textarea.keyup(function(){
    $currentCharacters = $($textarea).val().length;               // Actual amount of characters
    $heightRatio = $currentCharacters / $characterLimit;     // Get the ratio of characters
    $roundRatio = Math.round($heightRatio);                       // Round the ration so it can be used for new height calculation

    if($currentCharacters > $characterLimit){
      // Calculate new height for textarea
      $newHeight = (parseInt($originalHeight)) * $roundRatio + "px";
      // Set the new heights
      $($textarea).stop().animate({height: $newHeight}, $animateTime);
    }else{
      $($textarea).stop().css({height: $originalHeight});
    }
  });
});

There are cases when it is very useful to grab plug-in which does the job for us but it is not always necessary. Usually plug-ins are build the way so they count with many different possibilities, options and settings. This can make the code larger.
Sometimes the required result can be achived with just a basic jQuery knowledge with few lines of code which can be part of your general.js file which means you will not have additional http requests when your page loads.

In my example I will show you have to create simple animation which can loop through various types of element producings various effects.

You can see the final result in the header on the lewro.com.

// We will be animating quotes
$(function (){

  // In our example they sit in the div with id quotes and every quote is paragraphs
 // We could easily changed this if we have for example  list of them $('#quotes li') or if they are images $('#quotes img'). You obviously do not have to keep the id quotes. It can be anything. Class or ul

  $quotes = $('#quotes p');
  $quotesSize = $($quotes).length; // we need to know how many elements we have, using length function

 // Setting the intervals for animation
  $n=0;
  $interval = 5000;
  $hideInterval = 300;
  $showInterval = 500;

  // Loop through quotes
  function loopQuotes (){

   $actual_quote = $quotes[$n];

  // This might look complicated but lets breake it down. Before the word "filter" we are saying hide the cover element with id qotes and filter mean that it be applied to all but not the actaul_quote (the one we are just looping through), that one will be showned.
   $($quotes).hide($hideInterval).filter($($actual_quote).show($showInterval));

    $n++;
          // Here we saying that when it loops through all of them then start from beginning (reset the counter to 0)
 	  if($n == $quotesSize) $n = 0;
 	  setTimeout(loopQuotes,$interval);
  }

  // call the looping animation
  loopQuotes();
});

As you can see in this example I am using jQuery functions hide() & show(), these could be replaced with fedeOut, fadeIn or slideUp, slideDown and so on.

There are cases where you do not want turn the visibility of certain elements off in your default CSS file. The reason is simple. When you get user who turned off the javascript in his/her browser these elements should be visible. The visibility off these elements should only be turned off for users we javascript turned on. Here is an example. You might have a content in boxes with tab navigation on top off them. You only want the first tab content to be visible when the page loads and leave the other turned off. The tab navigation is using javascript so you need to make sure that even when javascript is turned off the content off the other tabs is visible. In this example you can’t just simple turn the other boxes off in your main CSS and you also can’t use onload javascript or jquery function to turned this off because they would be visible until the page fully loads.

Here is the solution. Create javascript file and link it from the top of your page.

You can see the example on lewro.com.

<script type="text/javascript" src="/scripts/script_styles.js"></script>

Create a CSS file called script_styles.css and inside of it turn off the elements you do not want to be visible. You could for example create CSS class called visibility_off.

.visibility_off {
  display:none;
}

Inside the file javascript file we have created earlier and linked from the top of our page insert this function. Make sure the path to the CSS file is right.

(function () {
  var head = document.getElementsByTagName("head")[0];
    if (head) {
      // Lets build the CSS link
      var scriptStyles = document.createElement("link");
      scriptStyles.rel = "stylesheet";
      scriptStyles.type = "text/css";

     // Set the path to your CSS file
      scriptStyles.href = "http://www.lewro.com/wp-content/themes/caffee/css/script_styles.css";
      head.appendChild(scriptStyles);
  }
}());

So what is happening in here? The javascript fires when the page starts loading and inserts the link to your script_styles.css into the page’s head. This way your styles are immediately applied and there is not flickering of text which should not be visible during the loading of the site.

So what is the jQuery most first function? It is an onload function. What does it mean? Let start from beginning. You need to understand how javascript work. Javascript is a scripting language which is used to manipulate html elements of the page. It can interact with the elements which are already part of the page or it can even insert or remove additional elements from the page. If we want to execute the javascript commands we need to be sure that the page has already finished loading so we do not try to interact with elements which has not been loaded yet. That is why we need function which takes care of all this for us. jQuery onload function can do just that. It makes sure that the page (actually DOM – Document Object Model) has been fully loaded so our javascript “commands” can fire safely.

$(function(){
  // All your functions will come in here
});

Is it that simple? Yes it is!
Lets do simple example.

$(function(){
  // so we said that everything we put in here will be executed after the DOM finished loading
  // lets do the simplest function alert
  alert("hello world");

  // if you use Firebug (very important Firefox extension) you will find very useful to print stuff into its console, this is how you do it
  console.log("hello console");
});