Capturing ‘Lost focus’ or ‘blur’ event for div, li or other non-input elements in Jquery

I was working on ‘ul-li’ structure in which I wanted to 

1. show 2^nd li when 1^st li is focused and 
2. hide it when 1^st lose focus. 

I tried with ‘focus’ and ‘blur’ events, but ‘blur’ event was not being called for li element. Searching for answer on internet, I came to know that blur or lost focus event is fired when it’s an input element!

So I went for a work around that uses ‘mouseenter’ and ‘mouseleave’ events for ‘focus’ and ‘blur’ events respectively. This events can be used for ‘li’, ‘a’ as well as ‘div’ elements. IE7, 8, 9, Chrome and Firefox support these events. Below is the code that I have used.

$("#myFirstLiElement").mouseenter(function () {
              $("#mySecondLiElement").show();
       }).mouseleave(function () {      
              $("#mySecondLiElement").hide();
 });

Solution for JQuery dialogs being cached when loading partial views

Yesterday, I was working on Jquery dialog that provides an application form to edit user details.

The issue I was facing was, when I posted updated form and reopened it, it was still showing the previous details. When I checked database, the updated details were present!

This was happening with IE versions. Chrome and Firefox were able to show me updated data on form.

Below is the Jquery code that I was using to render a partial view in a dialog box.

var requestUrl = "/MyAction/PartialViewResult/";

$.get(requestUrl, function(){
$("#dialog-edit-profile").dialog({
        title: "Edit Profile",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });
        $('# dialog-edit-profile).dialog("open");
});

I looked at the code and was confused why IE is behaving strange when code is syntactically correct. 

I went for solution search on internet and found a fact that default behavior of IE is to cache the Jquery dialog content!

Considering this fact, I rewrite my code so that each request for dialog will be a new request. The solution was pretty simple, i.e. to make an ajax call with “cache: false” property.

var requestUrl = "/MyAction/PartialViewResult/";

$.ajax({
              url: requestUrl,
              cache: false,   
              success: function(result) {
                   $("#dialog-edit-profile").dialog({
                      title: "Edit Profile",
                      autoOpen: false,
                      height: 300,
                      width: 500,
                      modal: true
                  });

                  $('# dialog-edit-profile).dialog("open");
              }
});

Post this fix, I tested it on IE  7,8,9 as well as Chrome and Firefox and all were rendering dialog correctly!

Prevent iframe white flash issue while loading

I had a link on my website. I had written a click event for link to load iframe. But every time I was clicking the link, iframe was taking time to load and thus displaying white flash.

I tried to get help from internet, found many solutions with css and javascript, but they were either complex to implement or unable to solve this problem.

I wonder why I didn't try anything with JQuery and when I tried, the issue was solved!
Below is the logic that I followed:

To explain the solution let's take below as my link and iframe ids.
my link id: dwnloadDoc
my iframe id: myiframe

Step1: Write iframe load event in jquery as given below.

$('#myiframe').load(function(){
$(this).show();
});

Step2: Hide iframe on link click

$('#dwnloadDoc').click(function(){

$('#myiframe').hide();

//link click logic

});

How It worked:

When I will click the link, my iframe will get hidden. I  will bring data from server and will load it in iframe.

My iframe load event will get called after iframe is loaded which will show the iframe.

That means iframe will be hidden in its loading period, avoiding white flash.

Links for learning JQuery

Hi...found some good links that will be helpful to learn JQuery and also to improve it. Please have a look at them...

1. http://jqueryui.com
2. http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
3. http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

jquery parseInt() without radix may cause a problem!

Background: The parseInt() function parses a string and returns an integer.

Syntax: parseInt(string, radix) 

Parameter	Description
string	Required. The string to be parsed
radix	Optional. A number (from 2 to 36) that represents the numeral system to be used

Problem:

Radix parameter becomes important if your string input starts with 0 or 0x.

If you are using parseInt("010") and expecting output as 10, then you are wrong!

Because, parseInt at back end will consider any number starting with 0 as octal number so the output of "010" will be 8! Similarly any number starting with 0x will be considered as hex number, e.g. parseInt("0x10") will result to 16!

Solution:

If you want to get decimal number always then use radix parameter.

So, parseInt("010",10) will tell parseInt to consider "010" as decimal so as to give output as 10.

Similarly you may use radix as 8 and 16 if you want octal and hex result respectively.

Solution to avoid binding Events Multiple times to a particular control using jquery

Background: 

I created a Popup which is populated when I click a link.Popup has a button to which I have bound a click event that open a new window. I am doing everything using jquery.

Scenario:

1. I open Popup 1st time,When I click button a new window gets opened.
2. I close and reopen popup(this is 2nd time), now I click button. At this time two window gets opened.
3. I close and reopen popup(this is 3rd time), now I click button. At this time three window gets opened.

What went wrong:

My code to open popup was correct but what I did wrongly was a minor but a serious mistake.

I wrote a code of binding event to button, inside the function and I was calling it each time I open a popup!

So, basically each time my function was getting called it was binding event to button. That means, button was getting bound multiple times with the same event!

Solution I applied:

To handle this case, I moved my event bind function call to the document.ready function.

That means, each time my button will get rendered, I will bind event as on each rendering  button will not retain previous binding.