Showing posts with label ajax. Show all posts

AJAX Example code showing XML response in a DIV tag

Here is the example code which demonstrates how we can show the response from a XML file to the DIV tag.

Contents of MyPage.html are like below.

Using responseText with innerHTML

Notice the line in Javascript.

document.getElementById("results").innerHTML = xmlHttp.responseText;

This is doing all the magic for you.

Contents of reponse.xml

My Name	Location	Age
John	NH	20
Peter	CA	25
Hary	NC	33

Keep both the files in the same directory on server and run it.

What are the status values you need to deal with when working with AJAX

The XMLHttpRequest object has few properties

onreadystatechange: The event handler that fires at every state change, typically a call to a JavaScript function.

readyState: The state of the request. The five possible values are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete.

responseText: The response from the server as a string.

responseXML: The response from the server as XML. This object can be parsed and examined as a DOM object.

status: The HTTP status code from the server (that is, 200 for OK, 404 for Not Found, and so on).

statusText: The text version of the HTTP status code (that is, OK or Not Found, and so on).

Here is a example code which demonstrates how these atributes can be used

function doSomething() {
 //..do something here, like adding parameter values etc...
 xmlHttp.open("GET", url);
 xmlHttp.onreadystatechange = callback;
 xmlHttp.send(null);
}

function callback() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
        //do you required work here
    }
  }
}

Notice the line

xmlHttp.onreadystatechange = callback;
 
in doSomething method which is assigning a value as "callback" to the onreadystatechange attribute. 
The value is name of a method which called every time readystate of XMLHttpRequest object is changed.

How to Create an Instance of the XMLHttpRequest Object - AJAX

XMLHttpRequest is backbone of AJAX framework. We have to first create an XMLHttpRequest object using JavaScript before we can use the object to send request. You can use JavaScript in a couple of ways to create an instance of XMLHttpRequest. Internet Explorer implements XMLHttpRequest as an ActiveX object, and other browsers such as Firefox, Safari, and Opera implement it as a native JavaScript object. Because of these differences, the JavaScript code must contain logic to create an instance of XMLHttpRequest using the ActiveX technique or using the native JavaScript object technique.

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

Struts 2 - AJAX Drop down Example

Struts 2 is a powerful web application development framework. Its built on top of WebWork framework and rebranded as Struts 2. Due to excessive popularity of Struts 1 its difficult to search for much relevant documentation on web about struts2. Slowly the search engines are improving on that.

In this example when you select from one drop down the other will populate accordingly. You can use it as is or play around with it based on your need

Index.jsp


    <%@ taglib prefix="s" uri="/struts-tags" %>

Listing.jsp


<%@ taglib prefix="s"  uri="/struts-tags"%>
    
     
    
     Listing
     
    
     
    
    
    
     
     
     
         onchange="javascript:show_details();return false;"  >
         id="details" href="%{d_url}"  theme="ajax"
    listenTopics="show_detail"  formId="frm_demo">

Detail.jsp


    <%@ taglib prefix="s" uri="/struts-tags"%>

DetailAction.java


    package ajaxdemo.action;
 
    import java.util.ArrayList;
    import java.util.List;
 
    import com.opensymphony.xwork2.ActionSupport;
 
    public class DetailAction extends ActionSupport {
     private String lst;
     private List lstList = null;
     private List lstList2 = null;

     public String execute() throws Exception {

     if (getLst() != null && !getLst().equals("")) {
     populateDetail(getLst());
     return SUCCESS;
     } else {
     return SUCCESS;
     }
     }

     private void populateDetail(String id) {
      lstList = new ArrayList();
      if (id.equalsIgnoreCase("Fruits")) {
      lstList.add("Apple");
      lstList.add("PineApple");
      lstList.add("Mango");
      lstList.add("Banana");
      lstList.add("Grapes");
      } else if (id.equalsIgnoreCase("Places")) {
      lstList.add("New York");
      lstList.add("Sydney");
      lstList.add("California");
      lstList.add("Switzerland");
      lstList.add("Paris");
      } else {
      lstList.add("Other 1");
      lstList.add("Other 2");
      lstList.add("Other 3");
      lstList.add("Other 4");
      lstList.add("Other 5");
      }
     }

     public List getLstList() {
      return lstList;
     }

     public void setLstList(List lstList) {
      this.lstList = lstList;
     }

     public String getLst() {
      return lst;
     }

     public void setLst(String lst) {
     this.lst= lst;
     }
    }

DetailListing.java


    package ajaxdemo.action;
 
    import com.opensymphony.xwork2.ActionSupport;
    import java.util.ArrayList;
    import java.util.List;
 
    public class ListingAction extends ActionSupport {
    private List lstList1 = null;
 
    public String execute() throws Exception {
    populateDetail();
    return SUCCESS;
    }
 
    private void populateDetail() {
    lstList1 = new ArrayList();
    lstList1.add("Fruits");
    lstList1.add("Places");
    lstList1.add("Others");
 
    }
 
    public List getLstList1() {
    return lstList1;
    }
 
    public void setLstList1(List lstList1) {
    this.lstList1 = lstList1;
    }
    }

Struts.xml


        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
    
    
    
    /listing.jsp
    
    
    /detail.jsp

web.xml


    
    
    
    struts2
    org.apache.struts2.dispatcher.FilterDispatcher
    
    
    struts2
    /*
    
    
    index.jsp

Best of Tooltips Scripts With JavaScript, Ajax & CSS

Tooltips are the easiest and coolest way to show additional information or special reference, which is often shown with mouseover or click actions…

Here We’ve Collected 30+ Tooltip Scripts vary from CSS,Ajax based, mootools and jQuery with cool Animation , which you can easily incorporate into your future designs.

Jquery Popup Bubbles

Coda Inspired Popup Bubbles

Cool Tooltips

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

jQuery Plugin: betterTip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

SuperNote

This is an accessible, CSS/JS based “popup tooltip” script that dynamically converts regular footnotes in a document into tooltips that appear next to their triggering elements.

Prototip2

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework

ToolTip_MooTools.

usies Gzip loader technique that will deliver CSS and Javascript files more faster and also with minimun HTTP

Tooltips from AJAX, DOM nodes

Boxover - Javascript/DHTML Tooltips

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript.

MooTools Tooltip

WebSnapr - Preview Bubble Javascript v2.0

The websnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr.

Help Balloon

really cool Popup Baloon

DHTM Goodies Balloon Tooltips

An alternative to the alt and title attribute. Roll your mouse over the links in the example to see how this work.

DHTM Goodies Ajax Tooltips

A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files.

Tooltip.js

Creating simple tooltips

Nice Titles

Clue tip A Jquery Plugin

The clueTip plug-in allows you to easily set a link to show a “tooltip” of sorts when the user’s mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip.

Mobile Tooltip widget

A mod version of the tooltip widget for GWT which supports mouse movement event.

jQuery Input HintBox

An easy to use hint box script for forms using Jquery

Form Field Hints with CSS and Html

This Script shows up hint for the currently focused input

Jtip a jquery tool tip

A tool-tip solution with little more flexibility and customization now

Easiest Tooltip and Image Preview Using jQuery

Hovertips

Advanced Tooltips

Add advanced tooltips for people on your photo

Bubble Tooltips

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

Fading Tooltips - Nice, Lightweight JavaScript Tooltip

Cool DHTM ToolTip II

Css ToolTIp

Tipster Demo

Customize anything and have advanced HTML formatting

JavaScript, DHTML Tooltip

An easy to use cross-browser Tooltip JavaScript Library that creates tooltips,

Popup Baloon

The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips (AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website