My Blogs: Javascript Useful Code

Dynamic Regex :-
Try the following code when systen test is not function in javascript. while regex validation.
or
Dynamic create the Regex that is stored in another variable and compare
check In if condition you have place the regex pattern and email in correct location as follow

if(pattern.test(emailid)

var emailid='balamurugan2b@gmail.com';
var regexpattern='^([\w-]+(?:\.[\w-]+)*)@(gmail.com)$';
var pattern = new RegExp(regexpattern);

if(pattern.test(emailid)){
true;
}else{
false;
}

add more rows and delete row

Click Here

jquery drag and drop file upload

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#dragandrophandler
{
border:2px dotted #0B85A1;
width:400px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}
.progressBar {
    width: 200px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}
 
.progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5; border-radius: 3px; 
}
.statusbar
{
    border-top:1px solid #A9CCD1;
    min-height:25px;
    width:700px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
}
.statusbar:nth-child(odd){
    background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
    background-color:#A8352F;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
    color:#fff;
    font-family:arial;font-size:13px;font-weight:normal;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
    }
</style>
</head>
 
<body>
<div id="dragandrophandler">Drag & Drop Files Here</div>
<br><br>
<div id="status1"></div>
<script>
function sendFileToServer(formData,status)
{
    var uploadURL ="fileUpload.jsp"; //Upload URL
    var extraData ={}; //Extra Data.
    var jqXHR=$.ajax({
            xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                    xhrobj.upload.addEventListener('progress', function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //Set progress
                        status.setProgress(percent);
                    }, false);
                }
            return xhrobj;
        },
    url: uploadURL,
    type: "POST",
    contentType:false,
    processData: false,
        cache: false,
        data: formData,
        success: function(data){
            status.setProgress(100);
 
            $("#status1").append("File upload Done<br>");         
        }
    }); 
 
    status.setAbort(jqXHR);
}
 
var rowCount=0;
function createStatusbar(obj)
{
     rowCount++;
     var row="odd";
     if(rowCount %2 ==0) row ="even";
     this.statusbar = $("<div class='statusbar "+row+"'></div>");
     this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
     this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
     this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
     this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
     obj.after(this.statusbar);
 
    this.setFileNameSize = function(name,size)
    {
        var sizeStr="";
        var sizeKB = size/1024;
        if(parseInt(sizeKB) > 1024)
        {
            var sizeMB = sizeKB/1024;
            sizeStr = sizeMB.toFixed(2)+" MB";
        }
        else
        {
            sizeStr = sizeKB.toFixed(2)+" KB";
        }
 
        this.filename.html(name);
        this.size.html(sizeStr);
    }
    this.setProgress = function(progress)
    {       
        var progressBarWidth =progress*this.progressBar.width()/ 100;  
        this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
        if(parseInt(progress) >= 100)
        {
            this.abort.hide();
        }
    }
    this.setAbort = function(jqxhr)
    {
        var sb = this.statusbar;
        this.abort.click(function()
        {
            jqxhr.abort();
            sb.hide();
        });
    }
}
function handleFileUpload(files,obj)
{
   for (var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('file', files[i]);
 
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name,files[i].size);
        sendFileToServer(fd,status);
 
   }
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{ 
     
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
     handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e) 
{
  
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{

  e.stopPropagation();
  e.preventDefault();
  obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
 
});
</script>
</body>
</html>


fileUpload.jsp




<!--
File Name :-fileUpload.jsp
Created By:-B.Balamurugab
Created on:-May 14,2014.
Description:- This file is used for upload
    droped file 
Edited By 
-->


<%@ page language="java" import="java.io.*,java.util.*" %>
<%@ page import="java.sql.*,in.textech.library.DatabaseLibrary,in.textech.common.ConstantValues" %>
<%@page import="in.textech.library.DatabaseLibrary"%>
<%@ page import="in.textech.library.LocaleDateTime" %>
<%@page import="in.textech.common.ConstantValues"%>

<%@page import="java.sql.Connection"%>
<%@page import="com.mysql.jdbc.Driver"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.io.File"%>
<%@page import="java.io.IOException"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>

<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%

