jRating

jRating is flexible and easy to work with AJAX based star rating system.
It allows customization and setup of all elements visitor sees on the screen. Free to use and Open Source.
Live demo site with many implementation examples lives here.

jQuery Raty

We featured jQuery Raty plugin on Enfew two years ago and it remains as one of the most liked 3rd party rating plugins for jQuery out there. It has good support from developer community on GitHub (456 likes!).
Worth to give it a go if you are looking for time proven solution.

Colour rating system

Colorful rating system created by Marco Kuiper  from Macrofolio.  This system is using jQuery colour plugin  and CSS3.
Even if its not released as stand alone jQuery plugin we think this example is very nice and can be great help for your projects. It makes web rating look nice!

 jQuery Star Rating

?rfan Durmu? has created this jQuery plugin for adding star ratings to your web projects. On the plugins home you’ll find his clear instructions on how to implement and make best use of it.

jQuery Bar Rating

Great bar rating plugin for jQuery created by Kazik (Netboy).
It takes much different approach on look and feel for rating elements within web projects which makes them more user friendly and innovative. Personally, we are loving it and might even use in our site redesign project!
Check the plugin code on GitHub and example implementations on demo site.

Mobile Star ratings with Mobiscroll

And here is something for your mobile application projects with jQuery rating systems in them.
Mobiscroll is an open source and free to use JavaScript library which works well with jQuery, jQuery Mobile and some other JavaScript frameworks. It allows you to build elements and components for mobile applications with great look and feel. Give it a try and see if this is something you have been looking for.

The post Top jQuery rating plugins you should use in projects appeared first on ENFEW.

1. Uploadify – JQuery File Upload Plugin Script

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed. After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community. In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen. After word got out, the popularity of the plug-in spawned the need for a dedicated site. Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.

2. jQuery.upload – A simple ajax file upload plugin

jQuery upload is jQuery plug-in to upload files by the Ajax style. It is possible to upload files simply and easily in the same way as jQuery.post and the jQuery.get.

3. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

4. SWFUpload jQuery Plugin

• Native jQuery event handling using .bind()
• Ability to assign multiple callbacks per event
• Makes multiple SWFUpload instances on a single page easier to manage
• Ability to completely separate SWFUpload object from UI code (callbacks)
• Assign event handlers before SWFUpload instance is even created!
• No global functions or variables needed!
• A nice, chainable solution!

5. Ajax Upload; A file upload script with progress-bar, drag-and-drop.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

6. jQuery Form Plugin

This page demonstrates the Form Plugin’s file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.

7. Really simple jQuery Ajax File Uploader plugin.

This jQuery plugin creates a hidden iframe and sets the form’s target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server’s response from the iframe.

This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.

8. Get User Facebook Albums and Pictures

getFacebookAlbums is a plugin that allows the user to connect on Facebook and choose a picture among his/her own albums. It’s an alternative to the simple upload form the hard drive disk.

9. File Style Plugin for jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

10. jQuery Multiple File Upload Plugin v1.47

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).

11. jQuery File Upload

The maximum file size for uploads in this demo is 5.00 MB (default filesize is unlimited).
Files uploaded in this demo are not publicly accessible and will be deleted after 5-10 minutes.
To be able to view your uploaded files Cookies have to be enabled.

12. Plupload

Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

The post Best jQuery File Upload Plugins appeared first on ENFEW.

In this tutorial we are going to create an AJAX-driven shopping cart. All the products are going to be stored in a MySQL database, with PHP showing and processing the data.

jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process.

So go ahead, download the demo files and start reading.

2. Building a Drag-and-Drop Shopping Cart with AJAX by Sys-con

The rise of AJAX over the past several months has taken over the development world and breathed new life into the Web. Although these techniques have been possible for many years now, the maturity of Web standards like XHTML and CSS now make it a viable alternative that will be viewable by all but the oldest browsers.

It’s also been possible to accomplish many of the same things using Flex or Flash, but the development cycle with those applications is typically more involved and the overhead often not justified.

We’re going to harness the power of the Scipt.aculo.us JavaScript library to provide our interaction. As their Web site states, this library “provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style.” We’re also going to utilize the <CF_SRS> library to handle the actual AJAX data piping to our application. Both of these libraries are free for all to use, and they’re easier to integrate than you would think.

