Tag

jQuery Archives - Falafel Software Blog

sitefinity-feather-designer-preload-message

Sitefinity Feather Designer Tip: Updating Fields Programatically

By | AngularJS, Sitefinity | 2 Comments

I recently needed to create a custom designer for a Sitefinity MVC Widget that would allow a property to be filled in programatically (such as clicking an option in a list).  Populating the field was simple enough using jQuery, and here is a very simple example demonstrating the desired behavior:

Clicking the button does indeed did populate the message property: However, when I saved the changes, the output of the widget message property was still blank: It turns out that this makes sense, because the widget designer is using Angular JS to bind its properties back to the widget, and…

Read More

Extending Kendo UI Editor Functionality in Sitefinity

By | C#, JavaScript, Kendo UI, Sitefinity | One Comment

In my previous post I detailed a feature where users can upload files to the Sitefinity Document Library asynchronously. However, the interface for doing so was a bit basic. There was an HTML file input that automatically uploaded the selected file immediately. It worked, but the user wasn’t left with much to do with the link that was returned. Extending Kendo UI Editor functionality, however, can be used to make the return value more useful and make the whole user experience much better. This post will show you how to take the feature and add it to the set of…

Read More

How to Upload Files to your Sitefinity Document Library Asynchronously

By | .NET, ASP.NET, C#, JavaScript, Sitefinity, Web API | 2 Comments

Sometimes, it is necessary for users of your site to be able to upload files to Document Libraries in an asynchronous manner. They could be creating user-generated content and require a space to upload a file to reference in their content, for instance. Using some JavaScript and an ASP.NET WebAPI controller, we can accomplish this fairly simply. The HTML The first thing we’ll need is an input that allows users to select a file. This’ll be a simple HTML input the “file” type. You can put this HTML (along with the associated JavaScript) anywhere on the page, either via Content…

Read More

Three steps to use jQuery UI in ASP.NET MVC 5

By | MVC | 19 Comments

Many developers struggle to work with jQuery UI in an ASP.NET MVC application. In this post, I will show you three steps required to start working with jQuery UI in an ASP.NET MVC application. At the end of the post we will take a look at working with the autocomplete widget. The following three steps will let you work with jQuery UI in an ASP.NET MVC application: Step 1: Add the jQuery UI Reference Add the jQuery UI reference into the project using the NuGet manager. Once this is done, you should find the reference added in the Content folder…

Read More

Fading Item Visibility with a Kendo UI Binding

By | JavaScript, Kendo UI, MVVM, Web | 2 Comments

Kendo UI comes with a nice built-in bindings if you’re using the MVVM-style bindings (which is always my recommendation over purely procedural coding). One commonly used binding that comes pre-packaged with Kendo UI is the visibility binding which actually changes the CSS display attribute, not the visibility attribute–Adam has a nice blog post about adding another custom binding that changes the visibility attribute instead. I often find that having UI elements suddenly disappear can create a bad user experience, especially if it causes the way the page lays out at all. Instead of making something appear or disappear suddenly, I like to fade…

Read More

HTTP GET array param to ASP.NET MVC with Kendo DataSource

By | .NET, ASP.NET, JavaScript, Kendo UI, MVC | No Comments

This post is inspired by a recent conversation with one of my colleagues here. He had the following requirements: ASP.NET MVC controller (not Web API) Kendo DataSource reading with HTTP GET Controller action accepts a list of values So, something like this:

This is an awkward little corner case. Change any one of the requirements and everything will work just fine. Fresh out of the box, Web API understands sending multiple values in the query string (at least, with the right controller action method signature). MVC controllers understand arrays if they’re posted in the body of the request,…

Read More

Promise To Use jQuery AJAX Correctly?

By | JavaScript | One Comment

Callbacks are the cornerstone of JavaScript since it is single-threaded in nature. This can quickly turn into spaghetti code when handling multiple, dependent AJAX calls. Enter Promises Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like AJAX. So now instead of using callbacks like this: $.ajax({     url: ‘/data/people.json’,     dataType: ‘json’,     success: function (resp) {         console.log(resp);     },     fail: function (err) {         alert(‘error’);     } }); Now you chain the responses using “done” and “fail” like this: $.ajax({     url: ‘/data/people.json’,     dataType: ‘json’ }).done(function (resp) {     console.log(resp); }).fail(function (err) {     alert(‘error’); }); It really gets…

Read More

