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(); }); |
jquery >