3. Build An AJAX Powered Shopping Cart

The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts. The back end code in this tutorial acts as scaffolding for us to build the AJAX functionality, however, it can be built off of to meet your own site’s requirements. In the last section, we’ll discuss some possible next steps to implementing this in your own websites.

The other thing to note is that this tutorial will not explain all the details. A firm grasp of HTML, CSS, and some basic PHP is expected. By basic I mean variables, arrays, control structures, and basic OOP. Some knowledge of Javascript is a plus. We’ll walk through and break down the trickier bits of PHP and Javascript, but will gloss over the basic stuff like CSS styling. Links to documentation and other relevant resources will be sprinkled throughout wherever relevant.

The final thing to note is that the order codes (or product codes) used in this tutorial are completely arbitrary.

4. Ajax Shopping Cart: Create a Stylish Shopping Cart Using JQuery and PHP by 99points

You have seen many Ajax and JQuery based shopping carts examples over internet. I have created here a JQuery based shopping cart which doesn’t call any Ajax request but save all shopping into a form and in the end we just simple submit that form where ever we want to be submitted. I used jQuery and CSS to create this stylish Cart. Hope you will like it.

5. How to Build a Shopping Cart using CodeIgniter and jQuery

In this tutorial, I am using the latest stable version of CodeIgniter, V1.7.2. This tutorial requires you to have some modest knowledge of CodeIgniter and the MVC pattern. The following tutorials will get you started right away!

The post 5 Tutorials On “How to Create Ajax Based Shopping Cart” appeared first on ENFEW.

1. AJAX-ed Todo List With PHP, MySQL & jQuery by TutorialZine

In this tutorial we are making a simple AJAX-ed Todo List App, with PHP, MySQL and jQuery. In the process we are going to demonstrate PHP’s OOP capabilities, play with jQuery UI and implement some nice AJAX functionality.

For a better understanding of the steps of this tutorial, you an go ahead and download the demo archive available from the button above.

2. Tasklist Tutorial by Mike Amundsen

In this tutorial you’ll learn how to use the exyus engine to build a simple task list web application. This also covers the process of defining HTTP resources using the XmlFileResource base class that supports basic REST constraints. In addition, you’ll learn how to define XSL and XSD documents to handle mime-types and PUT/POST validations for the resource. Finally, you’ll see examples of simple client scripting and CSS to add client-side functionality and styling to the web app.

You can test the online version of the TaskList application.

3. How to Code a Fun To-Do List With PHP and AJAX [Premium Tut]

For this week’s Premium tutorial, we’ll be working with many different technologies. Ultimately, we’ll be building a to-do list that will allow you, or your user, to create, update, and delete items asynchronously. To accomplish our task, we’ll be using PHP and jQuery’s AJAX capabilities. I think you’ll find that it’s not quite as hard as you might initially think. I’ll show you exactly how!
With an in depth tutorial, and 80 minute screencast, this one is not to be missed!

4. Ajax Todo List system with Codeigniter

I am going to write how to create an ajax message/todo system with Codeigniter. All the following features will be done with Ajax. And the message will be stored in a database.

• There will be Todo list and Completed list loaded with jquery.
• Adding a todo list without page reload.
• Clicking a link in a todo list will change to a completed list.
• The list clicked will slide up and removed. The completed list will fade out and fade in with a new list added from todo list
• There will be the same button in a completed list. This will change the status from complete to todo. It will slide up and removed. Todo list will fade out and in with a list from the completed list.
• Delete button will be added in completed lists. When you click this, it will be removed from the database and it will slide up and removed.

5. PHP + jQuery Todo List

This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX

In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.

The post 5 Tutorials On ‘How To Create Task Managment List In AJAX’ appeared first on ENFEW.

In this post,I’ll show you how to make a fancy username availability checking in ajax and php using jquery.When, you check the the username avaiability a fancy message box will show you the message with a little bit of animation. If you are looking for such kind of effect for checking username availability, then this might be right post for you.

2. AJAX Username Availability Checker Using MooTools 1.2 by DavidWalsh

This post has been updated: Using jQuery or MooTools For Drag, Drop, Sort, Save. The code on this page is no longer best practice.

