Click event bug with the iPad when using jQuery

I am writing a web application that uses a kendo grid with a detail pane. I hooked up a click event on a table in the detail pane to navigate to another page. It worked beautifully on the desktop. I tested on the iPad, and when you clicked a row, it would immediately fire off the click event and navigate away. WTF.

This drove me nuts. I found a person that also had a click issue posting about their oddity. Slightly different for them, but the fix is the one and the same.

It turns out that on the iPad, you can bind to the touchevent event instead of the click event and the problem goes away. It also takes out the 300ms delay some complain about.

Implementation is rather easy. Instead of using .click(function….) use bind.

Put this at the top of your script section.

  var ua = navigator.userAgent,
            clickEventBindingName = (ua.match(/iPad/i)) ? "touchstart" : "click";//stupid ipad workaround

Now, in your code, you simply using this to capture the events.

  $("#YOURELEMENT").bind(clickEventBindingName,
                function () {
                    doStuff();
                }
                );

Problem solved.

 

Happy Coding.

 

How to do a smooth scroll to an element/div with jquery

I was looking for a neat way to load dynamic data and then scroll the user to it. I wanted it to look smooth as well. Quick jumps make it look too harsh, like a page refresh.

Here is a simply function you can use. Just pass an element to it, jquery wrapped.

function…..

[javascript]
     function scrollToElement(ele) {
            var position = ele.position();
            $('html, body').stop().animate({
                scrollTop: position.top
            }, 500);
        }
[/javascript]

usage.

<div id=’foo’/>

You want to scroll to foo.

scrollToElement($(‘#foo’));

that easy.

Happy Coding!

How to display a complex type/list in a Kendo UI Grid client side using a simple template

I had the need to display multiple values from a list that was attached to each row. Simply put, I had a list of Roles the user could be in for each record. I wanted to display them delimited. Turns out, not that hard.

I at first was not loving the idea of using the Telerik kendo grid. I preferred to roll my own html using javascript alone. Since this is a large team based project, I decided to use a more consistent approach and utilize the Kendo library. Painful at first, since the documentation sucks more than an industrial vacuum.

The beauty lies in the power of the template. Telerik is nice enough to let you use powerful javascript in the templates, which makes it wonderful to configure and tailor each cell to your specifications. For this post, the need was to write a pipe delimited list to the cell of all the role names.

Here is the magic. The template I created. You obviously need to tailor for your field names.

    <script id="rolesColumnTemplate" type="text/x-kendo-tmpl">    

        # for(var iRoleIndex=0;iRoleIndex< Roles.length;iRoleIndex++){ #
        # if(iRoleIndex==0){  #
        #: Roles[iRoleIndex].Name #
        # } else { #
        #: " | " + Roles[iRoleIndex].Name #
        # } } #
    </script>

You need to bind it to a column which is also easy.

  columns: [

                        {
                            field: "Roles", title: "Roles", width: "80px",
                            template: kendo.template($("#rolesColumnTemplate").html()),
                            filterable:
                                {
                                    operators: {
                                        string: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        }
                    ]

Notice how easy that was. Well, easy once you know it.  Not easy if you had to figure it out on your lonesome.

Happy Coding!

How to set specific filter options with the Kendo UI Grid in Javascript!

I spent about an hour trying to decipher the cryptic documentation that Telerik provides. It’s really difficult to use, especially with hundreds of method on one page and not even organized. Clicking each property should give access to its member properties and be navigable heirarchicaly. Well, its not.

Anyway, rant over. I was trying to limit the options for a filter on one of my columns. Seems easy enough, right? Well, I kept pasting the stupid example code in and nothing happened.

It turns out, that you can indeed set column specific filter options. Which made me happy, but you need to configure the filter options based on the data type of the column. Yeah, stupid to me. If I am including the names, which are generic across most of the types, this should have been easier.

Take note of the member property you set. See, one instance is called strings. One is called number. I love the inconsistency with the pluralization too, so fun.

So, here is an example of a string column.

 {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },

Here is an example of a number(int) column.

{
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },

Look through the docs and you will see there is a date, enums, etc. Just make sure to match that property name to the type of the column.

In case that confused you, here is a full column definition with filters.

 
  columns: [
                        {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },
                        { field: "EntityName", title: "Entity",  filterable: false},
                        {
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },
                        {
                            field: "DateAssigned", title: "Assigned", width: "125px", filterable: false,
                            template: function(dataItem) {
                                //var taskDate = new Date(dataItem.DateAssigned.match(/d+/)[0] * 1);
                                var taskDate = new Date(dataItem.DateAssigned);
                                var offset = new Date().getTimezoneOffset();
                                    taskDate.setMinutes(taskDate.getMinutes() - offset);
                                      return  humaneDate(taskDate);
                                }
                        }
                    ]

Happy coding!

WordPress Plugin Updates Fails in IIS 7. Locks folder after delete and requires an IIS restart to release file locks

I was trying to update the plugins on my WordPress blog today, and it failed….again and again…and again. I was used to the auto update not working. So much so, I always backup my plugins folder, try and then replace the old version and carry on.
Well today, I was fed up and wanted to get everything up to date.

I changed filed permissions, I restarted IIS beforehand, I even tried using Jedi mind powers. It was all fruitless.

I finally was able to follow a nugget of information that led me to a bright person somewhere who said it was due to PHP caching. Well, since I don’t know very much about PHP (open source legacy wannabe script language), I figured, of course it was. I like to blame PHP, or anything that isn’t my own code for that matter.

The WinCache in PHP decides it likes the plugin folders a whole lot. So much so, it will never let them go. Until now, the fine fellows that designed the cache fixed their glitch.

http://sourceforge.net/projects/wincache/files/development/wincache-1.3.2-dev-5.4-nts-vc9-x86.exe/download

Good luck and Happy Coding!

What is the difference between # and . in CSS?

I kept seeing style generators format some css tags with a #(pound) sign and the css style have a .(period) in front of the declaration. This got me to thinking, wtf is the difference? I was never a big CSS stylesheet guy. I know my way around it, but generally used style builder tools to save me the headache of all the little tag nuances. I also have been hand coding HTML for well over a decade. So, when I saw a # sign, it threw me off.

I am sure it has been around a lot longer than I give it credit, but I figured I would research what its use is for. Of course, the answer is amazingly simple.

# is for ID referencing and . is for class declaration.

/*  normal class declaration. What I am used to */

.MyClass
{
    width: 100%;
}

 

/* fancy ID referencing */

#Sidebar
{
   width:100px;
}

 

If you don’t know the difference between a class and an ID, you probably don’t program javascript or forms often. Simply put, the class is a reusable style that can be applied to a number of elements. The ID is the unique identifier for a specific element. Only one element on a page will have that ID. N elements on the page can use the same class.

<a id=lnkHomePage href=’Home’>Go Home</a>

Above, lnkHomePage is the ID. To reference in CSS:

#lnkHomePage{
font-weight: bold;
}

This will style only that one tag. You know how to use classes, so I won’t bore you with that.

Well, short example.

<a id=lnkHomePage class=MyClass href=’Home’>Go Home</a>

Above uses the MyClass class declaration, shown up above.

Hope this helps clarify this simply concept. At least now you will know why the tags appear the way they do. Personally, I don’t see a lot of utility for the ID CSS reference unless you really like all your styles in one place and don’t like inline styling.

Happy coding!