Incredibly Me

Thursday, December 27, 2012

Using Inheritance in KendoUI

I am in the process of learning KendoUI and was working on this tutorial.

It is a good tutorial showing how the Kendo peeps made good use of basic OO principals that Javascript developers need in order to keep the code clean and readable.

I also put together a fiddle that came from the tutorial as well.

Happy New year

Monday, December 24, 2012

Getting to your WebApi methods in jQuery

I have been working with WebApi in my latest project. If your new to WebApi then this might help you out.

The default api route in Global.asax will look something like,

GlobalConfiguration.Configuration.Routes.MapHttpRoute(
 name: "DefaultApi",
 routeTemplate: "api/{controller}/{id}",
 defaults: new { id = RouteParameter.Optional }
 );

In order for you to be able to call your methods in your WebApi controller you will need to use Url.RouteUrl to build the link correctly.

<script type="text/javascript">
    var toUrl = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "values"     , id = "123" })';
    $.ajax({
       url: toUrl,
       type: 'GET',
       success: function(result) {
           // ...
       }
    });
</script>

I found a great post on the subject here.

If you have any questions feel free to contact me.

Monday, December 10, 2012

New HTML5 features

Back in the old days of writing web forms and setting the focus, adding watermarks, or validating fields on your web page meant that you would be writing some java script to handle these minor tasks or passing the data to the server.

HTML5 has changed that and eased the pain of performing these tasks.

[gallery ids="129,128"]

If you just want to set focus then you can use the autofocus attribute.

   <input type="text" autofocus />

If you just want to add a watermark then you can use the placeholder attribute.

   <input type="text" placeholder="watermark" />

If you just want to add validation then you can use the title and pattern attributes.

   <input id="password3" type="text" 
          placeholder="password" 
	  title="1 digit and 1 letter"
	  pattern="\d{1}[a-zA-Z]{1}"
	  required />

If you just want to make a field required then you can use the required attribute.

   <input type="text" required />

All of these great features will only function in a browser that supports HTML5. They are ignored in older browsers.

Thursday, December 6, 2012

Dynamically create Checkboxes with jQuery

In a recent project I had the need to create checkboxes dynamically from a dataset.

My project was done in MVC 3 sprinkled with jQuery.

[gallery ids="118,123"]

<head>

<title>jQuery Build Dynamic Checkboxes</title>

.wrapper{ padding: .5em; border: 1px solid #d81c3f; border-radius: 5px; min-height: 500px; }

</style>

</head>

<body>

<div>

</div>

(function(){

var chkContainer = $('.poo');

var ccId = '1320';

if(ccId){

// Call to get your data

var shoeTypes;

if(ccId === '1320'){

shoeTypes = [

{ description: 'Runner' , available: true, enabled: true},

{ description: 'Jogger', available: true, enabled: true },

{ description: 'Sprinter', available: null, enabled: null },

{ description: 'Walker', available: true, enabled: true },

{ description: 'Couch', available: null, enabled: null }

];

} else {

shoeTypes = [ ];

}

$.each(shoeTypes, function(index, item){

// Build the Checkbox

var chk = '<input type="checkbox" name="' + item.description + ccId + '" ';

(item.enabled) ? chk += 'checked="true" ' : chk += '';

(!item.available) ? chk += ' disabled="true"' : chk += '';

chk += " />";

$(chk).appendTo(chkContainer);

// Build the Label for the Checkbox

$('<label for="' + item.description + ccId +'">' + item.description + '</label>').appendTo(chkContainer);

});

})();

</script>

Monday, December 3, 2012

Sublime Text 2

I have been really getting into the jQueries stuff and have recently started using Sublime Text 2 editor and it is great. I am an old school Visual Studio guy and thought VB 5 was the end of all programming and it would never be able to be beat.

I am stupid.

Take a look at the video in this post.