Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

  1. Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
  2. AutoComplete Component in Visualforce using JQueryUI

In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We discussed already in one of article.

Getting Remote Data in JSON format using AJAX from:

To get data from remote source, we are using same code “Visualforce Account_JSON” and “Controller AccountJSONCreator ” explained in this article. Only thing I have added in wrapper class is ID field.

Other than AngularJs, we are also using Bootstrap in this article to make slick UI.

TypeAhead Demo using AngularJs
TypeAhead Demo using AngularJs

Angular Directive :

Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like :

AutoComplete Component in Visualforce using JQueryUI

In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named “AutoCompleteWithModal“. This Static resource has all images, CSS and JQuery library needed to implement this component.

In one of my old post, I have already explained that how to generate JSON in Visualforce page. So Considering same article I have create Visualforce page named “Account_JSON” which returns list of Accounts on basis of text entered in input field.

Disable inputs after submit to avoid double submission using JQuery and Ajax

This tutorial will explain one of the ways to avoid accidental submissions of form using the JQuery and Ajax. While developing the web application this is the most common bug ignored by the newbies.

I will use the JQuery library and the Ajax to accomplish this behavior.

Disable inputs after submit to avoid double submission using JQuery
Disable inputs after submit to avoid double submission using JQuery

Step by Step DWR Application – Simple AJAX in JAVA

In this article, i am going to explain the step by step approach to create the DWR (Direct Web Remoting) application in JAVA.

DWR consists of two main parts:

  • A Java Servlet running on the server that processes requests and sends responses back to the browser.
  • JavaScript running in the browser that sends requests and can dynamically update the webpage.
How DWR works in Java
How DWR works in Java

Servlet, Hibernate, jQuery and Ajax based google like chat

Hi, In this article, my aim is to create an application which uses the concept of Hibernate in Servlet with Ajax support of Jquery.
Below figure can give you the idea of final look and feel of the complete application:

Servlet, Hibernate, jQuery and Ajax based google like chat
Servlet, Hibernate, jQuery and Ajax based google like chat

Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

In this article i will explain step by step creating Ajax Based Multi select JQuery Autocomplete User Control.

Here, we will use Jquery UI Tool’s Autocomplete Control. To get the Data using AJAX, here we will try Handlers of ASP. Using Handlers against simple asp.net page is that, if we will use ASPX page then it will go through all the phases of page (nearly 1o) whereas Handler is faster than ASPX page.

Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net

Step 1 : creating Handler

In step 1, we will create the handler which will provide the data in form of JSON. To know more about  creating JSON is C#, read this article written by me on codeproject.

Row expand collapse using jquery and Ajax

This article describes how to expand and collapse rows of a GridView or Table and showing data details using Jquery and Ajax


Now day’s , important issue with web applications is how quick a wed page is rendered  and how it is animated or  visualized

So for quick reply from server Ajax is the solutions and for some visualizations with server side response we mostly use jquery or javascript.
I this article, for exp

anding , collapsing and  adding details to gridview row we are going to use AJAX to make call to server and we will visualized it using jquery.


1. Getting details of product  by extracting details at the next to current row and before second    one.

2. Visualizing  the expanding of rows.

3. No server side postback.

4. Using GridView Control to bind data and simple data binding to table using scriptlet.

Using  Jquery Code

Expanding Row :

For expanding any row, we need to create an new row  with the serverside details  and then we will add it to the next of current row

Ajax JQuery Row Expand Collapse

var trindex=0;	//trindex hold row index created by jquery
$("tr").click(function() {
if ($(this).find("td:first").length > 0) { //check whether it is header or content row
//row index increment to assign new row id everytime
//create a row with td colspan 3 to show product description
var row= '><td class="currRow" colspan="3" ><
div id="did"><img id="imagepath" src=""
style="height: 81px; width: 104px" />  Description :<
span id="des">sd</span><p>Cost :<
span id="cost">sd</span></p></div></td></tr>';

//adding animation to row
var newRow = $("<tr id=tr"+ trindex + row).animate({
height: "140px",
opacity: 0.25,
}, 500);
//adding row to existing table
Collapsing  Row :

At the same moment we expand any row, we collapse previous created row, so we need to remember the previous created rowIndex or it’s id.

Ajax JQuery Row Expand Collapse

    height: "0px",
    opacity: 0.25,
    }, 1000, function() {
<h5>Ajax Call to the server :</h5>
For getting the full details about our shortly highlighted product, we need to make a asynchronous call to
server using AJAX. We are passing some key values to server(product Id) to extract the resultset.
       type: "POST",
       url: "WebService.asmx/GetDetails",   //webserviceName/methodName
       data: "{'name': '" + $(this).find("td span").text() + "'}",  //passing values to webservice(productid)
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
       //extrating response data to newly created row
       $("#tr"+trindex ).find("td #did p #cost").text(msg.d.id );
       $("#tr"+trindex ).find("td #did  #des").text(msg.d.order);
       $("#tr"+trindex ).find("td #did #imagepath").attr('src', msg.d.order);
//$("#myImage").attr("src", "path/to/newImage.jpg");
       error: FailedMessage     //showing error message if failure
Using The WebService.cs

Programmable application logic accessible via standard Web protocols.We are using webservice to extract data from database using jquery Ajax call.  CollectData class to hold extracted details from db.

public class CollectData
        public string cost { get; set; }
        public string imagePath { get; set; }
        public string description { get; set; }

Simple queries to the database via WebMethod

    public CollectData GetDetails(string name)
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].
        SqlCommand cmd = new SqlCommand("Select cost, imagePath, description from Products where ProductId='" +
        name + "'",con);
        SqlDataReader data;
        CollectData c = new CollectData();
            if (data.Read())
                c.cost= data[0].ToString();
                c.imagePath = data[1].ToString();
                c.description = data[2].ToString();
                return c;
                c.cost = "N/A";
                c.imagePath = "N/A";
                c.description = "N/A";
                return c;
        catch (Exception ex)
            c.cost = "N/A";
            c.imagePath = "N/A";
            c.description = "N/A";
            return c;


Conclusion :

We have mixed up Jquery, Ajax, server Control(Gridview ) to get quick and visualized output. Result can be little bit change as per the browsers.

Uploaded on Codeproject

Download Demo Article

Difference between $find and $get Methods

$get is used to get a reference to a DOM element. It is an alias for Sys.UI.DomElement.getElementById:

var myLabel = $get(‘myLabel’);

$find is an alias for Sys.Application.findComponent() and it’s used to get a reference to a particular component, given its id.

How to get DOM element using $find

var lnkAddNew = $find("CntrlID");
    lnkAddNew.get_element().style.display = '';