Falafel Software Launches Kendo UI Training

By | News | No Comments

Falafel Software launches two new Kendo UI training courses to teach developers how to build modern web and mobile applications with Telerik’s HTML5 and JavaScript framework. Capitola, CA  September 23rd, 2013 – Falafel Software is pleased to announce the launch of two new training courses that will teach developers how to deliver modern web and mobile applications with Telerik’s Kendo UI framework. Each 4-hour course is conducted online with a live instructor; with one course focusing on building web applications for modern desktop browsers and the other focusing on building cross platform mobile applications. Telerik’s Kendo UI framework bundles everything…

Read More

Types of Objects in Modern JavaScript Development

By | Uncategorized | One Comment

Writing modern JavaScript typically means using JQuery and the miriad libraries that are built on top of it. If you transition to this new paradigm  from the old one of programming directly against the DOM (document object model) objects, it can be especially confusing. In this blog post, I’d like to show you some different types of objects you may encounter while doing modern JavaScript development. This will include DOM objects and a couple of modern JS libraries–JQuery and Kendo UI. The DOM The Document Object Model (DOM) is a cross-platform convention for interacting with objects in HTML documents. (adapted…

Read More

Creating a “Back to Top” animation with jQuery

By | Uncategorized | No Comments

Today I am going to show you a simple way to bring a viewer to your web site back to the top of a page, with an animation, using jQuery. You can download the source files, here. To start make sure your page is loading jQuery, you can do this via a local file or use one of many hosted jQuery files. In this example we are linking to a file hosted by jQuery.com. <script src=”http://code.jquery.com/jquery-latest.js”></script> The second piece of code you will need is a link with a little bit of JavaScript in it, shown below: You can choose…

Read More

How to avoid loading jQuery twice with RequireJS

By | Uncategorized | One Comment

When working with existing sites or content management systems, you have little say on where and when jQuery is loaded. To complicate matters, some pages may have jQuery auto-loaded, and others may not (yay for performance boosts, nay for client-side plugins). Do you bite the bullet and write unmanageable scripts? Or do you believe in RequireJS and dodge the bullet matrix-style? Let me show you how. With RequireJS, you can asynchronously load JavaScript files when needed. For example, you can write a simple JavaScript module that depends on jQuery like this: require([    ‘jquery’ ], function ($) {    $(‘body’).append(‘<h1>Added by RequireJS module</h1>’);        });…

Read More

Taming Sitefinity’s Navigation Control

By | Uncategorized | No Comments

Navigation is one of the most important functions in any CMS. It is the doors you scatter throughout your site so your visitors can get around. It is no wonder there is an entire eco-system of menus… drop downs, horizontals, verticals, responsive design, tabs, panelbar, tree-view, content slide-outs, and the list keeps growing. This is one the most common requests for any web designer or developer. Just search the Sitefinity forums and you will see 🙂 The problem with using the Sitefinity navigation widget is that you have little control over the HTML that is rendered for the menu. See…

Read More

Building Single Page Applications with CanJS and RequireJS

By | JavaScript, MVC | 3 Comments

The web users of today expect a modern experience that only a single page application can deliver. Page refreshes are a thing of the past. Waiting for anything longer than 2 seconds without a “cool effect” is not acceptable. Responsive design for tablets and smartphones should just work. These demands of the new era have spawned new ways to develop JavaScript applications. For modern, scalable, and extensible JavaScript applications, two techniques are on the forefront: MVC patterns and AMD design. For this demo, we will be using RequireJS for AMD modular design and CanJS for MVC. By the way, I…

Read More

Sending Request Headers via jQuery AJAX

By | JavaScript, Web | 2 Comments

Ever wanted to send request headers from jQuery instead of the “code-behind”? You can easily tweak the ajaxSetup object like this: $.ajaxSetup({     beforeSend: function(xhr) {         xhr.setRequestHeader(‘X-Parse-Application-Id’, ‘QIDkel*****SR2c3’);         xhr.setRequestHeader(‘X-Parse-REST-API-Key’, ‘mbm311*****d0X2N’);     } });    $.get(‘https://api.parse.com/1/classes/TestObject/JMyZodJs2B’, function (data) {     console.log(data); }); This is especially important when you need to be authenticated to use a service or API. Think of assigning server-signed auth tokens (that you generate on your own servers) to client-side apps. Now with every jQuery AJAX call, tokens get sent back to the server and from that point on you are an “authenticated user”. To lock it down even further to a…

Read More

Kendo UI for Web Designers… and client side programmers and server side programmers

By | JavaScript, MVC, Telerik, Web | No Comments

Telerik’s Kendo UI controls are efficient, client-side controls for web pages that are built on top of JavaScript/jQuery. The control suite includes all the usual suspects, i.e. grid, calendar, drop down lists, navigation controls (tab strip, panel bar, menu), tree views and windows. You may be a web designer, JavaScript/jQuery programmer or perhaps happier programming on the server-side. Stay tuned, because each development style has its own approach for creating Kendo UI controls. Web Designers Let’s say you have a web page with existing content. You’d like to use Kendo UI controls in place of the HTML but don’t want to dive deep into…

Read More

Adding Your Own Scripts and Style Sheets to MVC 4 Bundles

By | JavaScript, MVC, Telerik | One Comment

MVC 4 bundles and minifies scripts and style sheets for best performance.  This clean framework has some great selling points: Automatically uses minified versions when you’re running in production but leaves everything uncompressed and easily readable when you’re debugging. Reduces the markup needed to declare JavaScript and style files. Yet you can still control the order that files load in. Allows bundling by using wild cards and variables. This allows you to load all the “Kendo” JavaScript files, for example. A new MVC 4 app will bundle scripts and styles for jQuery, Knockout and Modernizr automatically, but you can create…

Read More

Learn JavaScript With New Book From Falafel Software

By | News | No Comments

JavaScript has been turning up everywhere. With nearly every desktop and mobile web browser on the planet coming equipped with a JavaScript engine, the language has become the de facto standard for client side code. There is just no better way to guarantee your audience can access the full feature set of your application. Although JavaScript has typically been regarded as a client side technology, in-roads have been made in other areas in recent years. Frameworks like node.js are powering major server side applications and JavaScript can even be found querying some of the major NoSQL databases. Here at Falafel…

Read More

Polling AJAX Requests in JavaScript

By | Uncategorized | One Comment

Polling AJAX is tricky. If the next interval triggers before the last AJAX request is complete, your app is doomed!! This creates a domino effect where your queue for requests fill up faster then it can complete. Your queue will NEVER finish… similar to an infinite loop. In light of this, you should never put AJAX into a setInterval function. A clean, more robust option is this: (function poll() {     setTimeout(function () {         $.ajax({             type: ‘POST’,             dataType: ‘json’,             url: ‘http://somewhere.com/rest/123’,             success: function (data) {                 MyNamespace.myFunction(data); //DO ANY PROCESS HERE             },             complete: poll         });     }, 5000); })();   Notice the “complete”…

Read More

Building an HTML5 Mobile App using jQuery Mobile and ASP.NET MVC

By | Mobile | One Comment

The mobile revolution has created a plethora of new platforms and languages. It is rare to see old technologies successfully reaching new grounds together. A good example of this is .NET MVC and jQuery Mobile. The blends of Razor, HTML, CSS, and jQuery make mobile a very familiar territory, a package that makes things quick, easy, and beautiful! Setup the Project The first thing you want to do is fire up Visual Studio and create a new MVC 3 Internet Application. This will give you membership, templates, and sample content to your website with a single click. Our goal from…

Read More

My Take on Microsoft //Build 2011

By | Microsoft | No Comments

It seems that Microsoft has positioned itself in the Google-Apple race. Now with Microsoft using Nokia hardware and Google using Motorola hardware, Apple has some serious competition in the future. It worked out that Steve Jobs quit while he was ahead; those are some monsters to be pitted against. So these are the mega-enterprises that will be revolving around “devices and the cloud” for at least another decade (who knows?), but what does this mean for the web? //Build has pulled the curtains on pushing .NET to a second-class citizen in the future. At best, .NET will turn into a…

Read More

Back to the Basics with JavaScript

By | Web | One Comment

In case you haven’t heard.. JAVASCRIPT IS MAKING A COME BACK!! And it is not the same JavaScript you fiddled around with in the pre-AJAX era. It has become reborn with the help of HTML5, mobile, and even Windows 8 (see Create your first Metro style app using JavaScript). Understanding JavaScript is becoming essential and can no longer be dismissed as a “weakly-typed, toy language with no compilation checks,” but instead as a versatile, dynamic, cross-platform language. Before jumping into code and learning JavaScript, I want to give some background of its purpose. It is important to know that HTML, CSS, and…

Read More