Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Monday, January 18, 2016

Useful JavaScript libraries

Below are some JS libraries I used and they work :) :

1. Sending AJAX form with attachments (which works on IE9 )


I found this JQuery pugin  http://malsup.com/jquery/form/ with decent documentation which meet the requirements.


Quick Start Guide

1. Add a form to your page. Just a normal form, no special markup required: 
<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>
 
2. Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOM is ready: 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head> 

2. Date picker with options (which works on IE9 )

The answer is Datepicker from JQuery UI: https://jqueryui.com/datepicker/
You may want to stop the user to insert data directly in the input field manually, this can be archived by setting 'readonly' parameter to 'true'. The problem is that the field looks disabled all the time, you may encounter some users thinking that they should not click on that input field.
Solution: make the input field readonly when the user clicks on it and after closing the Datepicker the input field will be made again writable ('readonly' set to 'false').

 beforeShow: function(input, inst) {
                             $(input).attr('readonly', true);
 },
 onClose: function(dateText, inst) {
                        $(this).attr('readonly', false);

 }


3. HTML 5 Placeholder working on  IE9 (make sure not to send default values when submitting the form)


https://github.com/parndt/jquery-html5-placeholder-shim

Usage

Just include the jquery.html-placeholder-shim.js script into your document head like so:
<head>
  <script type='text/javascript' src='jquery.js'></script>
  <script type='text/javascript' src='jquery.html5-placeholder-shim.js'></script>
</head>
The script will automatically execute itself on the $(document).ready event and can be re-executed at any time (for example, to add placeholders to text boxes created during dynamic changes to the page) by running $.placeholder.shim();.

HTML5 placeholder Example:

<input type="search" placeholder="search the internets" name="query" />

4. Searchable Drop down list

 http://harvesthq.github.io/chosen/
Also Bootstrap theme for Chosen:  https://github.com/dbtek/chosen-bootstrap


If you form is dynamically loaded you can use it like this:

<script>
        $( document ).ajaxComplete(function() {
            $.placeholder.shim();
            $("#select_input").chosen();
        });
  </script>