Category Archives: Jquery

How to get selected option in jquery

Posted on by

How to set a Specific option as selected

<html>
<head>
	<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
	<script>
	 $('document').ready(function(){
	   $('#btnSubmit').click(function(){
            alert($('#cboLocation').val());
            alert($('#cboLocation').find(":selected").text());
			});
		});
	</script>
</head>
<body>
<select name="cboLocation"  id="cboLocation">
  <option value="">Select Zone</option>
  <option value="South">South Chennai</option>
  <option value="North">North Chennai</option>
  <option value="East">East Chennai</option>
  <option value="West">West Chennai</option>
</select>
<input type="button" name="btnSubmit" id="btnSubmit" value="Click Me"/>
</body>
</html>

How to get Selected Item Value

 alert($('#cboLocation').val());

How to get Selected Item Text

 alert($('#cboLocation').find(":selected").text());

Jquery Dropdown Population after ajax Request

Posted on by | Leave a reply 
        url = "/property/realestate_statistics/";	
	
	lngCityId = $('#cboCityName').val();
	
        $.post(
	  url,
	  {
	   "act" 		: "GetCommonLocation",
	   "CityId" 		: lngCityId
	  },
	  function(responseText){		
	   $('#cboLocation').html(responseText);		
	   $('#cboPropertyType').html('');
  	   $('#cboPropertyType').append( new Option('Property Type',''));      			
	   $('#cboPropertyType').val('Property Type');
	  }, 
	  "html"
	);

I have a response text coming after changing city and this will be populated in second drop down
cboLocation. Now the third drop down should be repopulated based on property type at city by taking common location selected in to consideration. for that you should reset property type apart from resetting cboLocation.

To do so 

        $('#cboPropertyType').html('');
  	$('#cboPropertyType').append( new Option('Property Type',''));      			
	$('#cboPropertyType').val('Property Type');
  1. $(‘#cboPropertyType’).html(”) – To empty the Content of Drop down
  2. $(‘#cboPropertyType’).append( new Option(‘Property Type’,”)) – It should Contain only Property Type in Option so i am Appending that
  3. $(‘#cboPropertyType’).val(‘Property Type’) – It should point to only one option that exixts

Working with cookies jquery

Posted on by | Leave a reply

Create session cookie

  $.cookie('CookieName', 'Value');

Cookie that Expires in 7 days

 $.cookie('CookieName', 'Value', { expires: 7 });

Create cookie valid across entire site:

  $.cookie('CookieName', 'Value', { expires: 7, path: '/' });

Read value cookie:

 $.cookie('the_cookie'); // => "the_value"
 $.cookie('not_existing'); // => null

Delete cookie:

 // Returns true when cookie was found, false when no cookie was found...
 $.removeCookie('the_cookie');

 // Same path as when the cookie was written...
 $.removeCookie('the_cookie', { path: '/' });

Jquery Checking Hidden or Visible Status

Posted on by | Leave a reply

In jQuery, suppose you have an element of some kind that you’re hiding and showing, using .hide(), .show() or .toggle(). How do you test to see if that element is currently hidden or visible on the screen?

 // Checks for display:[none|block], ignores visible:[true|false]
 $(element).is(":visible")

You can use the “hidden” and “visible” selectors.

 $('element:hidden')
 $('element:visible')

How to Style Pagination Jquery Javascript

Posted on by | Leave a reply 
                <div class="pagination">               
                  <span class="prev"></span>
                  <span class="num" id="1">1</span> 
                  <span class="num_active" id="2">2</span> 
                  <span class="num" id="3">3</span> 
                  <span class="num" id="4">4</span> 
                  <span class="num" id="5">5</span> 
                  <span class="num" id="6">6</span> 
                  <span class="next"></span>
                 </div>

  $('.pagination span').click(function(){
	$(".pagination span").removeClass("num_active").addClass("num"); 
	$(".pagination span:first").removeClass("num").addClass('prev');
	$(".pagination span:last").removeClass("num").addClass('next');
        $(this).addClass("num_active"); 
  });

How to bind event to newly added Form Element

Posted on by | Leave a reply

Javascript Code
Please Note – this doesnt work with old version of js File


$('document').ready(function(){
$('#cboCity').live("change", function(){
alert('Hi there');
});

$('#btnChange').on("click", function(){
changeCities();
});
});

function changeCities()
{
strSelect = "<select id='cboCity' name='cboCity'><option>Chennai</option><option>Mumbai</option></select>";
$('#City').html(strSelect);
}

HTML Code

<input id="btnChange" type="button" name="btnChange" value="Change Me" /></pre>
<table>
<tbody>
<tr>
<td>
<div id="City">
<select id="cboCity" name="cboCity"><option>Chennai</option><option>Mumbai</option><option>Delhi</option><option>Kolkatta</option><option>Andrapradesh</option>
</select>

</div>
</td>
</tr>
</tbody>
</table>

How Jquery Toggle Class Works

Posted on by | Leave a reply

Toggle Class does not work by the way you think

.ClassA
{        
  color : green;
}

.ClassB
{
  color : red;
}

 $('document').ready(function(){
   $('.ClassA').on('click', function(){
      alert($(this).attr('class'));
      $(this).toggleClass('ClassB')
   }); 
 });

<div>Class A</div>
<div>Class B</div>

After the first Time ClassA is Applied When you click ClassA both ClassA and ClassB will be applied to the same tag.

The alert message will display output some thing link ClassA ClassB