Sharing Info...

Solution for Jquery click event not working on iPad

2013-03-20T09:56:00.000+05:30

iPad has a different behavior for non-anchor elements click event.
It recognizes their first click event as hover. Thus though you have a working click event code, it will look like failing on iPad and it will take your day to find out the solution :)

The solution for this to work is either adding onclick="" attribute to that element or "cursor:pointer" css property.
Either of this solution will tell iPad that this element is a clickable area.

Lets check with a sample code:

So say for an example I have a div element

<div id="myDiv" class="myClass" ></div>

I have attached click event to it

$('#myDiv').live('click', onMyDivClicked);

and I have below CSS:

.myClass
{
/*some X css properties except cursor:pointer*/
}

.myClass:hover
{
/*some Y css properties along with cursor:pointer*/
}

Solution 1: Adding onclick="" to div

<div id="myDiv" class="myClass" onclick=""></div>

Solution 2: Adding "cursor:pointer" css property

Now don't get confused as you may say that I already have this css property inside my ".myClass:hover" class(which most developers follow)
But the thing is if you want to fix the iPad problem, you will have to add this property inside ".myClass" as shown below

.myClass
{
/*some X css properties along with cursor:pointer*/
}

.myClass:hover
{
/*some Y css properties along with cursor:pointer*/
}

Note: We can not point this behavior as a BUG. iPad has introduced it to support websites designed with hover effects.
Say for example, there is a website on which you have to hover to navigate to pages. For iPad there is no hover effect in reality, as user has to touch/click the element.
Thus for non-anchor elements which may require hover effects, iPad treats the first touch/click as hover.

Hope to see smile on your face after fixing this issue! :)

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

2012-11-19T09:50:00.001+05:30

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

show 2^nd li when 1^st li is focused and
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

2012-11-18T12:16:00.000+05:30

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!

Tutorial for Donut Hole Caching - Partial View Caching in MVC

2012-03-28T11:15:00.000+05:30

MVC3 has come up with a great concept of Partial page caching, also known as ‘Donut Hole Caching’ where entire donut represents your Main View and the donut hole represents partial view that you would like to cache.

Most of you might have faced the scenario of rendering HTML as a partial view. The HTML may be static or dynamic and say you are pulling it from third party or database. Now, each time going to database or third party is not feasible considering performance. So the option of caching comes into picture.

But, you may have some content on Main View you do not want to cache. So here is the approach to cache partial content of your main view.

Let me illustrate this with a simple example:

See above screenshot showing my MVC view. On high level, I have created one view i.e. ‘Index’ and a partial view i.e. ‘ChildView‘. ChildView has a content that need to be cached and it is rendered within Index view.

Basic steps of partial caching:

move content that need to be cached in a partial view
Create a child action in controller that will return partial view and attach OutputCache attribute to it.
Write Content (that is going to be cached) logic in child action
Call this child action from Main View using Html.Action

In my sample example, I created a Main View a Label with current date time. Refer below image

ViewBag.Message in this view will contain Current Date time.Also note that I have added a call to my child action using @Html.Action("ChildView").

Then I created a Child View also having a current date time as shown in below image.

ViewBag.Message in this view will contain Current Date time.

Note that you can use Html.Raw if you are returning Html content inside ViewBag.Message

Then I created two actions Index and ChildView for retuning Index View and Child View respectively.

I have attached ChildActionOnly attribute so that action will be available only for internal calls. Also to cache Child View content, I have attached OutputCache attribute with 10 seconds duration.

Now when I will hit the Index view from browser, for the first time it will internally call ChildView Action and will display Current Date Time. But within 10 seconds, if I try to re-hit the Index view, then the Current Date Time in Index view will be updated for each hit (as I have not attached OutputCache attribute to Index action) and Current Date Time on Child View will be constant for 10 seconds.

First hit screenshot(Note:Parent and Child Date times are same)

Second hit screenshot(Note:Parent and Child Date times are different and Child Date time is same as that of First hit Child Date time)

How to Regenerate Designer file in Visual Studio? Here is the solution-

2012-03-08T08:11:00.000+05:30

Missing or corrupted designer file causes Visual studio (VS) to fail the build. This is because without designer file VS is unable to find the declarations of controls. Also most of the time
controls are not added to designer.cs giving build errors.

