Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

October 30, 2017

Adding google map to Java Server Page to show the location of your business

Adding google map with markers in to website

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
        <title>Branch Details</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="../CSS/branchForm.css"/>
        <link href="CSS/jquery-ui.css" rel="stylesheet">
        <script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
        <link href="CSS/style.css" rel="stylesheet">
     
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

    </head>
    <body> 
        <form action="" class="register">
        <!--
            <h1>Branch Registration</h1>
            <fieldset class="row1">
                <legend>Account Details
                </legend>
                <p>
                    <label>Category
                    </label>
                    <input type="text"/>
                    <label>Firm Code
                    </label>
                    <input type="text"/>
                </p>
                <p>
                    <label>Name
                    </label>
                    <input type="text"/>
                    <label>Constituency
                    </label>
                    <input type="text"/>
                    <label class="obinfo">* mandatory fields
                    </label>
                </p>
            </fieldset>
             -->
            <fieldset class="row2">
           
                <legend>Branch Details
                </legend>
             
                <p>
                    <label>Name
                    </label>
                    <input type="text"/>
                </p>
             
                <p>
                    <label>Firm Code
                    </label>
                    <input type="text"/>
                </p>
             
                <p>
                    <label>Category
                    </label>
                    <input type="text"/>
                </p>
           
             
                <p>
                    <label>Constituency
                    </label>
                    <input type="text"/>
               
                </p>
             
                <p>
                    <label>Address *
                    </label>
                    <input type="text" class="long"/>
                </p>
                <p>
                    <label>Location *
                    </label>
                    <input type="text" id="pac-Input" placeholder ="Enter your location"  />
                </p>

                <p>
                    <label>City *
                    </label>
                    <input type="text" class="long" id="cityTxt"/>
                </p>
                <!--
                <p>
                    <label>Country *
                    </label>
                    <select>
                        <option>
                        </option>
                        <option value="1">United States
                        </option>
                    </select>
                </p>
                -->
                <p>
                    <label>Inauguration Date *
                    </label>
                    <input type="text" maxlength="10" id="datepicker"/>
                </p>
                 <p>
                    <label>Lat *
                    </label>
                    <input type="text" maxlength="2" id="latBox" />
                    </p>
                    <p>
                    <label>Lon *
                    </label>
                    <input type="text" maxlength="2" id="lngBox" />
                </p>
             
                <p>
                    <label class="optional">Website
                    </label>
                    <input class="long" type="text" value="http://"/>

                </p>
            </fieldset>
            <fieldset class="row3">
                <legend>Branch Location
                </legend>
                <!--
                <p>
                    <label>Gender *</label>
                    <input type="radio" value="radio"/>
                    <label class="gender">Male</label>
                    <input type="radio" value="radio"/>
                    <label class="gender">Female</label>
                </p>
             
                -->
                  <!--
                <p>
                    <label>Inaugration date
                    </label>
                    <select class="date">
                        <option value="1">01
                        </option>
                        <option value="2">02
                        </option>
                        <option value="3">03
                        </option>
                        <option value="4">04
                        </option>
                        <option value="5">05
                        </option>
                        <option value="6">06
                        </option>
                        <option value="7">07
                        </option>
                        <option value="8">08
                        </option>
                        <option value="9">09
                        </option>
                        <option value="10">10
                        </option>
                        <option value="11">11
                        </option>
                        <option value="12">12
                        </option>
                        <option value="13">13
                        </option>
                        <option value="14">14
                        </option>
                        <option value="15">15
                        </option>
                        <option value="16">16
                        </option>
                        <option value="17">17
                        </option>
                        <option value="18">18
                        </option>
                        <option value="19">19
                        </option>
                        <option value="20">20
                        </option>
                        <option value="21">21
                        </option>
                        <option value="22">22
                        </option>
                        <option value="23">23
                        </option>
                        <option value="24">24
                        </option>
                        <option value="25">25
                        </option>
                        <option value="26">26
                        </option>
                        <option value="27">27
                        </option>
                        <option value="28">28
                        </option>
                        <option value="29">29
                        </option>
                        <option value="30">30
                        </option>
                        <option value="31">31
                        </option>
                    </select>
                    <select>
                        <option value="1">January
                        </option>
                        <option value="2">February
                        </option>
                        <option value="3">March
                        </option>
                        <option value="4">April
                        </option>
                        <option value="5">May
                        </option>
                        <option value="6">June
                        </option>
                        <option value="7">July
                        </option>
                        <option value="8">August
                        </option>
                        <option value="9">September
                        </option>
                        <option value="10">October
                        </option>
                        <option value="11">November
                        </option>
                        <option value="12">December
                        </option>
                    </select>
                 
                    <input class="year" type="text" size="4" maxlength="4"/>e.g 1976
                </p>
             
           
                <p>
                    <label>Nationality *
                    </label>
                    <select>
                        <option value="0">
                        </option>
                        <option value="1">United States
                        </option>
                    </select>
                </p>
               
                <p>
                    <label>Children *
                    </label>
                    <input type="checkbox" value="" />
                </p>
             
                <img src="../IMAGES/googleMap.jpg" style="width:398px;height:209px;">
                -->
                <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
       
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 11.253069, lng: 75.78281},
          zoom: 12
        });
       
        var marker = new google.maps.Marker({
        position: {lat: 11.253069, lng: 75.78281},
        map: map,
        title: 'Triveni location',
        draggable: true
          });
       
        var locationInput = document.getElementById('pac-Input');
       
        google.maps.event.addListener(marker, 'dragend', function (event) {
        document.getElementById("latBox").value = this.getPosition().lat();
        document.getElementById("lngBox").value = this.getPosition().lng();
        //document.getElementById("cityTxt").value = locationInput;
        });
       
        var autocomplete = new google.maps.places.Autocomplete(locationInput);
        autocomplete.bindTo('bounds', map);
       
        var infowindow = new google.maps.InfoWindow();
       
          autocomplete.addListener('place_changed', function() {
          alert(" autocomplete add listener ");
         
            infowindow.close();
            //marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              window.alert("Autocomplete's returned place contains no geometry");
              return;
            }
         
        var address = '';
            if (place.address_components) {
              address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
         
        });
       
       
          //});
        /*
        var input = document.getElementById('pacInput');
          var searchBox = new google.maps.places.SearchBox(input);
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
         
          searchBox.addListener('places_changed', function() {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
              return;
            }
        */
       
      }
    </script>
   
                <!--
                <div class="infobox"><h4>Helpful Information</h4>
                    <p>Here comes some explaining text, sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                </div>
                -->
            </fieldset>
            <fieldset class="row4">
                <legend> blah blah blah...
                </legend>
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>*  Is the <a href="#">unit currently working</a></label>
                </p>
                <!--
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>I want to receive personalized offers by your site</label>
                </p>
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>Allow partners to send me personalized offers and related services</label>
                </p>
                -->
            </fieldset>
            <div><button class="button">Register &raquo;</button></div>
        </form>
    </body>