There a many examples of egregious usages of AJAX out there but every once in a while you find a great usage of AJAX. One great usage is the username availability checker. Why make the user submit their form if you can just use AJAX to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.

3. An AJAX (jQuery) Username Availability Checker with PHP Back-end by bitrepository

Did you notice how many sites have a verification tool for the ‘username’ field when you try to register? Many use the power of AJAX to check if the nickname has already been assigned to an existing member. This short tutorial gives you an idea of how you can make such a feature in the pages of your website. We’ll use JavaScript (JQuery) and PHP.

4. ASP.NET AJAX username availability check

When you have a name as common as mine, you run across the entire gamut of schemes to deal with username availability in membership systems. By availability, of course I mean denial and rejection. Out of all of the ways that I’ve had “Dave” rejected, inline AJAX verification is definitely the least annoying. Wanting to be less-annoying myself, I’ve added the same functionality to my ASP.NET AJAX sites. Let me show you how I did it.

5. Check Username Availability with ASP.NET AJAX

Here is a little trick you can use to spice up your asp.net registration pages. I will use ASP.NET AJAX to inform the user whether the username they have entered is available. Rather than use the UpdatePanel, I will slim down the amount of data going over the wire for each ajax request. I will accomplish this using the PageMethods feature.

This tutorial assumes that you have a working knowledge of how to start an ASP.NET AJAX web application, drop a script manager control onto your form, and use the CreateUser wizard control, or another method of registering users. A little JavaScript knowledge will help too.

6. Using ASP and AJAX to check availability of a username

In this example, I’m showcasing how we can use ASP and AJAX to check for whether a username exists before a user completes a website registration form. When registering to join a community website, such as www.digg.com, users must typically choose a username or handle. Normally such usernames must be unique to the community, and because of this new users often run into the problem of choosing a name that is already in use. A couple common results occur on a typical registration form when a user submits his data:

7. Check username availability and validation using ajax,php

So you are creating a signup form and you want to create a fancy looking username validation Ajax script. I know that looks fancy when you signup for Gmail or Yahoo mailbox, instead these kind of validation are now on every signup form.

The post 7 Tutorials On ‘How To Check Username Availability In Ajax with Php & Asp’ appeared first on ENFEW.

There are a lot of JavaScript Calendars out there, but actually only a few can be very customizable to fit anyone’s need. That’s why we have created a Calendar Component that is very customizable and extendable. You can see our Calendar at work right in this page. There are tons of features in this calendar package.

Features:

• Create any numbers of months per calendar.
• Set the weekend, days off, holidays (dates off), start day of the week.
• Start and end date.
• Multi selection with limits or without.
• Skinnable (using CSS).
• Can have any number of calendars in any page.
• Optimized for best performance.

2. Vista-like Ajax Calendar version 2 by Base86

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

I’d appreciate hearing from you if you’re using this script. Comments and feature requests are more than welcome in one of the calendar articles.

3. JS Calendar (version 2.1) by Dhtmlgoodies

There is also a calendar available in the DHTML Suite for applications package. You can see a demo of it here.

4. dateslider – A sliding date picker build with javascript

This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous, but now combined with the DateJs library.

5. Ajax Availability Calendar

The Ajax Availability Calendar is a php script designed to show availability of whatever you might need it for (eg. holiday cottage, hotel rooms etc.). Free to use on your website or application and is currently being used by hundreds, if not thousands, of websites around the world.

Features

• Open Source and FREE to use in your site or aplication
• Unlimited Items (holiday homes, apartments etc.).
• Unlimited Languages.
• Unlimited Booking States (available, booked am, Special Offer etc.).
• 100% administrable ( see admin panel ).
• Multiple administration users.
• Styled with CSS – easy to adapt to any design.
• Uses AJAX to change months viewed without reloading the page.
• Simple integration with booking form.
• Simple installation script to help with the calendar setup.
• All javascript handled by the Mootools library.

6. AJAX Calendar [Wordpress Plugin]

AJAX Calendar is a plugin that will display an AJAXified WordPress calendar. This enhances the functionality of the standard calendar by:

• Allowing the asynchronous navigation of months, without updating the page
• Added to blog as a widget