To fix this issue, Below is the simplest solution I know:

Delete your designer file if it is corrupted else start from step2.
Go to your aspx markup (source) page and find below line of code. <%@ Page Language="C#" AutoEventWireup="false" CodeFile="SamplePage.aspx.cs" Inherits=" SamplePageClass" %>
Now change CodeFile tag to CodeBehind.
Save the file.
Rebuild your project (This will create designer file for your page)
Revert your change (Step3).

Prevent iframe white flash issue while loading

2011-11-26T13:35:00.001+05:30

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.

Understanding Boxing and Unboxing in C#

2011-11-19T20:30:00.001+05:30

Boxing is the process of converting a value type to the type object. Unboxing extracts the value type from the object. Let’s see how boxing and unboxing works.

Boxing: This is an implicit process. That means developer doesn’t need do any type casting.

See below line of code:

int boxingInteger = 123;

This will create a block on stack memory area for variable of type int.

Stack

boxingInteger

Now see below line of code:

object myObject = boxingInteger; // boxing

This is the step where boxing is occurring. When above line is executed, two things will occur at backend.

1. An object will be created on heap area that will hold value of boxingInteger.

2. Reference type myObject will get created that will point to memory area allocate in above step.
Note: It will not affect boxingInteger variable on stack. The entry on stack will be there after boxing.

Unboxing: It is reversing of boxing. But it is explicit. Developer need to do type casting explicitly. It will type case object on heap to the value type.

From above example,

int unboxingInteger = (int)myObject; // unboxing

It will convert value at my object from object type to type int and it will assign this value to variable unboxingInteger which will get created on stack area.

Stack

unboxingInteger

boxingInteger

Myth about Boxing:

Myth: Below code does boxing.

string sMyString = “Box”;

object myObject = sMyString

Truth: string is not a value type variable. It is a reference type variable. So when you are assigning sMyString to myObject, you are just copying reference. There is no value type to object type conversion is happening here.

To get depth knowledge check this:
http://www.codeguru.com/Csharp/Csharp/cs_syntax/article.php/c5883

Difference between const char p and char const p

2011-11-17T21:28:00.001+05:30

const char *p and char *const p both look similar, but are different!
const char *p -- It is a non constant pointer to constant data. That means the data to which it is pointing can never be changed.
For example,
char mychar = 'a';
const char *p = & mychar;
*p = 'b'; //not possible as value at pointer is constant i.e. 'a'

char *const p -- It is a constant pointer to non constant data. That means, this pointer points to address that is constant and thus pointer cannot point to other address.
For example,
char mychar = 'a';
char mychar2 = 'z';
const char *p = &mychar;
*p = 'b';
p = &mychar2; //not possible as you cannot change address value of pointer

What is location.search in javascript?

2011-11-12T07:31:00.001+05:30

location is an object that provides information about current url.
"search" is a property of location object that gives query portion of the url.
For example,
if url is : http://www.sample.com?id=1&qs=5
then window.location.search will return "?id=1&qs=5".
You can apply regular expression on this result to get query string parameters in javascript/jquery in case if you don't want to go with any plugin that reads these values.

Update value against the same key in hashtable using C# code

2011-11-05T18:07:00.002+05:30

There are two ways you can add data to your Hashtable as shown below:
ohashtable[Key1] = Value1;
ohashtable[Key2] = Value2;
ohashtable[Key3] = Value3;

Or like this:
ohashtable.Add(Key1, Value1);
ohashtable.Add(Key2, Value2);

ohashtable.Add(Key3, Value3);

There is a difference between these two ways.

Using Add method, you can't have update the value against existing Key. But you can, if you use the square brackets.

For example,
ohashtable.Add(Key1, Value1);
ohashtable.Add(Key1, Value2); //this will throw exception at run time

Whereas,
ohashtable[Key1] = Value1;
ohashtable[Key1] = Value2; // this will allow the entry in hashtable
It won't add a new key but will update the value against the existing key.

Difference between malloc and calloc in C

2011-11-05T17:28:00.002+05:30

Malloc and Calloc are functions provided to allocate memory at run time.Both of these functions return pointer to first block of allocated memory in success and return null in case of failure.
Though their purpose is same, there are few differences between them.