</html>


How to enable database cache in my java application

https://stackoverflow.com/questions/47004240/how-to-enable-database-cache-in-my-java-application


March 07, 2017

sample web application using ajax jquery - spring mvc


sample web application


JSP page

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/branches.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/branches.js" ></script>
</head>
<body>
<h1>listing</h1>
<div id="branchListDiv">
</div>
</body>
</html>

css page(css/branches.css)

table{
    
    border: 1px solid black;
    
}

js page(js/branches.js)


$(document).ready(function() {
var branches = ["Regional Office", "tsm nadakkavu", "zonal office"];
                        $('#branchListDiv').html('<div class="branch"><table width="400" height="80"><tr><th>TRIVENI SUPER MARKET NADAPURAM</th></tr><tr><td>NEAR BUSSTAND</td><td>400sqft</td><td rowspan="3">img</td></tr><tr><td>NADAPURAM POST</td><td>3000rent</td></tr><tr><td>PH:2345698</td></tr></table></div>');
                });



http://javabelazy.blogspot.in/

April 21, 2015

To call spring controller from ajax jquery in java spring

Ajax Jquery call to java spring controller


Description : The program will helps you to call java spring controller  from ajax jquery. To know spring configuration please refer this link. The link shows a  Hello world Model View Controller java spring example.

