Solving development problems  |  About this blog

Imagine that you have combobox for countries and you want to load all cities for chosen country in other dependable combobox.
This is the way how you can do it.

//This occurs when country combobox changes -> filling cities on country change
$('select#CountryId').change(function()
{
	url = 'http://www.someurl.com/' + $('select#CountryId').val();
	var dataToSend='CityId=' + $('select#CityId').val();
	$.ajax(
	{
		type: "POST",
		url: url,
		data: dataToSend,
		async : false,
		cache : false,
		dataType: "json",
		success:function(data)
		{
			var options = '';
			var selectedText = '';
			$.each(data, function(index, val)
			{
				var selectedString = '';
				if (val.Selected == true)
				{
					selectedText = val.Text;
					selectedString = ' selected="selected"';
				}
				options += '
' + val.Text + '

';
			});
			$('select#CityId').html(options);
		}
	});
});

<a href="javascript:void(0);">Some text</a>

<a id="myLink" href="everything-i-want-to-rewrite" title="link title">Some text</a>

And in JQuery use this:

$("#myLink").click(function(e) {
  //
  //do something
  //

  //Prevent event propagation and click
  e.preventDefault();
});

How can you center div or how can you center div inside another div?

This is a common problem.

For example, you have a paging with different number of pages and you need to center whole paging div inside parent div container.

JQuery is helpful there.

Look first at the picture (we want to center this paging control inside parent div control)

Center paging control

<div id="paging" class="jPaginate" style="padding-left: 67px; left: 0px;">
  <div class="jPag-control-back"><a class="jPag-first" style="border: 1px solid #8496ad;
    color: #000000; background-color: #ffffff;">First</a>
    <span class="jPag-sprevious">«</span></div>
  <div style="overflow: hidden; width: 410px;">
    <ul class="jPag-pages">
      <li><span class="jPag-current" style="border: 1px solid #cccccc; color: #ffffff;
        background-color: #0075ff;">1</span></li>
      <li><a style="border: 1px solid #8496ad; color: #000000;
        background-color: #ffffff;">2</a></li>
      <!--...more pages...-->
    </ul>
  </div>
  <div class="jPag-control-front" style="left: 481px;">
     <span class="jPag-snext">»</span><a class="jPag-last"
     style="border: 1px solid #8496ad; color: #000000;
     background-color: #ffffff;">Last</a></div>
</div>

$("#paging").css('left',($("#paging").width() -
  ($(".jPag-control-front").position().left +
   $(".jPag-control-front").width())) / 2);

• $(“#paging”) – finds div with id=”paging”
• $(“#paging”).css(‘left’, 50); – move left “paging” div for 50px
• $(“.jPag-control-front”).position().left – finds left distance for div element that has css class=”jPag-control-front” from the beginning of “paging” div
• So, you get the left distance of Last element (div that has css class=”jPag-control-front” ) and you add the width of Last element to this left offset and then you substract this sum from parent div width and, at the end, you divide all this by two to get the blank space you need to move you paging div from the left.