1. No. of Arguments:
Both these functions vary in number of arguments they accept.

void *malloc(size_t size);

void *calloc(size_t n, size_t size);

Malloc takes only one argument that describes size of block to be allocated in memory.
e.g. oPointer = (int *)malloc(sizeof(int) * 2); will allocate size of 4 bytes(size of int is 2 bytes).
Whereas, Calloc takes two arguments number of blocks and size of each block.
e.g. oPointer = (int *)calloc(2 ,sizeof(int)); will allocate size of 4 bytes(size of int is 2 bytes).

2. Default Initialization:
Malloc does not initialize the memory allocated whereas calloc initializes the allocated memory to default (e.g. Zero).

3. Calculation of memory reuired:
Malloc function does not calculate total memory to be allocated, the argument itself describes the total memory whereas, calloc accepts two argument and internally calculates their product to find total memory to be allocated.

Script to check error message from ajax call

2011-10-30T08:57:00.000+05:30

Ajax call captures error message/exception that are thrown on its failure. Below is the way to get that error message.

$.ajax({

type: "POST",

url: "Sample/Method",

dataType:"html",

success:function(response){

//process response object

alert("Success!!!");

error:function (xhr, ajaxOptions, thrownError){
alert(xhr.status); //get error status code

alert(thrownError); //get error message

alert(xhr.responseText); //get error details

}

});

Below is the breif description of these error terms:

xhr.status -- Use this when you have to deal with the error status code, for example session expiration.
thrownError -- Use this when you want to display/use error message as it is.
xhr.responseText -- Gives you details of error message like cause of error, source of error, etc. Helpful for coders as they come to know cause of error at early stage.

Links for learning JQuery

2011-10-27T19:02:00.001+05:30

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

Best practice for using Html Spacing

2011-10-19T08:26:00.003+05:30

I was confused with the difference between   and  . Found one good point of UI designing. So sharing with you. Please have a look.

You might have tried to add spaces between two controllers using either   or  . If you are confused with what to use, here is the difference between two:

  is the character entity reference while   is the numeric entity reference.

They are the same except for the fact that the latter does not need another lookup table to find its actual value.

So, it’s better if you use  . to improve performance!

jquery parseInt() without radix may cause a problem!

2011-09-11T08:57:00.000+05:30

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.

Difference between INT and INT(20) in mysql

2011-09-10T09:44:00.000+05:30

Most of the database coders always have confusion about the difference between INT and INT(20).

The myth is INT(20) describes the integer of size 20!
where the truth is, its not the size but the width!

Below article will make it simple to understand.

MySQL supports an extension for optionally specifying the display width of integer data types in parentheses following the base keyword for the type. For example, INT(4) specifies an INT with a display width of four digits. This optional display width may be used by applications to display integer values having a width less than the width specified for the column by left-padding them with spaces. (That is, this width is present in the metadata returned with result sets. Whether it is used or not is up to the application.)

The display width does not constrain the range of values that can be stored in the column. Nor does it prevent values wider than the column display width from being displayed correctly. For example, a column specified as SMALLINT(3) has the usual SMALLINT range of -32768 to 32767, and values outside the range permitted by three digits are displayed in full using more than three digits.

How To calculate exact width of an element from CSS

2011-09-04T12:51:00.003+05:30

Background:

When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. In actual case that element is always affected by padding, border and margin.

Example: Let's say I have set css for a div as given below:

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

Now,from width property, it is clear that div consumes 250 pixels. But are we looking at css in a correct way???

Observe other properties. Padding, border and margin all are consuming few pixels. So what is the full width of a div?

Formula:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Let's calculate it in our case:

Total element width = 250 + 10 + 10 + 5 + 5 + 10 + 10 = 300

So in actual case, div will consume 300 pixels and not 250!!!

Many of us face issues while designing user interface. One of the reason is many times we miss the fact, that we have learned just now.

Note: You can use below formula to calculate exact height of an element:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

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

2011-09-04T11:59:00.000+05:30

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:

I open Popup 1st time,When I click button a new window gets opened.
I close and reopen popup(this is 2nd time), now I click button. At this time two window gets opened.
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.