index.jsp


jquery api needed

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqueryApps.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

These jquery api should be paste in your WEB-INF folder.


jqueryApps.js


function callJavaSpringController(){
var jqueryData = 'java spring mvc';
alert(senderEmail);

 $.ajax({
       type: "GET",
       url: "callcontroller.html",
       data: { message : jqueryData }
     }).done(function( msg ) {
       alert( "Data Saved: " + msg );
     });
}


JavaSpringSampleController.java


/**
JavaSpringSampleController  class
*/
package net.cfed.oms.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.cfed.oms.model.SendMailModel;
import net.cfed.oms.service.EmployeeService;
import net.cfed.oms.serviceImpl.EmployeeServiceImpl;

import org.apache.catalina.connector.Request;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author free source codes
 *
 */
@Controller
public class JavaSpringSampleController {

@RequestMapping("/callcontroller")
public ModelAndView helloWorld(HttpServletRequest request, HttpServletResponse response) {

String message = "Welcome  to";
                message = message + request.getParameter("message");
System.out.println(message);
return new ModelAndView("index", "message", message);
}
}


Here is a sample for ajax jquery call to servlet , click on the link

http://javabelazy.blogspot.in/

August 17, 2014

Create a Digital clock in java script

java script example for how to use timer

Description : the program will help you to understand the working of timer and animation in html using javascript



<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);

document.getElementById('clock').date=d;
var d= new Date();
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()" />
<input type="text" id="txt" />
<input type="text"  id="clock"/>
</form>
</body>

</html>



Java script animation example


<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="asiangames.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="olympics.gif";
}
</script>
</head>

<body>
<a href="
http://javabelazy.blogspot.in/" target="_blank">
<img border="0" alt="Java best blog" src="asiangames.gif" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>


http://javabelazy.blogspot.in/

June 05, 2014

Multiple Marker on Google Map

Google Map to view multiple marker example


Description :How to add google map to your java application: To view multiple markers on same google map. while clicking on the marker, the details of that branch will be shown in a separate div. The website can be useful for large business firms to show their branches. The first 3 line of code is of java spring ( No need of it for google map). Here we use simple google map marker instead of complex one.

the css for the html page is shown below (javasourcecode.css)

You can see a combo box on the google map, currently that feature won t work, working code for that will be updated shortly. The location details can be added through json object, using jquery and ajax will smooth-en your code.

Java Google Map multiple marker apps
Google map with multiple marker

jquery google map maker in java web application


<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title> Who will be the winner of football world cup 2014 </title>
      <link href="css/javasourcecode.css" rel="stylesheet" type="text/css" />

  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="js/units.js"></script>
<script>


function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(1.319154,5.918564)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, beaches);
}
var infowindow = new google.maps.InfoWindow({
    maxWidth: 160
  });
// get javascript object here pass it to beach
//var triveniUnits = getUnits();
//alert(' Winner : '+triveniUnits.length);
var beaches = [
  ['Brazil', 1.253069,5.78281,'images/worldcup.png',4],
  ['Argentina', 1.291158,75.74415,'images/worldcup.png',5],
  ['Belgium', 1.273474,5.774783,'images/worldcup.png',3],
  ['Spain', 1.294241,5.815177,'images/worldcup.png',2],
  ['England ', 1.305014,5.876385,'images/worldcup.png',1]
];

function setMarkers(map, locations) {
  var markers = new Array();
  var marker;
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
title: beach[0],
        //zIndex: beach[3]
    });
        markers.push(marker);
     
google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
            //var infoWinwhtml = '<div id="infowindow" style="width:320px; height:200px;" ><H4>'+locations[i][0]+'</H4></br><p><img src="'+locations[i][3]+'" alt="World cup football 2014"></p></div>';
             //infowindow.setContent(locations[i][0]);
             var infoWinwhtml = '<div id="infowindow"><H4>'+locations[i][0]+'</H4></div>';
             infowindow.setContent(infoWinwhtml);
             var infoHtml = '<div  class="triveniInfo"><H4>'+locations[i][0]+'</H4></br><p><img src="'+locations[i][3]+'" alt="Triveni Image"><h6> Distance : 200km </h6></p></div>';
              marker.setAnimation(google.maps.Animation.BOUNCE);
              infowindow.open(map, marker);
              var sidediv = document.getElementById('content-window');
              sidediv.innerHTML = infoHtml;
            }
          })(marker, i));
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
  <div id="headerId" class="header">
