jTemplates - template engine in JavaScript Getting Started With jQuery QUnit for Client-Side Javascript Tes First of all, I’m assuming you’re already using jQuery. If not, you should be :) QUnit may help you for non-jQuery testing, but it’ll work better with jQuery. Second, you should start by downloading and setting up QUnit (from this link). QUnit consists of a single JS file (testrunner.js) and a CSS file (testsuite.css). Third, I recommend grabbing a patched testrunner.js from here (Ticket 3215). To start testing, you’ll need to start by creating an HTML page (MyFooTests.htm, for example). If you save that HTML and open it in a browser, you should see something to the effect of: Modules and Tests QUnit has the concept of “modules” and “tests.” Let’s create our first module and first test case. First, near the bottom of the HTML, before the closing </body> tag, add a div with an id “testDiv”: Then, up higher, where the “TODO” is in our JavaScript, add a new test, like so: Which should yield two successes: For me, QUnit opened up the possibility for serious TDD with client-side JavaScript.
5 Ways to Make Ajax Calls with jQuery There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we'll line them up and make a comparison. Additionally. we'll review how to inspect these AJAX calls with Firebug as well. This section is for those who have no idea what AJAX is. If you don't fall into this category, feel free to skip to the next section. In Gmail, switch from inbox to draft. The key to AJAX's concept is "asynchronous". Now we should know what AJAX actually is. For static content, we may want the response cached. The most common use of AJAX is for loading HTML from a remote location and injecting it into the DOM. Click on the first button named "load()." Below is the JavaScript code for this effect: $.ajaxSetup forces the browser NOT to cache AJAX calls.After the button is clicked, it takes a little while before the new HTML is loaded. Now, let's explore more details of the request with Firebug:
jQuery Form Serialization without ASP.NET ViewState If you're doing AJAX callbacks to the server with POST data from ASP.NET pages you might be inclined to do something like this: var post = $("#form1").serialize(); $.post("MethodCallback.aspx?Callback=ListPanel", post, function(result) { alert(result) }); This works fine, but it will pick up all of your ViewState and EventValidation making the post back to the server a heck of a lot bigger than it should be especially if you have a page where ViewState is heavily used. Fortunately it's quite easy to exclude ViewState et al. with code like this: var res = $("#form1") .find("input,textarea,select,hidden") .not("#__VIEWSTATE,#__EVENTVALIDATION") .serialize(); $.post("MethodCallback.aspx? This is a little more verbose, but necessary in order to be able to individually reference each of the child input elements. The .not() function basically filters the result set of input elements and so doesn't send up ViewState and Event validation. which then allows you to do: var poststring = $.param(post);
3 mistakes to avoid when using jQuery with ASP.NET AJAX - Encosia Note: This post is part of a long-running series of posts covering the union of jQuery and ASP.NET: jQuery for the ASP.NET Developer. Topics in this series range all the way from using jQuery to enhance UpdatePanels to using jQuery up to completely manage rendering and interaction in the browser with ASP.NET only acting as a backend API. If the post you're viewing now is something that interests you, be sure to check out the rest of the posts in this series. Over the past few weeks, I think I have definitely embodied Jeff Atwood‘s claim that we’re all amateurs, learning together. On the bright side, your great feedback in both posts’ comments has reinforced the fact that some of the best content on my blog is the part that you write. In this post, I’m going to detail three of the problems that were discovered as a result of those previous two posts: Finally, I’ll suggest what I now believe to be a best practice usage, taking all of these issues into account. Length Required End result?
CoDe Magazine - Article: jQuery Puts the Fun Back into Browser S Ok, I admit it. For many, many years I hated JavaScript. I hated writing JavaScript code, and even more I hated the pain that goes along with dealing with different browsers using reams of script code. Today I still hate the same JavaScript problems as they haven’t gone away, but thanks to a recently gained better understanding of JavaScript and a small JavaScript client library called jQuery, I no longer dread the days when I have to write client-centric AJAX or UI script code. Looking back, it was not until the AJAX wave started forming a few years back that I even considered getting more seriously interested in JavaScript. But even knowing JavaScript reasonably well is still not enough-these days it’d be silly to work with raw JavaScript for DOM programming and not use some sort of library to help bridge the browser-specific quirks and provide utility functionality to make it easier to work in a browser-agnostic environment. Key Features of jQuery Why jQuery? The jQuery API
Using jQuery to directly call ASP.NET AJAX page methods - Encosia Note: This post is part of a long-running series of posts covering the union of jQuery and ASP.NET: jQuery for the ASP.NET Developer. Topics in this series range all the way from using jQuery to enhance UpdatePanels to using jQuery up to completely manage rendering and interaction in the browser with ASP.NET only acting as a backend API. If the post you're viewing now is something that interests you, be sure to check out the rest of the posts in this series. When it comes to lightweight client-side communication, I’ve noticed that many of you prefer ASP.NET AJAX’s page methods to full ASMX web services. Given their popularity, I’d like to give them their due attention. In this post, I will clarify exactly what is and isn’t necessary in order to use page methods. Creating a page method for testing purposes. Writing a page method is easy. This will be our page method for the example: What about the ScriptManager and EnablePageMethods? Luckily, that property is a bit of a misnomer. Conclusion
The Website of the Freelancer Koller Jürgen » The ultimate jQuer jQuery is definitely my favourite Javascript Library and this ultimate jQuery Plugin List is for all other jQuery Lovers out there. At the moment there are about 240+ awesome Plugins in the List I'm sure that there are a lot of other plugins out there - so if you knew one that's not in the list please post a comment and i will add it. Thanks! File upload Ajax File UploadjQUploaderMultiple File Upload pluginjQuery File StyleStyling an input type fileProgress Bar Plugin Form Validation jQuery ValidationAuto HelpSimple jQuery form validationjQuery XAV - form validationsjQuery AlphaNumericMasked InputTypeWatch PluginText limiter for form fieldsAjax Username Check with jQuery Form - Select Box stuff jQuery ComboboxjQuery controlled dependent (or Cascadign) Select ListMultiple SelectsSelect box manipulationSelect Combo PluginjQuery - LinkedSelectAuto-populate multiple select boxesChoose Plugin (Select Replacement) Form Basics, Input Fields, Checkboxes etc. Time, Date and Color Picker Rating Plugins
wiki:retrieving_data With the first release of jqGrid, the only possible way to obtain data was via XML as described in the tutorial above. Later, many people requested the ability to obtain data via JSON, then with an array and finally with 'real' names. After lot of work and with the help of the community we now have a wide range of methods for obtaining data. The related options (in options array) for manipulating different types of data are: datatype: the possible options are xml json jsonp array xmlstring jsonstring script function (…) It is very important to read this chapter, in order to understand how you should work with the data! The default mapping for XML data is as follows: If your server can provide data in this structure, you need to do nothing more; but if not, there is a way (several ways) to handle the data you are given. The default mapping for JSON data is as follows: will cause jqGrid to search in the XML data for an 'amt' tag (when the repeatitems option is set to false. XML Data root element
jQuery for JavaScript programmers When jQuery came out back in January 2006, my first impression was that it was a cute hack. Basing everything around CSS selectors was a neat idea (see getElementsBySelector) but the chaining stuff looked like a bit of a gimmick and the library as a whole didn't look like it would cover all of the bases. I wrote jQuery off as a passing fad. Over the past few months it's become clear to me exactly how wrong I was. jQuery is an exceptionally clever piece of engineering. Most introductions to jQuery focus on designers and inexperienced developers. Namespacing The key to writing good, reusable JavaScript is to zealously manage your namespace. jQuery introduces just one symbol to the global namespace: the jQuery function/object. What about language enhancements? jQuery provides a number of language enhancement functions, but each one is made available as a property of the jQuery object: jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge and jQuery.trim. The infamous $ function
jQuery Intellisense in VS 2008 Last month I blogged about how Microsoft is extending support for jQuery. Over the last few weeks we've been working with the jQuery team to add great jQuery intellisense support within Visual Studio 2008 and Visual Web Developer 2008 Express (which is free). This is now available to download and use. Steps to Enable jQuery Intellisense in VS 2008 To enable intellisense completion for jQuery within VS you'll want to follow three steps: Step 1: Install VS 2008 SP1 VS 2008 SP1 adds richer JavaScript intellisense support to Visual Studio, and adds code completion support for a broad range of JavaScript libraries. You can download VS 2008 SP1 and Visual Web Developer 2008 Express SP1 here. Step 2: Install VS 2008 Patch KB958502 to Support "-vsdoc.js" Intellisense Files Step 3: Download the jQuery-vsdoc.js file We've worked with the jQuery team to put together a jQuery-vsdoc.js file that provides help comments and support for JavaScript intellisense on chained jQuery selector methods. Scott
Use jQuery - Blog - Create a unique Gallery by using z-index and jQuery In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures. Preparing the xHTML, CSS and Pictures We have the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures. We can add as many pictures as we want because our script will pick them up dynamically. If the class names of the DIV’s don’t look fimilar to you, they are from the 960 Grid System and just there to positioning the blocks. The pictures container has relative position (under the heading) and a height of one picture. Pictures The principle of changing z-index The Code function swapFirstLast(isFirst) {