response.setContentType("text/html");
response.setHeader("Cache-control","no-cache");
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
try{
if(!ServletFileUpload.isMultipartContent(request)) {
  out.println("Request does not contain upload data");
  return;
 }

 // configures upload settings
 DiskFileItemFactory factory = new DiskFileItemFactory();

 factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
    ServletFileUpload upload = new ServletFileUpload(factory);
    String UPLOAD_DIRECTORY = "PO";

 // constructs the directory path to store upload file
 String uploadPath = System.getProperty("java.io.tmpdir")+ UPLOAD_DIRECTORY;
 // creates the directory if it does not exist
 File uploadDir = new File(uploadPath);
 if (!uploadDir.exists()) {
  uploadDir.mkdir();
 }
 String filePath = "";

 // parses the request's content to extract file data
 List formItems = upload.parseRequest(request);
 Iterator iter = formItems.iterator();

 // iterates over form's fields
 while (iter.hasNext()) {
  FileItem item = (FileItem) iter.next();
  // processes only fields that are not form fields
  if (!item.isFormField()) {
   String fileName = new File(item.getName()).getName();
   if(fileName!=null && !"".equals(fileName)){
    filePath = uploadPath + File.separator + fileName;
    File storeFile = new File(filePath);
    // saves the file on disk
    item.write(storeFile);
    
    
         }
  }
 }
}catch(Exception e){
 e.printStackTrace();
 
}

response.getWriter().write("y");

%>