<div id="logo" class="logos"><img src="images/worldcupLogo.jpg" alt="cfed Logo"></div>
<h1> How to integrate Google map features in java spring source code</h1>
<div id="menuTabsId" class="menuTabs"><a href="worldcupEvents.html"> event</a><a href="worldcupmap.html"> view map </a></div>

</div>
  <div id="panel">
  <b>Select: </b>
    <select id="worldcup football" onchange="calcRoute();">
      <option value="worldcup">Belgium</option>
      <option value="st louis, mo">Germany</option>
      <option value="joplin, mo">Spain</option>
      <option value="oklahoma city, ok">England</option>
      <option value="amarillo, tx">Brazil</option>
</select>
  </div>
    <div id="map-canvas" style="width:80%; height:80%; float:left"></div>
    <div id="content-window" style="width:20%; height:80%; float:left"></div>

  <div id="footerId" class="footer">
http://nikzblog/</div>
  </body>
</html>

javasourcecode.css


/*External Cascading style sheet for the above html code*/


/* Google map css */

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
}

#panel {
        position: absolute;
        top: 120px;
        left: 20%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
}


/* Developed by shimjith kumar */
+Shimjith Kumar 

.logos{
    float: left;
}

.header{
    height:100px; 
    background-color: #EEEEEE;
}

.header h1{
    margin-bottom: 0;
    text-align: center;
}

.footer{
      background-color: #FFA500;
    height: 2%;
    clear: both;
    text-align: center;
}


.menuTabs{
    position:relative;
    top:0px;
    width:80px;
    height:20px;
    float:right;  
}


/*  external css design in java application */
.triveniInfo h4{
    text-align: center;
}
.triveniInfo p{
    text-align: center;
}

/* google map info window css design */
#infowindow h4{
    text-align: center;
}
#infowindow p{
    text-align: center;
}

Thanks for reading the code, Please provide your feedback through comments

author : +Shimjith


http://javabelazy.blogspot.in/

May 02, 2014

show and hide a div in java web application using jquery

The Example for show and hide a div in java jquery (java server page) web applicaion. Event triggering in java web application using jquery


The program will show and hide the content div, on user selecting a particular menu. Here i used only one jsp page where all the div presents. This web application demonstrate a simple jquery.hide() and jquery.show() method. JQuery is powerful API that provides triggering of event


index page : index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jquery trigger event in java web application</title>
</head>
<body>
<jsp:forward page="/jsp/home.jsp"></jsp:forward>
</body>
</html>




Insert title here




The index page just redirect to request to home page (ie,home.jsp)
here i used JSP tags to forward the request

The above example shows the working of JSP tags

home page : home.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Java web application example </title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(){
  $("#mail").click(function(){
    $("#smsDiv").hide();
    $("#monitorDiv").hide();
    $("#adminDiv").hide();
    $("#mailDiv").show();
  });
  $("#sms").click(function(){
   $("#mailDiv").hide();
   $("#monitorDiv").hide();
   $("#adminDiv").hide();
   $("#smsDiv").show();
  });
  $("#monitor").click(function(){
   $("#mailDiv").hide();
   $("#smsDiv").hide();
   $("#adminDiv").hide();
   $("#monitorDiv").show();
});
  $("#admin").click(function(){
   $("#mailDiv").hide();
   $("#smsDiv").hide();
   $("#monitorDiv").hide();
   $("#adminDiv").show();
});
});
</script>

