Fransiscus Setiawan

Technical articles on AI agents, Azure, .NET, architecture, and EV charging systems from Sydney.

Category: JavaScript Page 1 of 3

Javascript code

Multiple ViewModel with Knockout.js

By

On July 10, 2013

In JavaScript

Great article in having multiple views within one page

http://blog.yojimbocorp.com/2012/02/14/multiple-view-models-with-knockout/

Another Javascript Utility Library to manipulate JS object

By

On May 22, 2013

In JavaScript

To me jQuery is javascript library that helps the developer in interacting with HTML element/DOM but what library that can be used to help in manipulating the Javascript object?I found “Underscore.js” which can be found in here (http://underscorejs.org). It provides the user to manipulate the JS object (e.g It provides function to manipulate Arrays, Add delay to your function, throttling your JS function, Check the data type of an object, etc)

A couple functions that I found useful

1. Manipulating your JSON object with “Where, filter and findWhere”

2. A few helpers to validate the data type of an object

Enum in javascript and binding it to Dropdown list

By

On December 28, 2012

In JavaScript

It’s pretty clean to set, bind and use enum in your javascript

//Enum declaration
var AvailableActions = { “Action”: 1, “Priority”: 2, “Status”: 3 };

//Bind
function Load()
{
for (var action in AvailableActions) {
jQuery(“#MandatoryActionList”).append(“<option value=” + AvailableActions[action] + “>” + action + “</option>”);
}
}

//Use the enum
AvailableActions[“Priority”] will return 2
action will return the string representation in this case e.g “Action”, “Priority”, or “Status”

Coding Standard for Javascript

By

On June 14, 2012

In JavaScript

This is the javascript coding standard that my colleague found on Github, but seriously this is a good standard and I recommend it to any developer

https://github.com/rwldrn/idiomatic.js/

Simple Paging using jQuery -Pajinate

By

On May 21, 2012

In JavaScript

By using this library, it allows you to do the paging through the HTML DOM from the client side  (Note: this is not about the ideal way or not the ideal way, I know the ideal way is to do paging server side)

To implement you just need to do 3 things:

1. Create a div container that wraps the container of item that you want to repeat and the navigation div, you can call it whatever you want

2. Create a div inside the container with class “page_navigation”

3. put class “content” on the container of the list item

Sample

Code Snippet
  1. <div id=”page_container”>
  2.     <div class=”page_navigation”></div>
  3.     <ul class=”content”>
  4.         <li>
  5.             <p>One</p>
  6.         </li>
  7.         <li>
  8.             <p>Two</p>
  9.         </li>
  10.         <li>
  11.             <p>Three</p>
  12.         </li>
  13.         <li>
  14.             <p>Four</p>
  15.         </li>
  16.         <li>
  17.             <p>Five</p>
  18.         </li>
  19.         <li>
  20.             <p>Six</p>
  21.         </li>
  22.         <li>
  23.             <p>Seven</p>
  24.         </li>
  25.         <li>
  26.             <p>Eight</p>
  27.         </li>
  28.     </ul>
  29. </div>

and I put this code on the document.ready event based on the id set on item 1

Code Snippet
  1. <SCRIPT>
  2.     jQuery(document).ready(function () {
  3.         jQuery(‘#page_container’).pajinate({ items_per_page: 2 });
  4.     });
  5. </SCRIPT>

The source code can be downloaded from here

and you can read the documentation from this github page

Knockout MVVM Javascript

By

On May 20, 2012

In JavaScript

Knockout allows you to bind the HTML to your javascript object. It simplifies DOM manipulation and allow the portability of the javascript object and action. It is pretty much the same concept as MVVM in silverlight. You can wire up the function with button click easily, you can have for each against your array (e.g like repeater). It is so elegant, but debugging sometimes can be challenging as well. I’ve used Knockout along with JSON that allows me to build rich and interactive website

2 powerful function: ko.observable – this allow knockout to monitor this object value, ko.observableArray this is the extension of ko.observable against the array. With observable, knockout will keep tracking the value of that property and allow the DOM that has been bind against it to refresh

You can bind initial data from your MVC model to the variable in javascript and bind it, in this sample below, I use ToJson extension function

Code Snippet
  1. namespace System.Web.Mvc
  2. {
  3.     public static class HtmlHelperExtensions
  4.     {
  5.         ///<summary>
  6.         /// Serializes an object to Javascript Object Notation.
  7.         ///</summary>
  8.         ///<param name=”item”>The item to serialize.</param>
  9.         ///<returns>
  10.         /// The item serialized as Json.
  11.         ///</returns>
  12.         public static string ToJson(this object item)
  13.         {
  14.             return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(item);
  15.         }
  16.     }
  17. }

Sample code

Code Snippet
  1. <script type=”text/javascript”>
  2.     var initialData = @(new MvcHtmlString(Model.ToJson()));
  4.     function JobResultViewModel()
  5.     {
  6.         var self = this;
  7.         self.Jobs = ko.observableArray(initialData.JobSearchResults);
  8.         self.Search = ko.observable(initialData.JobSearchModel);
  9.         self.Pageno = ko.observable(initialData.PageNo);
  10.         self.TotalPage = ko.observable(initialData.TotalPage);
  11.         self.TotalRecord = initialData.TotalRecord;
  12.         self.ShowNextButton = ko.computed(function(){
  13.                                             return self.Pageno() < (self.TotalPage() – 1);
  14.                                             });
  15.         self.LoadNextPage = function() {
  16.                                $.getJSON(‘@Url.Action(“ResultJson”)‘, {  Keyword: (self.Search().Keyword == null) ? “” : self.Search().Keyword,
  17.                                                                       ProfessionId: self.Search().ProfessionId,
  18.                                                                       RoleIds: self.Search().RoleId,
  19.                                                                       SalaryTypeId: self.Search().SalaryTypeId,
  20.                                                                       SalaryFromId: self.Search().SalaryFromId,
  21.                                                                       SalaryToId: self.Search().SalaryToId,
  22.                                                                       LocationId: self.Search().LocationId,
  23.                                                                       AreaIds: (self.Search().AreaId.length == 0) ? 0 : self.Search().AreaId,
  24.                                                                       WorkTypeId: self.Search().WorkTypeId,
  25.                                                                       Pageno: self.Pageno() + 1
  26.                                                                    }, function (SearchResult) {
  27.                                                                             $.each(SearchResult, function(i, item)
  28.                                                                             {
  29.                                                                                 self.Jobs.push(item);
  30.                                                                             });
  32.                                                                             self.Pageno(self.Pageno() + 1);
  34.                                                                             //we need to refresh the repeater when we use jquery mobile ONLY
  35.                                                                             $(“#JobRepeater”).listview(“refresh”);
  36.                                                                         });
  37.                                         }
  39.     }
  41.     ko.applyBindings(new JobResultViewModel());
  42. </script>
  43. <h2>Result</h2>
  45. <h1>There are <span data-bind=”text: TotalRecord”></span> jobs</h1>
  46. <a>Save Search</a>
  47. <ul name=”JobRepeater” id=”JobRepeater” data-role=”listview” data-bind=”foreach: Jobs”>
  48.     <li><a data-bind=”attr: { href: UrlAction, title: JobName },text : JobName”></a><span data-bind=”text: Description”></span></li>
  49. </ul>
  50. <div data-bind=”visible: ShowNextButton”>
  51.     <input type=”button” id=”btn_load_next” value=”Load More” data-bind=”click: LoadNextPage”/>
  52. </div>

Source:

Knockout Tutorial

Knockout Tips

Pass Model from Javascript to MVC Controller

By

On May 15, 2012

In ASP.NET, JavaScript

Initially, I always pass individual object properties through JSON and form the model in the controller as I wasn’t sure how to pass/form a model from Javascript to controller

Controller

Code Snippet
  1. [AllowAnonymous]
  2.         public ActionResult JsonRegister(string username, string password, string confirmpassword,
  3.                                             string email, string confirmemail)
  4.         {
  5.             MemberModel.RegistrationModel model = new MemberModel.RegistrationModel() {
  6.                                                                                         UserName = username,
  7.                                                                                         Password = password,
  8.                                                                                         ConfirmPassword = confirmpassword,
  9.                                                                                         Email = email,
  10.                                                                                         ConfirmEmail = confirmemail };

Javascript

Code Snippet
  1. $.getJSON(‘@Url.Action(“JsonRegister”)‘, { UserName: $(“#UserName”).val(),
  2.                                                     Password: $(“#Password”).val(),
  3.                                                     ConfirmPassword: $(“#ConfirmPassword”).val(),
  4.                                                     Email: $(“#Email”).val(),
  5.                                                     ConfirmEmail: $(“#ConfirmEmail”).val()
  6.                                                 }, function (RegisterResult) {
  7.                                                         if (RegisterResult.success) {
  8.                                                             $(‘#RegistrationFields’).hide();
  9.                                                             $(‘#ErrorMessage’).text(”);
  10.                                                             $(‘#RegistrationMessage’).css(‘display’, ”);
  11.                                                         }
  12.                                                         else {
  13.                                                             $(‘#ErrorMessage’).css(‘display’, ”).text(RegisterResult.errors);
  14.                                                         }
  15.         });

the code above is working just fine but I still feel that there is room for improvement. Below is the code that shows how you can still have your controller accepting the model instead of expanding the properties in the model as the parameters to the controller. The solution is just to have the model being assigned to a variable (in this context called as data) before passing it to the JSON, my previous code was forming the actual object in the JSON code

Controller

Code Snippet
  1. [AllowAnonymous]
  2.         public ActionResult JsonRegister(MemberModel.RegistrationModel model)
  3.         {
  4.             string error = string.Empty;
  6.             if (ModelState.IsValid)

Javascript

Code Snippet
  1. var data = { UserName: $(“#UserName”).val(),
  2.             Password: $(“#Password”).val(),
  3.             ConfirmPassword: $(“#ConfirmPassword”).val(),
  4.             Email: $(“#Email”).val(),
  5.             ConfirmEmail: $(“#ConfirmEmail”).val()
  6.         };
  8.         $.getJSON(‘@Url.Action(“JsonRegister”)‘, data, function (RegisterResult) {
  9.             if (RegisterResult.success) {
  10.                 $(‘#RegistrationFields’).hide();
  11.                 $(‘#ErrorMessage’).text(”);
  12.                 $(‘#RegistrationMessage’).css(‘display’, ”);
  13.             }
  14.             else {
  15.                 $(‘#ErrorMessage’).css(‘display’, ”).text(RegisterResult.errors);
  16.             }
  17.         });

Debugging Knockout

By

On May 10, 2012

In JavaScript

I’ve been learning Knockout recently and I found that sometimes it is hard to find out how your View Model is being formed especially when you create the view from Model in MVC

To inspect your view model, you can use firebug console and run below command, this will give you a full navigated View Model and allow you to drill down

console.group(“Dumping view model”);
console.dir(ko.toJS(new JobResultViewModel()));
console.groupEnd();

alternatively you can also put this code in your template

<div data-bind=”text: ko.toJSON($data)”></div>

Feel free to let me know if you have any other way to debug

Delayed Script/Waiting in Javascript

By

On November 30, 2011

In ASP.NET, JavaScript

I was struggling in finding out of how to make a simple delegate like in AJAX request through javascript. It takes me a few days to figure this out

Basically the problems are:

-I need to execute a piece code of javascript after getting the ticket from web service function

-The webservice function might not be responding to the first request because it waits for the state of the other external component

-The webservice will give the response when the external component is ready

-The client does not know when the external component is ready, neither the web service. But it wil be ready within 1-5 minutes which again depending external component

Possible Solution:

-Using the setTimeOut(function(){acquireTicket();}, 300000) will cause the application to wait for 5 mins before calling the web service , this approach will slowing down the user experience and waste of time because the external component can be ready earlier than 5 mins

-Using the while loop is not good because it makes the browser freezing while waiting and it will wasting the processing power because of the looping

Recommended Solution:

-Recall the function by itself using setTimeout Function using parameter to indicate whether it should go out of the loop or not

-The web service will be checked for every 2 seconds to check the response from the external component. Once the external component is ready then it will move on to execute the next line of code

–

Access javascript object properties with invalid character

By

On November 17, 2011

In ASP.NET, JavaScript

ParseJSON returning you an object from your AJAX Call, the problem that I have is my object properties has invalid character (e.g “#”)

Assuming jsonData is my variable that contains the following information

I’d like to grab the property of “#innerxml”

Normally I can do this to get the property of an object but in this case I can’t due to invalid character

(jQuery.parseJSON(jsonData)[0]).#innerxml

So How do I access an object which has properties where one of the property name is using an invalid character (e.g “#”)

I can access with the following style

(jQuery.parseJSON(jsonData)[0])[‘#innerxml’]

Page 1 of 3

Next

Powered by WordPress & Theme by Anders Norén