Java Developers Book: Javascript

Saturday, 10 October 2015

Javascript Check if form is Dirty.

Checking if the form is dirty or not is an important scenario that comes in most web applications. Typically this implies to the fact that there is always some form in the application that will be containing atleast 20-30 fields. Here it becomes tedious to keep a track of all the values for all fields .

There are some ways to check if the form is dirty.

Approach #1

1. Serialize the form (and all its values) before showing it .
e.g

  $(document).ready(function(){   
    form_before_change = $("form").serialize();    
  });

2. Serialize it again in a "onbeforeunload" event handler

 window.onbeforeunload = function (e) {   
   var form_changed = $("form").serialize();   
   if(form_before_change != form_changed) {   
    return 'There is unsaved data. on the form';   
   }   
  };

Thursday, 18 September 2014

Create a simple tree view effect using Jquery / Javascript

Create a tree view using javascript is one of the important needs in the UI development where document repository is implemented.The example below shows it how to do it.

Here the logic is like

The sub div for the parent div must have the same class as that of the parent div id.

An event handler is written on the parent div click which toggles all the div with class as the "one" It is shown in the script tag.

 <html>  
 <head>  
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
 </head>  
 <body>  
   <div id="one" style="" >  
     C:  
      </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Program files  
           </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Windows  
           </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Users  
           </div>       
 <script>  
           $("#one").click(function(){  
                var id = $(this).attr('id');  
                $("."+id).toggle();  
           });  
      </script>  
  </body>  
 </html>