Below you will find pages that utilize the taxonomy term “JavaScript”

Blogs

Knockout Validation: Multiple email addresses

A simple rule for validating an observable which could contain multiple email addresses.

Assuming you have an observable like self.emailTO = ko.observable('');, you would just extend it to have self.emailTO.extend({ multiemail: true });. Use it with the required validator if you want at least one email address.

ko.validation.rules['multiemail'] = {
    validator: function (val, validate) {
        if (!validate) { return true; }

        var isValid = true;
        if (!ko.validation.utils.isEmptyVal(val)) {
            // use the required: true property if you don't want to accept empty values
            var values = val.split(';');
            $(values).each(function (index) {
                isValid = ko.validation.rules['email'].validator($.trim(this), validate);
                return isValid; // short circuit each loop if invalid
            });
        }
        return isValid;
    },
    message: 'Please enter valid email addresses (separate multiple email addresses using a semicolon).'
};

Requires Knockout.js, Knockout Validation, and jQuery.

read more
Blogs

Using JsRender to create SOAP Envelopes

I am working on a small query tool that will be used to make AJAX calls against SharePoint’s Enterprise Search Query Web Service. Previously, I created the SOAP messages by appending a gigantic series of strings together. In this iteration, I wanted to use JsRender (my template engine of choice right now and the successor to jQuery templates).

read more
Blogs

Custom Debug JsRender tag

I’ve been learning a lot about JsRender and Knockout.js after finding Ryan’s answer on StackOverflow. I’ve created a couple of templates and started to use the {{for}}{{/for}} tag.

I was having trouble figuring out how to access the parent object’s data from within the for loop. After reading John Papa’s awesome posts, Using JsRender with JavaScript and HTML and Advanced JsRender Templating Features I came up with a quick custom “Debug” tag to help me understand.

read more
Blogs

AJAX app development using Visual Studio and a remote WCF service

My team has recently created quite a few awesome WCF services that can surface data via REST or JSON. The next step, was building an interface on top of the services using AJAX.

Since the services were hosted on a SharePoint farm, it is super easy to just upload an HTML file into a document library and start coding away. However, eventually this process breaks down; I needed a way to deploy these files to different environments and keep them in some sort of version control system. (No, a document library doesn’t count as version control)

read more
Blogs

Using undefined in JavaScript

Working with JavaScript can definitely be painful, but I always love stumbling across interesting and strange features of the language. I just found wtfjs.com which led me to these two answers on stackoverflow.

read more
Blogs

Relative Dates in JavaScript

I was developing an input form for a search when I came across the need to allow the user to filter items using a date range. I had two input boxes where the user could enter a start and an end date. For some of the most common date ranges, I decided to create links that could be clicked to auto-populate the start/end date textboxes. For example, searching for items that were created last week or last month. Using JavaScript’s Date object, I was able to put together some nice examples.

read more
Blogs

Using Prototype's Element.insert

Strangely, Prototype’s documentation for Element.insert does not have any examples, so I cooked something up quick:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Template</title>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

Event.observe(window, 'load', function() {
    // Using Element.insert to insert after, before, top, or bottom
    Element.insert($('para1'), { before: "<p>This is paragraph zero.</p>" });
    Element.insert($('para1'), { after: "<p>This is paragraph two.</p>" });
   
    // notice we have to insert using the content container
    Element.insert($('content'), { top: "<p>This is the first paragraph.</p>" });
    Element.insert($('content'), { bottom: "<p>This is the last paragraph</p>" });
});

</script>

</head>

<body>

<div id="content">
    <p id="para1">This is paragraph one.</p>
    <p id="para3">This is paragraph three.</p>
</div>

</body>
</html>
read more