.Net && Beyond

Customize JQuery Autocomplete

Alon Nativ — Sun, 10 Jun 2012 23:06:00 +0000

A few month ago I wrote a post about “Search Facebook Friends With Jquery Autocomplete”. The problem that after a while it become not relevant due to the changes in the jquery autocomplete API. Due to many requests that I got (in comments,emails, facebook, twitter) I decided to update it. So here we go…

Before I start I have to admit that I don’t like the new API it is too hacky to make a custom autocomplete and it is not documented!.

Before we implements “Search Facebook Friends With jQuery” we need to look at the jQuery autocomplete source code, https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L507. The method that render the UI for the autocomplete is called _renderItem

_renderItem: function( ul, item ) {
return $( “

” )
.append( $( “” ).text( item.label ) )
.appendTo( ul );
}

Ho snap there is a problem it is private… But don’t worry it seems that there is a “normal” way to override it (again not documented)
in order to override autocomplete internal methods you need to write the code:

.data( “autocomplete” )._renderItem = function( ul, item ) {//write your code here }

So now that we know what to do we can make our own facebook autocomplete
*in my example the input textbox is

First we need to create an auto complete – you can find many examples of how to do it in the official jQuery Autocomplete site http://jqueryui.com/demos/autocomplete/

Now we need to render the facebook friends URL https://graph.facebook.com/me/friends?access_token={YOUR_ACCESS_TOKEN}&callback=?
You can read more about it here: http://graph.facebook.com/ (you will even get your access token there)

we almost done… we need to override the _renderItem method

$("#autocomplete-input").data("autocomplete")._renderItem =  function( ul, item ) {
    var image_url = "http://graph.facebook.com/" + item.value +"/picture";
    return $( "" ).append($("").attr('src',image_url))
    .append( $( "" ).text( item.label ) )
    .appendTo( ul );
 }

we also need to make sure that we build the item that we get from facebook

success: function( data ) {
    res = $.map( data.data, function( item ) {
    if (item.name.toLowerCase().indexOf(request.term.toLowerCase()) >= 0){
       return {
          label: item.name,
          value: item.id
       }
    }
   });
  response(res);
}
 

Here is a full example: (just add the jQuery , jQuery UI src file)
https://gist.github.com/2907134

*Note that you can optimize this sample by using “remote with cache” http://jqueryui.com/demos/autocomplete/#remote-with-cache or pre load the data
Good luck
Keep Writing, Compiling, and Debugging
Alon Nativ

Follow @anativ

Ruby on Rails and Heroku – Love from first "site"

Alon Nativ — Mon, 02 Apr 2012 23:34:00 +0000

Ruby on Rails and Heroku is a great match! Heroku is a great platform for any startup that wants to develop fast and without spending a lot money

Heroku is a platform that allows you to think about servers as a service.

I am using Heroku with Rails (and Node.js) for a long time. But in my current startup the only servers that we have (so far) are on Heroku. It is much more easy that you don’t need to think about your servers. I got much more time to handle the important stuff. It is so easy and simple that each developer can create his own server, qa servers, staging server and the production server

Heroku currently supports: Ruby, Node.js, Clojure, Java, Python and Scala. If you are looking for .NET solution you should look at AppHarbor – it is the same solution for .NET applications, I personally didn’t use it – so use it on you own risk

Some few great thing about heroku is:

1. It is free! (if you don’t expect a lot of traffic)

2. it is easy. All you need to do in order to deploy to a server is:

$ heroku create
$ git push heroku master

3. It is fun! every time that you create a server you get a funny name for example:

afternoon-waterfall
deep-mist
empty-mist
empty-sunrise
furious-fog
gentle-leaf
morning-planet

and much more names funny names, yes you can change it by running “heroku rename”

Even if you don’t need heroku now you should play a bit with it

Keep Writing, Compiling, and Debugging

Alon Nativ

Follow @anativ

End of an Era

Alon Nativ — Tue, 06 Mar 2012 11:39:00 +0000

Well this is an end of an era for me…

I left Conduit and starting my own startup. There are few major changes in this event

1. I am starting my own company

2. I decided to buy a mac.

Yes yes I know that you can’t develop with .Net on a mac. After a long journey with .NET (since .NET 1.1) I have decided to leave it and write with Ruby on Rails. In the past few month I was using both .NET & Ruby and even though I am (or was) a big .NET fan I must say that my hart goes with Ruby. When I started writing in Ruby i felt that someone opened my eyes and told me the king in naked… I started to understand that in .NET I am wasting to much time on writing infrastructure for my project instead of writing the real business logic. My code becomes much shorter, easier to read, with less bugs and was written faster.

Good bye .NET it was fun…

Hello Ruby!

Follow @anativ

BTW: here is my new mac (another good reason to abandoned .NET)

Keep Writing, Compiling, and Debugging

Alon Nativ

Node.js Socket.IO and the Real-Time Web

Alon Nativ — Thu, 02 Feb 2012 20:14:00 +0000

Today we had our 1st developers meet-up @conduit.

I made a session on node.js Socket.IO and the Real-time web. You can find the slides here: http://www.slideshare.net/alonnativ/nodejs-socketio

It was fun!

Keep Writing, Compiling, and Debugging

Alon Nativ

Follow @anativ

Enable cross origin request with ASP.NET MVC

Alon Nativ — Wed, 05 Oct 2011 02:08:00 +0000

As you know you can’t make an Ajax cross domain request. The browser block this kind of requests. To enable Cross-Origin Requests (CORS) you need to add some headers to the server response: “Access-Control-Allow-Origin” and “Access-Control-Allow-Methods”.

So I made a MVC filter that will allow cross domain calls:

public class AllowCrossDomain : ActionFilterAttribute
{
    public const string AllDomains = "*";
 
    private readonly string[] _allowMethods;
    private string _allowOrigin;
 
    public AllowCrossDomain()
        : this(null, null)
    {
 
    }
 
    public AllowCrossDomain(string allowOrigin, params string[] allowMethods)
    {
        _allowMethods = allowMethods;
        _allowOrigin = allowOrigin;
 
        if (string.IsNullOrWhiteSpace(_allowOrigin))
        {
            _allowOrigin = AllDomains;
        }
        if (_allowMethods == null || _allowMethods.Length == 0)
        {
            _allowMethods = new[] { "GET" };
        }
    }
 
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", _allowOrigin);
        filterContext.HttpContext.Response.Headers.Add("Access-Control-Allow-Methods", string.Join(", ", _allowMethods));
        filterContext.HttpContext.Response.Headers.Add("Access-Control-Max-Age", "86400");
    }

To use it just put it on a method on controller:

[AllowCrossDomain]
public ActionResult Index()
{
    return Json(new {sample="a sample data",crossDomain="you can read it from cross domain"})
}

Simple…

A few things before you try this:

1. “Cassini” doesn’t support this kind of headers you will need to run it on IIS \ IIS Express

2. CROS are supported only by modern browsers FF 3.6+ all chrome browsers, modern smart phones…

3. In order to enable it on IE you need to change the security settings:

you can read more about CROS here: http://www.w3.org/TR/cors/

Keep Writing, Compiling, and Debugging

Alon Nativ

Get Detailed Notification From Facebook API

Alon Nativ — Mon, 08 Aug 2011 00:59:00 +0000

Recently I was asked question how to get the image or the comment when using Facebook FQL API to get notification. http://developers.facebook.com/docs/reference/fql/notification/

It is very easy to make an application that will show the basic notification like that looks like:

“David has comment on your link”

“James liked your photo”

You can see more samples at this link: http://www.facebook.com/notifications.php

Well there is no documentation of how to do it (and there is not even a clean way to do it) there is no column that points the the original link\image\comment.

So… do we give up? of course not!

If we will look at the format of the “herf” we will see that there is a param called “story_fbid” (sometimes it is called “fbid” depends on the type of the notification)

http://www.facebook.com/permalink.php?story_fbid=178287412229452&id=100001445838266\

Now all you need to do is take the id and call the graph API https://graph.facebook.com/{ID}?access_token=XZY for more information about the graph API visit (http://developers.facebook.com/docs/reference/api/)

That’s it.

Now you can improve your Facebook notification

Keep Writing, Compiling, and Debugging

Alon Nativ

ASP.NET MVC ImagePixel ActionResult

Alon Nativ — Sun, 10 Jul 2011 20:36:00 +0000

Just wanted to create a web logger in MVC. The idea is the same as Google analytics that a client will send data from the “client side” to the server. The server will save the data and return “Image Pixel” just like any other normal web logger. In order to do that I have created an ImagePixel ActionResult.

The server logger method will look something like that:

public ActionResult Logger(string trackingData)
{
    Log(trackingData);
    return new ImagePixelResult();
}

The ImagePixelResult is defined like this:

 
    public class ImagePixelResult : ActionResult
    {
        private static readonly byte[] Imgbytes = Convert.FromBase64String("R0lGODlhAQABAIAAANvf7wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
        
        public override void ExecuteResult(ControllerContext context)
        {
            HttpResponseBase httpResponse = context.HttpContext.Response; 
            httpResponse.ContentType = "image/gif";
            httpResponse.AppendHeader("Content-Length", Imgbytes.Length.ToString());
            httpResponse.Cache.SetLastModified(DateTime.Now);
            httpResponse.Cache.SetCacheability(HttpCacheability.NoCache);
            httpResponse.Expires = -1500;
            httpResponse.Cache.SetNoStore();
            httpResponse.ExpiresAbsolute = DateTime.Now.AddYears(-1);
            httpResponse.BinaryWrite(Imgbytes);
        }
    }

Clean and simple

Keep Writing, Compiling, and Debugging.

Alon Nativ

Google +1

Alon Nativ — Thu, 02 Jun 2011 11:05:00 +0000

Just added Google +1 to my blog.

The +1 is the Google “like” button. It should help Google to find what kind of pages people are interested in and improve the search experience.

In order the add the +1 button go to the documentation add to your page:

In some pages (this blog platform for example) you can’t add this code so you must use HTML5 style (I think it is better)

class="g-plusone" data-size="standard" data-count="true">

You can read more on how to do it in here

So +1 my blog

Keep Writing, Compiling, and Debugging

Alon Nativ

Search Facebook Friends With Jquery Autocomplete

Alon Nativ — Mon, 30 May 2011 23:55:00 +0000

Just made a small autocomplete textbox that search a user friends from Facebook.

it is a pretty simple implementation that allow the user to search for his friends. In order to use it you will need to get a valid access_token from Facebook (but you can read more in how to use the Facebook graph API at http://developers.facebook.com/docs/reference/api/ – or get a sample one).

There are a few tricks in the implantation

Use dataType: ‘jsonp’ – undocumented option that allow us to use jsonp instead of json
Use Facebook API to get the user image: http://graph.facebook.com/{ID}/picture?type=square for example http://graph.facebook.com/4/picture?type=square
Use the formatItem that will return HTML instead of a text.

So here is the code



 

Write a friend name
"example" />

The final result will look something like that:

All you need to do now is change the style so it will fit in your site

You can read more about jquery autocomplete plugin here: http://docs.jquery.com/Plugins/Autocomplete/autocomplete

Update: There is an update to this post here

Keep Writing, Compiling, and Debugging

Alon Nativ

The King is dead. Long live the King

Alon Nativ — Mon, 16 May 2011 18:34:00 +0000

A few weeks ago redgate announced that the lovely .NET reflector is going to cost money, that was a very sad news for every .NET developer out there.

But the good news are that a few days after JetBrains announced that they are releasing there own reflector called dotPeek. I personally hate the name but It is a great tool!

Much faster great UI and the best thing it has all of the ReSharper shortcuts!

So even if you decided to pay for the .NET reflector I think that you should throw it away and start using dotPeek

The king (.NET reflector) is dead. Long live the King (dotPeek)!

Keep Writing, Compiling, and Debugging.

Alon Nativ