drag and drop file upload pure java script .

                window.onload = function() {
                var dropbox = document.getElementById("dropbox");
                dropbox.addEventListener("dragenter", noop, false);
                dropbox.addEventListener("dragexit", noop, false);
                dropbox.addEventListener("dragover", noop, false);
                dropbox.addEventListener("drop", dropUpload, false);
            }

            function noop(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            function dropUpload(event) {
                noop(event);
                var files = event.dataTransfer.files;
               for (var i = 0; i < files.length; i++) {
    var xhr = new XMLHttpRequest();                               xhr.open("POST", fileUpload.jsp, false); 
                                    xhr.send(formData)
}
            }

            function upload(file,poID) {
            }
   function uploadProgress(event) {
                // Note: doesn't work with async=false.
                var progress = Math.round(event.loaded / event.total * 100);
                document.getElementById("status").innerHTML = "Progress " + progress + "%";
            }

            function uploadComplete(event) {
               alert("Complete Request");
            }


Show only  month and year

Call  setYearToDropDown() in onload of page

Html Code

<html>
<body onload="setYearToDropDown()">

<table>
<tr><td><td>Month</td><td>
<select name="year" id="year" style="width:155px" size="1" onchange="display_month()" >
</td>
</tr>
<tr><td><td>Year</td><td>

<select name="month" id="month"  style="width:155px"   size="1"  >
</td>
</tr>
</body>

<script>


function setYearToDropDown(){
   var currentDate = new Date();
         var currentYear = currentDate.getFullYear(); 
   var nextYear = currentYear +1; 
   var nextNextYear = nextYear+1;
   
     document.getElementById("year").options.length = 0;
  document.getElementById("year").options[0] = new Option('Select','');
  document.getElementById("year").options[1] = new Option(currentYear,currentYear);
  document.getElementById("year").options[2] = new Option(nextYear,nextYear);
  document.getElementById("year").options[3] = new Option(nextNextYear,nextNextYear);

   
 }

 function display_month() {

 var year = document.getElementById("year").value;
 var k=1;
 var d = new Date();
 var n = d.getMonth(); 
 var Currentyear = d.getFullYear()
 var month=new Array();
  month[0]="January";
  month[1]="February";
  month[2]="March";
  month[3]="April";
  month[4]="May";
  month[5]="June";
  month[6]="July";
  month[7]="August";
  month[8]="September";
  month[9]="October";
  month[10]="November";
  month[11]="December";
  
 if(document.getElementById("year").value !="") {      
  document.getElementById("month").options.length = 0;
  document.getElementById("month").options[0] = new Option('Select','');
  
  if(Currentyear==year) {
  
   for(var i=n;i<month.length;i++) {
    document.getElementById("month").options[k] = new Option(month[i],i+1);
   k++;
   }
  }
  else {
   
   for(var i=1;i<=month.length;i++) {
    document.getElementById("month").options[i] = new Option(month[i-1],i);
   }
  }
 }
 else {
  document.getElementById("month").options.length = 0;
  document.getElementById("month").options[0] = new Option('Select','');
 
 }
 
}

</script>
</html>

jQuery get radio buttom value

<td> <input type="radio" name="sendMail"  id="sendMailYes" value="yes" >Yes<br>
       <input type="radio" name="sendMail" id="sendMailNo" value="no" >No</td>

var issendMail =  $('input[name=sendMail]:checked').val(); 



To Select Multi select dropdwon

function selectTeamSubgroup(){
  $("#selectedVendor").each(function(){
            $("#selectedVendor option").attr("selected","selected"); });
  
 }
 

File Upload to Server  on change of input Box
window.addEventListener('load',function(){
                var emailAttachment = document.getElementById("files");
                emailAttachment.addEventListener("change", handleFileSelect, false);
});

 function handleFileSelect(e) {
 
 var storedFiles = [];
 var valuesCount;
         var requestAttachment;
  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  filesArr.forEach(function(f) {   
   storedFiles.push(f); 
   var reader = new FileReader();
   reader.onload = function (e) {
   }
   reader.readAsDataURL(f); 
  }); 
  
 
   var data = new FormData();
   valuesCount =storedFiles.length;
  for(var i=0, len=storedFiles.length; i<len; i++) {
   data.append('files', storedFiles[i]); 
  }
  
  
  if (window.XMLHttpRequest) 
  {
   requestAttachment = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) 
  {
   requestAttachment = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  var url = "conversionEmailAttachment.jsp";
  
  requestAttachment.open("POST", url, true);
  requestAttachment.onreadystatechange =callbackUpload(requestAttachment,mainUpload);
  requestAttachment.send(data);
 }
 
 function callbackUpload(requestAttachment,responseXmlHandler){
  return function(){
  if(requestAttachment.readyState == 4) {
   if(requestAttachment.status == 200){
   var height = 600;
   document.getElementById("selDiv").innerHTML="";
      var jsonObj = JSON.parse(requestAttachment.responseText);
    for (var key in jsonObj) {
     if (jsonObj.hasOwnProperty(key)) {
         var fileName1 = jsonObj[key];
      var html = "<div>" + fileName1.split("\\").pop() + " <img src=\"images/icon/attachmentDel.png\" onClick='deleteMe("+JSON.stringify(key)+");'/></div>";
            document.getElementById("selDiv").innerHTML+= html;
      height +=30;
     }
    }
    document.getElementById("email_send").style.height = height+"px";
   }
   else{
    alert("Http  error :"+requestAttachment.status);
   }
  }
 }
}

function mainUpload(main) {
}

function deleteMe(fileID){

 var url = "deleteEmailAttachment.jsp?fileID="+fileID;
 var request;
   try{
   if (window.XMLHttpRequest){
    request = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   }
   request.open("GET", url, true);
   request.onreadystatechange = callbackDelete(request,mainDelete);
   request.send(null);
  }
  catch(e){
   alert(e);
  }
}


 function callbackDelete(request,responseXmlHandler1){
   return function(){
  if(request.readyState == 4) {
   if(request.status == 200){
      var jsonObj = JSON.parse(request.responseText);
      document.getElementById("selDiv").innerHTML="";
    for (var key in jsonObj) {
     if (jsonObj.hasOwnProperty(key)) {
         var fileName1 = jsonObj[key];
      var html = "<div>" + fileName1.split("\\").pop() + " <img src=\"images/icon/attachmentDel.png\" onClick='deleteMe("+JSON.stringify(key)+");'/></div>";
            document.getElementById("selDiv").innerHTML+= html;
     }
    }
    
   }
   else{
    alert("Http  error :"+requestAttachment.status);
   }
  }
 }
}


function mainDelete(main) {
 
}

------------------------------------------------------------------------------

Disable dates in jquery Calender

var x="Threshold Reached";

    <% 

    CustomThreshold threshold = new CustomThreshold();
    String[] disabledDays= threshold.dateFoundCheck(employee_id);
    //String[] params = request.getParameterValues("someField");  
 
 int disableDaysLength=disabledDays.length;
    
    
    for (int i=0;i<disabledDays.length;i++) {
out.println("unavailableDates["+i+"]='"+disabledDays[i]+"';");
}
%> function unavailable(date) {
        ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
        day = new Date(ymd).getDay();
        if ($.inArray(ymd, unavailableDates) < 0 ) {
            return [true, "enabled", ""];
        } else {
            return [false,"disabled",x];
        }
    }

/* create datepicker */
jQuery(document).ready(function() {
  jQuery('#startdate').datepicker({
 
    minDate: new Date(2010, 0, 1),
    maxDate: '+1Y',
 //minDate: 0,
    dateFormat: 'dd-mm-yy',
    constrainInput: true,
    showOn: "button",
    buttonImage: "../images/cal1.gif",
    buttonImageOnly: true,
   beforeShowDay:unavailable
  });
});
jQuery(document).ready(function() {
  jQuery('#enddate').datepicker({
 
    minDate: new Date(2012, 0, 1),
    maxDate: '+1Y',
 
    dateFormat: 'dd-mm-yy',
    constrainInput: true,
    showOn: "button",
    buttonImage: "../images/cal1.gif",
    buttonImageOnly: true,
   beforeShowDay:unavailable
  });
});

My Blogs

Tuesday, 15 April 2014

Javascript Useful Code

No comments:

Post a Comment