Jquery: Write Less, Do More
Uploaded by
Abbas HashmiJquery: Write Less, Do More
Uploaded by
Abbas HashmijQuery
Write less, Do more
Who uses jQuery?
Browser
Interprets and displays web files Receives response -> Parses the HTML -> DOM tree is built -> Renders the page
<html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body> </html>
DOM
A Web page is parsed into a tree of nodes called the DOM Changing the DOM programmatically changes the view DOM is declarative
var body = window.document.body; body.innerHTML = '<b>Hello <i>World</i>!</b>'; var person = body.getElementsByTagName('i')[0]; person.textContent = Abbas';
Problem Statement
I want to load data from database on web page without reloading the rest part of the page. Also I must be able to search data on the page again without refreshing page. Also I must be able to do pagination of retrieved data Both choices should be available for user
Setting up jQuery
Include jQuery on page
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
Set jQuery to run when DOM is loaded
$(document).ready(function() { //put your $ code here }
HTML page
Giving choice for Load data to some table. Its initially blank.
Load Data
Used method is post
Manipulation
Data is loaded from file through a servlet. Here the Url GetTableFile is mapped with servlet.
Selectors
Search
The event is keyup search data.
Effects
Traversing
Find some HTML and do something to it
Pagination
Core
Create page_navigation options first
CSS
Create methods next, previous and goto
Attribute
jQuery Structure
Core. Selectors. Attributes. Traversing. Manipulation. CSS. Events. Effects. Ajax.
DEMO
Thank You !