</head>
<body>
<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b> <input type="button" name="smsBtn"  value="sendsms" id="sms"> </b><br>
<b> <input type="button" name="mailBtn" value="sendmail" id="mail"> </b><br>
<b> <input type="button" name="mntrBtn" value="monitor" id="monitor"> </b><br>
<b> <input type="button" name="adminBtn" value="admin" id="admin"> </b>
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
<div id="smsDiv"> This is sms div</div>
<div id="mailDiv"> this is mail div </div>
<div id="monitorDiv"> This is monitoring div </div>
<div id="adminDiv"> This is admin div </div>
</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
http://javabelazy.blogspot.in/</div>

</div>
</body>
</html>
---------------------------------------------------------




deployment descriptor : web.xml file

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>Java jquery web applicaion</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>worldcupfootball.html</welcome-file>
     <welcome-file>brazil.htm</welcome-file>
  </welcome-file-list>
</web-app>







you need to download jquery file : jquery-1.11.0.js and paste it js folder

jquery plugins


structure of web applicaion
web application file structure
web application file struture

This example let you to know how to use jquery inside a java web application.

+Vipin Raj

http://belazy.blog.com/

February 15, 2014

Image slidder using javascript


Created an image slidder in java web using java script

+bithesh soubhagya


This is a small example in javascript that helps you images in specific intervals as like jquery slidder. The code is simple to understand.


The html page (copy paste this code and save as .html file)
place the images in images folder(rename the image files either in your code or the images you are placing)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Image slidder using javascript </title>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.min.js"></script>


<script>

var images = [
              'images/1.jpg',
              'images/2.jpg',
              'images/3.jpg',
              'images/4.jpg',
              'images/5.jpg',
              'images/6.jpg',
             
          ];
         
    
for(var i=0;i<=3;i++)
{
    var myVar=setInterval(function(){myTimer()},1000);
}

var j=0;

function myTimer()
{
    document.getElementById("mahashi").innerHTML ="";
    //adding image to div using javascript
    var elem = document.createElement("img"); // create a elem variable for tag <img>
    elem.setAttribute("src", images[j]);      // setting img attribute to elem variable
    elem.setAttribute("alt", "Flower"+j);
    document.getElementById("slider").appendChild(elem);
    $("img").fadeIn();  // animation for img tag
    j = j+1;
    if(j>5){
        j=0;
    }
}

</script>

</head>
<body>
<h1> HTML java script example for image slidding </h1>

<div id="mahashi">

</div>

</body>
</html>

You can download the latest version of jquery plugin from here


http://belazy.blog.com/

October 11, 2012

check or uncheck a html checkbox using jquery

How to check or uncheck a html checkbox using jquery.

How to select or choose a checkbox?

$('input:checkbox[value=Barcelona]').attr('checked',true);

The above code will check/choose/select a html checkbox whose value is hello, you can even choose name instead of value

$('input:checkbox[name=premierleague]').attr('checked',true);

to uncheck use the below code

$('input:checkbox[value=realMandrid]').attr('checked',false);

This is a small example for AJAX jquery checkbox example, please try it ....

http://belazy.blog.com/  +joseph james 

August 21, 2012

To call external css class using jquery

How to call an external css class using jquery.

There are two ways to apply css through jquery

addClass("your css class name");

addClass will only append the new class to the existing one. so we have to remove the existing class using removeClass(" your css class name") method.

removeClass() is used to remove all the css class.

css() is used to apply style to a specific html component.

How to ?

html : file.html
<p id="powerballNumbers"> Hunger Games, Newsweek, </p>
<div id ="RioDeJaneiro" class ="McllroyClass"></div>

jquery : file.js
$("#powerballNumbers").css({"background":"yellow"});
$("#RioDeJaneiro").removeClass("McllroyClass").addClass("rihana");

css: file.css
.rihana
{
width : 10px;
height : 5 px;
backgroud : url (img_mileycyrus.gif) 0 0;
}

How to create a web application with jquery :  a simple web application

http://belazy.blog.com/

August 09, 2012

ajax jquery call to servlet example

How to call a servlet using jquery ajax

Description : This is a small example to call servlet using ajax jquery. also shows servlet mapping in web.xml file (Deployment descriptor) .How to use external javascript file in java[ajax servlet Tutorial].








web.xml

