jquery‎ > ‎

jquery2

FAQ
Think of the questions your customers ask most frequently and write them here along with the answers.



A: I came across this problem several time. So trying to list down some of the approaches.

Option 1: Using JavaScript

This method is useful when dynamic content is static. For example in case of country state.  This is just a script include.

Step 1: Create HTML Page.


<!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>
</head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
//On trigger of change event of country select call populateState function
$(document).ready(function(){
    $('#country').change(populateState);
});
//populateState
//For dummy country there is no state
function populateState(){
    var index = document.countrySelect.country.selectedIndex;
    var country = document.countrySelect.country.options[index].value;
    if(country=='dummy'){
        $('#state').hide();
        $('#no_State').show();
    }
    else{
        $('#no_State').hide();
        $.getScript(country.toLowerCase()+".js",function(){
            populate(document.countrySelect.state);
            $('#state').show();
        });
    }
}
//Make sure that appropriate state is selected if country is already selected on //page load
$(window).load(populateState);
</script>
<body>
<form action="" id="countrySelect" name="countrySelect">
<table>
<tr>
<td>Country:</td>
<td>
<select id="country" name="country">
<option value="dummy">Select</option>
<option value="in">india</option>
<option value="us">us</option>
</select>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<div id="state">
<select name="state" id="state"> 
<option value="">States .... </option>
</select>
</div>
<div id="no_State">
No State for this country .....
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Above code is self explanatory. 

Step 2: Create associate .js file. For example in.js

function populate(form)
{
form.options.length = 0;
form.options[0] = new Option("Select State","");
form.options[1] = new Option("MH","MAHARASTRA");
form.options[2] = new Option("GJ","GUJRAT");
}

Option 2: Using AJAX

Step1: Write Client side Code

<!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>
</head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
//On trigger of change event of country select call populateState function
$(document).ready(function(){
    $('#country').change(populateState);
});
//populateState
//For dummy country therre is no state
function populateState(){
    var index = document.countrySelect.country.selectedIndex;
    var country = document.countrySelect.country.options[index].value;
    $.ajax({
        url : "getState.jsp",
        data : "country="+country,
        method : "POST",
        beforeSend:function(){
        //alert('I waana do something before send');
        },
        ajaxSend:function(){
        //alert('before request run');
        },
        complete:function(){
        //alert('cmplete');
        },
       //call Populate function if there is a response.
        success:function(response){
        populate(response);
        },
        //In case of error show error
        error:function(){
        alert('error');
        }
        });

}
 function populate(response){
        $('#no_State').hide();
        $('#state').show();
        $('select#stateSelect').html(response);    
}
//Make sure that appropriate state is selected if country is already selected on page load
$(window).load(populateState);
</script>
<body>
<form action="" id="countrySelect" name="countrySelect">
<table>
<tr>
<td>Country:</td>
<td>
<select id="country" name="country">
<option value="dummy">Select</option>
<option value="in">india</option>
<option value="us">us</option>
</select>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<div id="state">
<select name="state" id="stateSelect"> 
</select>
</div>
<div id="no_State">
No State for this country .....
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Step 2: Server Side Code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>


<%@page import="java.util.SortedMap"%>
<%@page import="java.util.TreeMap"%>
<%@page import="java.util.Iterator"%>

<%
SortedMap<String,SortedMap<String,String>> countryMap = new TreeMap<String,SortedMap<String,String>>();
SortedMap<String,String> IndiastateMap = new TreeMap<String,String>();
//Can do this from Database from some other mean
IndiastateMap.put("mh","MAHARASTRA");
IndiastateMap.put("gj","GUJRAT");
countryMap.put("in",IndiastateMap);
SortedMap<String,String> USstateMap = new TreeMap<String,String>();
USstateMap.put("ca","California");
USstateMap.put("NY","New York");
countryMap.put("us",USstateMap);
String finalResponse="<option>Select State</option>";
String response = "";
String country = request.getParameter("country");
SortedMap<String,String> selectedCountryState = countryMap.get(country);
if(selectedCountryState!=null){
Iterator itr = selectedCountryState.keySet().iterator();
while(itr.hasNext()){
    Object optionValue = itr.next();
    String optionText = selectedCountryState.get(optionValue);
    response += "<option Value="+optionValue+">"+optionText+"</option>";
    
}
finalResponse+=response;
}
response.getWriter().write(finalResponse);
%>

This method is use full when drop down content is dynamic (From data base or any third party application). You can alternatively use $.get or $.post method (Though JQuery indirectly uses $.ajax for them too).

Note: This method won't be affective when you are making cross domain AJAX request. There is one more post that explains how to make cross domain AJAX request.



A:
Step 1: Create a div with loading gif

<div align="center" id="loading">
<img alt="" src="ajax-loader.gif">
</div>

Step2: Below ajax call add this code

$("#loading").bind("ajaxSend", function(){
           $(this).show();
        }).bind("ajaxComplete", function(){
           $(this).hide();
    });
Comments