Common Programming Logic HTML,Jquery,JAVASCRIPT,MySQL: March 2013

Monday, March 18, 2013

Jquery Ajax Function Code

$.ajax({
type: "POST",
url: "Bookresponse.jsp",
data: { category:document.book.category.value,
Title:document.book.Title.value,
Author:document.book.Author.value,
Publication:document.book.Publication.value,
Edition:document.book.Edition.value,
Noofcopies:document.book.Noofcopies.value,
Volume:document.book.Volume.value,
Datepur:document.book.Datepur.value,
Price:document.book.Price.value
}
})

Place the above function inside $('#exm').on('submit', function(e) { and }.

exm is the id of the form which is to be submitted and on clicking on submit, data is submitted to Bookresponse.jsp file.
Each input element data is passed through by using form name and element name.Book is the form name and category is the input element name.

In Bookresponse.jsp file,each value is retrieved .For example,String str=request.getParameter("category");

Friday, March 15, 2013

Jquery Tooltip Animation and Buttons with JSFiddle Demo

Here is the Coding for Jquery Tooltip and buttons.Buttons will be displayed as Jquery buttons and when mouse is hovered on the buttons Jquery tooltip is displayed with slideDown effect and delay of 350 milliseconds.

$(function(){

      $("input[type=button]").button(); //This applies Jqeury buttons for input type fields of type buttons

     $("input[type=button]").tooltip(); //This applies Jquery tooltip for input type fields of type buttons
     $('.classname').tooltip({show: {
effect: "slideDown",
delay: 350
}
});   //This applies Jquery tooltip animation effects for input fields with class as classname

});

Include the above coding in <script> tag

<input type="button" value="Hover" title="You got">
    <input type="button" class="classname" value="Animation tooltip" title="Awesome Tooltip with some delay and animation">

Include the above coding in body tag

Tuesday, March 12, 2013

Jquery Tabs Example with minimum height of tabs and right alignment of a tab

The Jquery Tabs example code is shown below,Each Tab is displayed with minimum height of 400px.
            Logout tab is displayed in right side.For Logout tab,InLine CSS (style="float:right") is used for displaying in right side.When user clicks on Logout tab the page will be redirected to logout.jsp, if logout.jsp html page is available

View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home Page - Library Management</title>
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
       <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
      <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
               $(function() {
                $( "#tabs" ).tabs();
                $("#tabs").css({backgroundColor:'#ffe4e1'});
                $("#tabs").css("min-height", "400px");
            });
        </script>
    </head>
     <body>
         <div id="tabs" class="tabs" >

            <ul style="color: black;background-color: #b85c5c">
                <li ><a href="#tabs-1" style="color: #b85c5c;background-color:#ffe4e1;" >Home</a></li>
                <li ><a href="#tabs-2" style="color: #b85c5c;background-color:#ffe4e1">Create Book</a></li>
                <li style="float:right"><a onClick="location.href='logout.jsp'" style="color: #b85c5c;background-color:#ffe4e1">Log Out</a></li>
            </ul>

            <div id="tabs-1">
                <p id="intro">
                    Welcome to my Home Page of Library Management Application! This Provides effective solutions needed for a Library.Click any tab to load content from other pages.
                </p>
        </div>

          <div id="tabs-2">
                <p >
              This is the Second Tab Contents
                </p>
        </div>

    </div>

    </body>
</html>

View Demo in JSFiddle ,
copy and paste this url in your browser http://jsfiddle.net/6uqM8/