AngularJS : Autocompleting Multiple Values Into a Single Field

This is of course is not a invention, but thought of writing this post as it might help some one, some day.

The thing  I am trying to achieve is some thing like below (please ignore the styling!).

Autocompletion

Basically it’s just a textbox giving us suggestions from predefined list of items. The important thing hers is the textbox can have multiple entries and for each item it’s giving us suggestions. So let’s see  how we can build something like this using AngularJS and jQuery.

Here I will be using a Visual Studio solution, and if you want to learn how you can create an ASP.NET Project Powered by AngularJS using Visual Studio, please refer the below article.

   Creating an Empty ASP.NET Project Powered by AngularJS using Visual Studio

First I need to install jQuery-UI nuget package and include the references.

jQuery UI

<script src="../Scripts/jquery-1.6.4.js"></script>

<script src="../Scripts/jquery-ui-1.11.4.js"></script>

Once the reference to jQuery and jQuery UI libraries are added, let’s write some code in the AngularJS controller to define the list of suggestions and write a method to invoke jQuery autocomplete on a textbox.

app.controller('homeController', function ($scope) {

    $scope.availableTags = [

      "ActionScript",

      "AppleScript",

      "Asp",

      "BASIC",

      "C",

      "C++",

      "C#",

      "Clojure",

      "COBOL",

      "ColdFusion",

      "Erlang",

      "Fortran",

      "Groovy",

      "Haskell",

      "Java",

      "JavaScript",

      "Lisp",

      "Perl",

      "PHP",

      "Python",

      "Ruby",

      "Scala",

      "Scheme"

    ];

    function split(val) {

        return val.split(/,\s*/);

    }

    function extractLast(term) {

        return split(term).pop();

    }

    $scope.autoComplete = function () {

        $("#txtTags")

        .bind("keydown", function (event) {

            if (event.keyCode === $.ui.keyCode.TAB &&

              $(this).autocomplete("instance").menu.active) {

                event.preventDefault();

            }

        })

        .autocomplete({

            minLength: 0,

            source: function (request, response) {

                response($.ui.autocomplete.filter(

                $scope.availableTags, extractLast(request.term)));

            },

            focus: function () {

                return false;

            },

            select: function (event, ui) {

                var terms = split(this.value);

                terms.pop();

                terms.push(ui.item.value);

                terms.push("");

                this.value = terms.join(", ");

                return false;

            }

        });

    }

});

Basically you can find this code snippet in jQuery UI site and I just modified it for AngularJS. Now in the view/template, let’s just create an textbox and put it’s id as “txtTags” and kick off our “autoComplete” method in key up event.

<input type="text" id="txtTags" ng-keyup="autoComplete()" />

So that’s about it. If you want the full sample code, you can download it from my OneDrive.

Happy Coding.

Regards,
Jaliya

jQuery UI - Modal Message

I was always not good in designing nice web sites, but this jQuery UI JavaScript library is there to help me on that. Today I am going to write about how to show a nice message box, which is a modal using jQuery UI.

First I need to have jQuery and jQuery UI libraries installed on my web application. I can easily use NuGet to do the installation.

Installing jQuery library

Installing jQuery UI library

Then I have selected a theme from jQuery UI Themes. There are a lot of themes available and even you can customize the themes. I have downloaded a theme and put it into themes folder under Content folder.

Adding a theme

Then I have added following lines to the master page.

    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <link href="Content/themes/redmond/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />

I am adding a div to my page, and it will be the modal.

    <div id="dialog-alert" title="Message">

    </div>

