Nov 26

In many web site we have seen that on selecting country,
state or city list is updated.
In this article i am showing how to update children select list on changing parent list.
To do this i am using jquery and ruby on rails.although it will works for almost all languages
For this article, I am updating city list on changing states.
So one state has many cities,and city belongs to state.

<html>
 <head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
   $("#states").live("change",function(){
     state_id = $("#states").val();
     $.ajax({
       type: "GET",
       url: "/city_list.xxx",
        /*or any server side url which generate citylist for rails
                 "/states/city_list"or<%= city_list_states_path%> */
      data: "state_id="+state_id,
       /*here we are passing state_id to server based on that on
             he can find out  all the city related to that states */
     success: function(html){
      /*html content response of city_list.xxx */
     $("#city_list").html(html);
      }
    });
   });
 </script>
</head>
<body>
 <div id="state_list">
   <select id="states">
     <option>a</option>
     <option>b</option>
   </select>
 </div>
 <div id="city_list">
   <select id="cities">
   <option value="1">aa</option>
   <option value="2">aaa</option>
 </select>
 </div>
 </body>
</html>


and city_list.xxx gives following html
on processing state id which we have pass as state_id

<select id="cities">
  <option value="3">bb</option>
  <option value="4">bbb</option>
</select>

I have updated source code http://github.com/amardaxini/Ajax-Demo

Nov 13

In many website we have seen that on checked or unchecked one box

all the check box are checked or unchecked.

Now in this article i am showing how to checked unchecked all the check box

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     	$("#check_all").live("click",function(event)
	    {
		    if($("#check_all").hasClass('not_checked'))
		    {
			    $("#check_all").removeClass('not_checked');
			    $(".check-box").attr('checked',true);
		    }
		    else
		    {
			    $("#check_all").addClass('not_checked');
			    $(".check-box").attr('checked',false);
		    }
	  });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>Select/Deselect</td>
        <td><input type="checkbox" class="check-box not_checked" id="check_all"></td>
      </tr>
      <tr>
        <td>First</td>
        <td><input type="checkbox" class="check-box" id="check_box2"></td>
      </tr>
      <tr>
        <td>Second</td>
        <td><input type="checkbox" class="check-box" id="check_box3"></td>
       </tr>
       <tr>
         <td>Third</td>
         <td><input type="checkbox" class="check-box" id="check_box4"></td>
      </tr>
    </table>
  </body>
</html>

In this setting checked attribute true/false alternatively by clicking on
select/deselect for alternate removing and adding class
not_checked depending upon that we are setting true and false

Tagged with:
Aug 31

We can include another html page using jquery load method

example is as shown below

<html xmlns="http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Loading an Html page</title> 
      <script src="jquery.js" type="text/javascript"></script> 
      $(document).ready(function() { 
        $('#loadpage').load('load.html or any server side page'); 
    });
</head> 
<body> 
   <div id="loadpage" ></div> 
</body> 
</html>
Tagged with:
preload preload preload