7. Creating an AJAX-Enabled Calendar Control With ASP.net [Tutorial]

Go to any travel or event booking website and you’ll find the same user interface for collecting date information: the Calendar. Providing such an interface in an ASP.NET application is a breeze, thanks to the built-in Calendar Web control. There are two downsides to ASP.NET’s Calendar control: first, it is not very useful when selecting dates far into the future or past, as you can only navigate to the next or previous month; and, second, the Calendar does not use AJAX techniques, so each click, be it selecting a date or moving to the next or previous month, requires a full postback.

8. Quick Calendar Using AJAX and PHP [Tutorial]

Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using WordPress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work.

—

If you know any good plugins or tutorials of Ajax Calendars, Then please let us know.

The post 8 Best Ajax Calenders & Event Mangment Scripts appeared first on ENFEW.

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.

It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

2.  Ajax-Driven JavaScript ComboBox with Autocomplete

dhtmlxCombo is a cross-browser JavaScript combobox with an autocomplete feature. It extends basic select box functionality and provides the ability to display suggestions while a user types in the text field. dhtmlxCombo can be converted from existing instances of HTML Select, or populated with JavaScript. With Ajax data loading, it can get the list of values dynamically from the server datasource.

3. Autosuggest / Autocomplete with Ajax v. 2.1.3

The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server.

In the JSON example above a callback function is passed to the autoSuggest instance. It is called when the user selects an entry, and inserts the entry id into a hidden field (visible for this example). In the XML example below supplementary information is being displayed along with the names, in this case an english county.

4. AutoCompleter (v1.1)

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

5. jquery-autocomplete – a jQuery Autocompleter

WANTED: Someone that has the time to clean up the documentation for this project and report inconsistencies with current release. Needs decent JavaScript knowledge as well as knowledge of the autocompleter. I’m available to support, but not to take lead.

6. jQuery Autocomplete Mod

This is modification of Dylan Verheul’s jQuery Autcomplete plug-in.

• Enhancements
• Supports local data array (can now use w/out AJAX).
• Limit dropdown to XX number of results (good for limiting the results to users)
• Autofill pre-populates text box as you type
• New findValue() method can be used to programmatically determine if the value in the box is a valid option. (Useful for verifying the text entered is an existing value option.)
• Dropdown options now correctly re-position themselves on each display (which means they adjust for changing to the DOM)
• Dropdown box defaults to the width of the input field its attached to (you can manually specify a larger width as well)
• Better emulates Windows autocomplete boxes (for example: hitting delete and retyping the same box will now bring back the dropdown menu)

7. jQuery plugin: Autocomplete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

8. Ajax autosuggest/autocomplete from database

It’s hard to find good examples or examples that match everyone’s needs. An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters.

9. Autocomplete at jQuery.com

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

10. Simple AutoComplete JQuery Plugin

The Simple JQuery AutoComplete Plugin allows you to add autocomplete functionality easily in text fields on your site.

It also has resources to bring other data in the autocomplete list, as the id of the element, performing a callback function to store these data in other inputs.

11. Tapestry and AJAX: Autocompleter and InlineEditBox

Summary: Although the term “AJAX” was coined not so long ago, AJAX-like functionality has already been available in Tapestry for quite some time. In Tapestry 4.0 we can use Tacos, a rich and interesting library of custom Tapestry components that includes a number of AJAX-driven components. Tapestry 4.1 has Dojo JavaScript library built into it, so it comes with some core AJAX-enabled components.

12. Scriptaculous Autocomplete

An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It’s very easy to build an autocomplete form using scriptaculous and prototype. You just need one line of javascript.

The post 12 Autocomplete Ajax Plugins & Tutorials appeared first on ENFEW.

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.

2. Ajax (XMLHTTPRequest) Tutorial and Demo

Page update without refresh using Javascript, PHP and XML’s XMLHTTPRequest object (also known as ‘remote scripting’)

In this tutorial we’ll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh. Ajax therefore allows us to build web applications with user interfaces rather more like those of desktop applications, providing a better experience for the user. Ajax tools are becoming increasingly popular, and a list of ajax development projects is also given.

3. AJAX XMLHttpRequest By  W3schools

All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject). The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

4. Ajax – XMLHttpRequest Object By Tizag