I am writing a method in the code behind file which will contain the JavaScript function.

        private void ShowJqueryMessage(string message)
        {
            try
            {
                //Initialize the stringbuilder object to append javascript
                StringBuilder sb = new StringBuilder();
                sb.Append("$(function() { ");
                sb.Append("$('#dialog-alert').empty();");
                sb.Append("$('#dialog-alert').append('" + message + "');");
                sb.Append(" $('#dialog-alert').dialog({");
                sb.Append("    width: 350,");
                sb.Append("buttons: {");
                sb.Append("'Close': function () {");
                sb.Append("$('#dialog-alert').dialog('close');");
                sb.Append("}");
                sb.Append("   }");
                sb.Append(" });");
                sb.Append("});");
                //Register the script on page startup
                ClientScript.RegisterStartupScript(typeof(Page), "myscript", sb.ToString(), true);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

Then in my button click event I am calling the method.

        protected void Button1_Click(object sender, EventArgs e)
        {
            ShowJqueryMessage("Message.");
        }

Message in the modal

That's it. Hope this helps.

Happy Coding.

Regards,
Jaliya

jQuery - Open another page inside the modal window

Sometimes you might face a situation where you want to open another page inside your modal window. This is how you can achieve it.

Add this part to your master page.

    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#dialog-page").dialog("destroy");
        });

        function showDialog(uniqueName) {
            $("#dialog-page").load('../NewPage.aspx').dialog({
                autoOpen: false,
                resizable: true,
                height: 400,
                width: 600,
                modal: true
            });

            $('#dialog-page').dialog('open');
            return false;
        }
    </script>

In your page which will have the the control to open the modal, add this div.

    <div id='dialog-page' title="Modal">
        
    </div>

I am using Link Button to open the modal. This is how you can trigger the javascript function.

<asp:LinkButton ID = "lbtnModal" runat="server" Text="Open" OnClientClick="javascript:return showDialog(this.name);" ></asp:LinkButton>

New page inside the modal

Hope this helps.

Happy Coding.

Regards,
Jaliya

jQuery UI Tabs - Maintain same tab after postback

I think this is a common issue if you are using jQuery UI Tabs. The issue is when you click a submit button inside a any tab other than the first tab, you will be landed on the first tab after postback. It can really be a trouble if you want to stay on the same tab after postback.
Here is a simple workaround to solve that problem.

• Add a hidden field inside the tabs div.

    <div id="tabs">
        <asp:HiddenField ID="tab_index" Value="0" runat="server" />
        <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
        </ul>

        <div id="tabs-1">
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"/>
        </div>

        <div id="tabs-2">
            <asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"/>
        </div>

        <div id="tabs-3">
            <asp:Button ID="Button3" runat="server" Text="Submit" OnClick="Button3_Click"/>
        </div>
    </div>

• Add this script to your master page.

    <script type="text/javascript">
        $(document).ready(function () {
            var iSelectedTab = $(this).find("input[id*='tab_index']").val();
            if (iSelectedTab == null)
                iSelectedTab = 0;
            $('[id$=tabs]').tabs({ selected: iSelectedTab });
        });
    </script>

• In your code behind file, set the current tab in the postback event.

protected void Button1_Click(object sender, EventArgs e)
{
    tab_index.Value = "0";
}

protected void Button2_Click(object sender, EventArgs e)
{
    tab_index.Value = "1";
}

protected void Button3_Click(object sender, EventArgs e)
{
    tab_index.Value = "2";
}

Hope this helps.

Happy Coding.

Regards,
Jaliya

Started using jQuery

jQuery - This thing has been going around and around through my head for some time and thought why not put my hands on it and check what this jQuery really is and do some things using jQuery. Started learning from the scratch few minutes ago and so far so good.

Before started putting my hands on developing, read some articles to get some basic knowledge on what jQuery really is and what are the things that can be done using jQuery. It seems like for web developers and web designers, there is a lot you can do and you will never even imagine how a simple and small code snippet can do such things and thats of course by calling nicely designed functions in jQuery JavaScript library.

jQuery is a cross-browser JavaScript library which will simplify JavaScript programming. All you need is downloading jquery.js file and a simple text editor (well I am using notepad++).

You can download jquery.js from here.

Happy Coding.

Regards,

Jaliya