<servlet>
    <description></description>
    <display-name>AjaxServlet</display-name>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>servlets.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/AjaxServlet</url-pattern>
  </servlet-mapping>

 <welcome-file>index.jsp</welcome-file>


index.jsp

jquery api needed

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="myJquery.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<div>
<input type="text" id="headText">
<input type="button" id="newButton" value="sendData">
</div>



servlet : AjaxServlet.java

public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(" inside do post "+request.getParameter("message"));
    }

}

jquery file : myjquery.js

$(document).ready(function(){
  $('#newButton').click(function(){
           sendData();
    });
   });
function sendData(){
   var mge = $('#newText').val();
    alert(mge);
    $.ajax({
        type: "POST",
        url: "AjaxServlet",
        data: { message : mge  }
      }).done(function( msg ) {
        alert( "Data Saved: " + msg );
      });
}

Description : The Example show how to call a servlet from jsp using ajax jquery. Data from jsp page will pass to servlet as parameter through ajax call


To receive response from the servlet, Change the code to following

In servlet

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws    ServletException, IOException {
        String message = request.getParameter("message");
         String respMess = message + "data saved ";
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(respMess);
    }

In jquey

The function sendData() will send data to post method of servlet "JqueryServlet". the data is taken from html tag whose id is " headText ". In the example i have created a text box named headtext in Index.jsp (java server page)

function sendData(){
    var mge = $('#headText').val();
   
    $.ajax({
          type: "POST",
          url: "JQueryServlets",
          data: { message : mge},
          success : function(data){
              alert('success'+data);
          }
        });
   
}



Thanking you for reading this post. Hope you will try the code...

Your feedback may help rest of the readers... so please, your valuable comments


Now take a look how cascading style sheet is applied in struts, that is a constant look and feel for all your web pages in your web application . >>> lazy java

Sunday Times 1 Bestseller New York Times 1 Bestseller the global bestseller - Origin is the latest Robert Langdon novel from the author of the Da Vinci Code. 'Fans will not be disappointed' the Times Robert Langdon, Harvard professor of symbology and religious iconology, arrives at the Guggenheim Museum Bilbao to attend the unveiling of an astonishing scientific breakthrough. The evening’s host is billionaire Edmond Kirsch, a futurist whose dazzling high-tech inventions and audacious predictions have made him a controversial figure around the world. But Langdon and several hundred guests are left reeling when the meticulously orchestrated evening is suddenly blown apart. There is a real danger that Kirsch’s precious discovery may be lost in the ensuing chaos. With his life under threat, Langdon is forced into a desperate bid to escape Bilbao, taking with him the museum’s director, Ambra Vidal. Together they flee to Barcelona on a perilous quest to locate a cryptic password that will unlock Kirsch’s secret. To evade a devious enemy who is one step ahead of them at every turn, Langdon and Vidal must navigate the labyrinthine passageways of extreme religion and hidden history. On a trail marked only by enigmatic symbols and elusive modern art, Langdon and Vidal will come face-to-face with a breathtaking truth that has remained buried – until now. ‘Dan Brown is the master of the intellectual cliffhanger’ Wall Street Journal ‘As engaging a hero as you could wish for’ Mail on Sunday ‘For anyone who wants more brain-food than thrillers normally provide’ Sunday Times

By Now Hurry- origin by dan brown


Author : +belazy

April 16, 2012

DHTMLX Tool for java Developers

DHTMLX


DHTMLX is a JavaScript library that provides essential functionality for building cross-browser, Ajax-based user interfaces. Develop impressive web applications faster with a set of ready-to-use UI widgets. 

Download and use  : http://dhtmlx.com/


Thanking you.....

February 06, 2012

How to add a image on java button on mouse over

Setting Icon for button that changes on mouse over  



       ImageIcon icon = new ImageIcon("javacode/image.gif");
            ImageIcon iconOver = new ImageIcon("javacode/image_over.gif");
            btn = new JButton(icon);
            btn.setBackground(Color.white);
            btn.setRolloverIcon(iconOver);
            btn.setBorder(null);
            //btn.setToolTipText("java blog belazy");

This code will show you how to put image on button in java which change on mouse over .
//



java source codes

Facebook comments