Tagged: jQuery

Object JavaScript – Code Walkthrough of a jQuery UI Widget

imageIn the last post, Building Stateful jQuery UI Plugin Using Widget Factory, you were introduced to the working structure of jQuery UI Widgets. You learned that it uses the factory pattern is a way to generate different objects with a common interface. And that it Widget Factory adds features to jQuery plug-in.

jQuery UI Widget Factory is under jQuery UI, but you can use it separately for your own widgets. In this post, you will learn the steps you can take to build your own widget. This posts walks through an implementation of the filterable dropdown from Adam J. Sontag’s and Corey Frang’s post: The jQuery UI Widget Factory WAT? 

My motivation in this post is to show what goes where when you are designing your widgets. And provide some direction in the steps you can take when building a widget from scratch.

Continue reading

Object JavaScript – Building Stateful jQuery UI Plugin Using Widget Factory

imageIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery UI widget.

You will extend the jQuery library with custom UI code and then use it on a page. The initial plug-in will be trivial to demonstrate the jQuery Widget Factory pattern. You will provide properties that you can change to change the look of your widget and you will provide some methods that will respond to user input.

In this post example, you will learn how to create a simple click counter. Click a button, increase the count. The idea is to show you the steps to create a jQuery UI Widget.

The Widget Factory system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points.

Continue reading

Object JavaScript – Building a Reusable Stateless jQuery Plugin

6327_image_58FAEDFAIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery Plugin.

There are times where you will want to reuse code that performs a series of operations on a selection.

For example, you may want to embed information a span element and then have that information displayed in a references section near the end of the document. In this case, the jQuery plugin is stateless.

In the next post, Building Stateful jQuery UI Plugin Using Widget Factory, you will see how to create a stateful jQuery plugin using jQuery Widget. And you will see how the widget is a better solution for plugins that require user interaction, because the Widget factory helps you maintain state.

Continue reading

Object JavaScript – ECMAScript 6 Code Preview

imageECMAScript 6 specification and implementation is underway and promises to bring many of the features that you’ve learned about in the posts on Object JavaScript.

This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:

  • Scope
  • Arrow Functions and Lexical this
  • Default Function Parameters
  • Classes
  • Inheritance
  • Modules
  • for-of
  • Arrow functions
  • Promises

I won’t come close to covering all the features. But you can get an idea of how ECMAScript 6 works to support the idea of Object JavaScript. Look to the references and to the specification for information about: Parameter handling, multiple return values, collections, destructuring, rest parameters & spread operator, iterators, array comprehension, and more.

Special thanks to Axel Rauschmayer for many of the snippets.

Continue reading

Snippet – Checking Internet Connection, No More Hanging App

Messaging-Online-iconWhen you are writing your single page application (SPA) may find that you need to check your connection. The idea is that you might have one set of logic for your connected app and another for when you are disconnected.

In previous posts, AppCache for Offline Apps and Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache, you learned that your Web app did not have to be online to be run. In fact, when building HTML apps for mobile devices, you are running without a connection.

So how do you check? How do you know when you can upload and download new information from the Web?

Many of the comments on StackOverflow have to do with the connection hanging. The following snippets help you work around the issue.

Continue reading

Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash

image6[1]RequireJS is a JavaScript file and module loader. In Getting Started with Modules Using RequireJS, you have learned a lot about how you can use it to load your dependencies using define() and require().

In this code snippet, you will learn how you can load the dependencies, initialize a module with values that you pass in, and then make public some of the methods.

And you will see how to put files in folders to help keep identify which modules you write in your app and which modules are from third parties.

Continue reading

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

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

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

imageWhen you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.

In this Snippet, you will learn how to:

  • Load JSON data from a getJSON call to our server.
  • Show and hide a spinning indicator inside a div.
  • Bind the incoming data to a view model object.
  • Use the view model to populate an external template.

image

Then once the page is loaded, it will display the data based on an external template.

image

And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.

Continue reading

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

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

Single Page App – Separate UI from Model Using Publish, Subscribe Pattern using AmplifyJS

image8AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources.

Your application may need more sophisticated control than is offered in Knockout, which provides for automatic updates in your view model. Knockout provides the observable pattern. But in the pattern described here Amplify’s publish/subscribe you do the publishing and the subscription.

In this post, you’ll learn the basics of how you can implement publish/subscribe pattern on the client using Amplify.

Continue reading

Snippet – Fixing Errors When Using jQuery, Sammy, RequireJS

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

Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash

image6[1]In the previous post, you learned how you can use RequireJS in projects to define your own loading order, and how to build your own modules.

This tutorial go into depth on how to use RequireJS for AMD (Asynchronous Module Definition) modules. You will write we can write our own modules and load them with RequireJS.

In this tutorial you will build a small app that uses LoDash and jQuery. If you want to use Underscore, just substitute Underscore for the LoDash references.

Although you can use a bunch of <script> tags to load the libraries, your page is blocked during the load. And you could minify them and maintain the order in your own code. But with RequireJS, you include the RequireJS source and let it load the files.

Continue reading

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

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

Object JavaScript – External Templates Using Mustache, jQuery

mustachelogo4As you have seen in  Templates Rendering JSON Using Mustache, jQuery, you can put reusable HTML into a template and then have that template render your data. You are separating the data and providing one or more ways it can be displayed inside of a page.

This post extends what you have learned about Mustache and gives an example on how you can put your template into an external file. Once in an external file, you can use it across your site whenever you need data displayed in a particular way.

Continue reading

Object JavaScript – Templates Rendering JSON Using Mustache, jQuery

mustachelogo

In our previous posts, you see how you can create templates and load them asynchronously using Knockout. But not everyone needs Knockout’s functionality. Maybe you just want to get some data and display it using a template.

Mustache is a library that allows you to read in JSON formatted data and display it using templates you design.

Mustache can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.

If you know JSON and a bit of JavaScript, you can implement Mustache. It is available for Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.

In this tutorial, you’ll learn how to use Mustache with JavaScript to create HTML page.

Mustache is logic-less because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

Mustache provides the same functionality to libraries like underscore.js, handlebars.js, and dust.js.

Continue reading