This lesson will show you how to use your object to communicate directly with the server!

5. Performing GET and POST requests using Ajax

Instead of using a FORM and requiring the user to explicitly submit it to transmit information back to the server, Ajax lets you perform such requests seamlessly at any time, using data that don’t necessarily come from form elements, then get the result back without refreshing the page. Ok, that’s a mouthful, but again, it all boils down to just two things- performing “GET” and “POST” requests and doing so asynchronously.

6. XMLHttpRequest Example Explanations

XMLHttpRequest is the object that enables the JavaScript code to make asynchronous HTTP server requests. This allows you to initiate HTTP requests and receive responses from the server in the background, without requiring the user to submit the page to the server. This feature, combined with the possibility to manipulate the web page using DOM and CSS, allows you to implement responsive functionality and visual effects backed with live data from the server, without the user experiencing any visual interruptions. This is AJAX.

The XMLHttpRequest object was initially implemented by Microsoft in 1999 as an ActiveX object in Internet Explorer, and eventually became de facto standard for all the browsers, being supported as a native object by all modern web browsers except Internet Explorer 6.

7.  Ajax with PHP using responseXML

I’ll start off with a very basic technique of using Ajax with the responseXML (not responseText). responseXML basically means that the returned values is in an XML format. The other option would be to use responseText which in many cases would be the simplest method. But true Ajax uses XML (as the X in the name suggests).

8. AJAX and XML HTTP Request

Ajax is an Asynchronous JavaScript And XML, it makes an XMLHTTP request to the server in the background. I could say it is extension of Document Object Model (DOM). Microsoft Ajax designed based on JavaScript Object Notation (JSON); classes & their member functions are serialized using JSON Serialization. And AJAX is a combination of DOM, JavaScript, Cascading Style Sheet (CSS) and XML. Look and feel comes from CSS, logics from JavaScript, data from XML and requests from DOM libraries (with JSON).

9. Ajax ModalPopup Extender in Asp.Net GridView Control

The basic idea of this article is to fetch data from the database, bind it with Asp.Net GridView control, and then we are going to show the values in the server controls placed in the ModalPopup extender and perform an edit/update function from the ModalPopup extender itself. To achieve this, we are going to use WebService which will return the required data as XML, this XML data is captured in the client-side by JavaScript’s XMLDOM object, then we are going to process the XML to fill the controls in the ModalPopup extender. These data can be changed and on postback, these data will be saved in the database. You can place any server controls in the ModalPopup extender.

10. Simple AJAX – PHP and Javascript

This tutorial will cover just the basics with AJAX, and we will start with the base object you need: a XMLHTTP Javascript object. With this object you call a server-side script and get the response back. Most browsers use the same Javascript object, but of course Microsoft has to be different, so they require their own.

The post 10 Resources To Help You Learn ‘Ajax Server Calls and XMLHttpRequest’ Basics appeared first on ENFEW.

Ajax (Asynchronous Javascript and Xml) has become a very popular tool in web design. This tutorial will teach you how to make an ajax contact form using PHP and Jquery. See the code in action here.

2. Submit A Form Without Page Refresh using jQuery

Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let’s get started.

3. Building a Sleek AJAX Email Signup Form

In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming best practices.

4. Creating a Slide-in jQuery Contact Form

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.

Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.

5. AJAX Contact Form with Realtime Validator – Powered by JavaScript and PHP

The aim of this tutorial is to help you to create a simple (tableless) contact form using AJAX, JQuery & PHP. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.

6. Justify elements using jQuery and CSS

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form.

7. A jQuery inline form validation, because validation is a mess (With AJAX Submit)

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

8. Create a shoutbox using PHP and AJAX (with jQuery)

We will learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

9. How To Build Quick and Simple AJAX Forms with JSON Responses

In this tutorial, we will go through the steps to setting up an AJAX form, which will return a JSON response used to display success/error messages. We will be using jQuery and jQuery Form Plugin to make this entire process very quick and painless.

10. Perfect signin dropdown box likes Twitter with jQuery

Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips. Enjoy it!

—

I Hope you enjoyed these amazing tutorials, Let me know if you guys have any other new tuts via comments.

The post 10 Amazing Ajax Css Form Tutorials appeared first on ENFEW.