Category: Snippet

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

July 13, 2014

6327_image_58FAEDFAWhen you have a JSON array, you may want to get one or more items from the array and display. jQuery offers two functions that can help: grep and filter.

  • $.grep(). Finds the elements of an array which satisfy a filter function. The original array is not affected.
  • $filter(). Reduce the set of matched elements to those that match the selector or pass the function’s test.
  • $.map(). applies a function to each item in the array, thus returning a modified array

In other words, $.grep() removes items from an array as necessary so that all remaining items pass a provided test; .filter() constructs a new jQuery object from a subset of the matching elements.

Also, filter is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like “:even”, “:odd” or “:visible” etc. You can’t do that with the grep function, which is intended to be a utility function for arrays.

Continue reading “Snippets – Filtering JSON Using jQuery Grep, Filter, Map”

Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops

July 11, 2014

10063_580983808600819_401360548_nThe foreach statement repeats a group of embedded statements for each element in an array or an object collection. The foreach statement is used to iterate through the collection to get the information that you want.

It is not be used to add or remove items from the source collection to avoid unpredictable side effects. (If you need to add or remove items from the source collection, use a for loop.)

Continue reading “Snippet – C#, JavaScript, jQuery, Underscore ForEach Loops”

Snippet – Setting MIME Types (Font Awesome or Custom Fonts or Json File Extensions Doesn’t Work When Deployed on Windows)

July 8, 2014

imageWhen using custom fonts on Windows Azure, users have reported issues. For example, Font Awesome icons would not display. Or even if the fonts do display, it might not display correctly on some devices, such as Windows Phones.

In other cases, you may have a file type that does not map to the right MIME type.

In fact, I exposed most of the JSON files with the .txt extension just to avoid the issue of IIS not serving up .JSON files as expected.

It turns out — the issue is that IIS 7 – 8.1 serves up the wrong MIME type for web font files. So you need to be sure the right MIME types are being served up for your font files, as shown here: Proper MIME type for fonts.

When deploying to an IIS servers you need to add MIME support.

Continue reading “Snippet – Setting MIME Types (Font Awesome or Custom Fonts or Json File Extensions Doesn’t Work When Deployed on Windows)”

Snippet — Custom Fonts Fix

June 4, 2014

css3_logoFont embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended.

Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.

But what about earlier browsers?

Continue reading “Snippet — Custom Fonts Fix”

Single Page Apps – Writing a LoDash/Underscore Plugin for SammyJS

May 30, 2014

Sammy.jsAlthough SammyJS is a router that provides you with file loading of data and templates. You load templates and data using Sammy’s plugins.

In this tutorial, you will learn how you can use sammy.load to load JSON data, and then use LoDash (or Underscore) to _.find() to retrieve the item based on the value provided in the sammy route. And you will combine the template and data using a custom Sammy plugin.

Why LoDash?

LoDash or Underscore provide great methods for working with collections and arrays. There are subtle differences in these two libraries. But for this tutorial, they provide the same functionality.

Use these libraries to “slice and dice” your data. In the case of this tutorial, you will use _.find(). In your real life applications, there will be more complex ways of manipulating your data, that LoDash can provide.

LoDash includes _.template(). The template method compiles a set of HTML code and turns it into JavaScript. The templates can include _ and complex JavaScript functions.

Continue reading “Single Page Apps – Writing a LoDash/Underscore Plugin for SammyJS”

Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

May 27, 2014

Sammy.jsWhile I was trying out Sammy.js with Require.js I kept getting several errors, among them:

  • jQuery is not defined
  • Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery.fn.init( selector, context, rootjQuery ); } has no method ‘sammy’

Here’s a code sample that shows how you can get the two to work together.

Continue reading “Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS”

Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache

May 8, 2014

6327_image_58FAEDFAIn the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.

It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.

In this code example, you will see how to use jQuery Promises to:

  • Load some JSON data
  • Load a Mustache template
  • Build your own deferred object for your own long-running function

Then when all three are accomplished, you’ll use the jQuery $.when() function to render the data.

For this example, you will need to have jQuery and Mustache loaded in your Scripts folder. Continue reading “Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache”

Object JavaScript – Promises By Integrating Q with jQuery

April 21, 2014

6327_image_58FAEDFAAs you have seen in previous posts, a promise in JavaScript represents the result of a task, which may or may not have completed yet. Or in simpler words, what to expect for a JavaScript call.

Q was designed to provide a robust way to provide you ways to write asynchronous code cleanly.

You can integrate the robustness of Q with jQuery promises.

Continue reading “Object JavaScript – Promises By Integrating Q with jQuery”

Object JavaScript – Declaring Globals inside a ‘use strict’ block

April 5, 2014

10063_580983808600819_401360548_nAs you learned in Scope, Namespaces, ‘use strict’, it’s considered good practice to use a self-invoking function to wrap strict mode compliant code, often called the strict mode pragma. 

(function(){ 
  "use strict"; 
    // Strict code here
}());

But how do you declare a global?

Continue reading “Object JavaScript – Declaring Globals inside a ‘use strict’ block”