Task for Today - December 17, 2010 @ 8:29 AM

Deadline - December 18, 2010
1. Check Stock Information on Web - Priority 1
2. Import/Export - ByPass some information during export/import - Priority 2
3. Import PO - automate the adding of new stock (transfer to vb.net) - Priority 4
4. Fixing z-reading (Eliminate GC in z-read and put identification in invoice record) - Priority 3
5. Credit Voucher or whatever - Priority 5

Web Development
1. Multi-level Networking Website - Functionality

Ajax Shorthand in JQuery

 Welcome again to JQuery Coder and this time I will be teaching you how to setup ajax in JQuery.

One of the most commonly used technologies nowadays is AJAX. Most of the websites around the world are using AJAX as the foundation of processing information from the client to the server and back to the client. By the way, AJAX stands for Asynchronous Javascript and XML. During the time JQuery is not around, we uses the javascript to create the process of AJAX using HTTP Object. But, as JQuery arrive in the internet and being used by most of the programmer nowadays. AJAX is now easy to implement and manipulate. Let’s take a look some example that I’m going to create in order to have AJAX in our web pages.

First, we need to know the basic concept of AJAX. AJAX is the process of requesting information from the server and transfers it using XML but we can use also script or text for transferring information. We need also to know the basic part of the AJAX.

1. Type – it will be the type of request that it will used during form submission (like POST or GET).
2. url – it will be the url path in which where the server script reside.
3. data – it will be the data to be submitted in the server for request.
4. dataType – This will be what type of data should be transfer once it will be requested.

The next one will be the state of the AJAX and these are the common state:

1. beforeSend – you can anything here while the AJAX is going to send the data.
2. success – the AJAX is already done the process and sent back the information to the client.

For our first example, we are going to use text dataType:

Php files – We need this server side script for the request.

echo “Hello World!” . $_POST[‘name’];

HTML Tags

        
        

JQuery Script

$(document).ready(function(){

            $(‘#btnSubmit’).live(“click”, function(){

                        $.ajax({

                                    Type: “POST”,

                                    url: [path of the php file],

                                    data: “name=”+$(‘#txtName’).attr(“value”)+””,

                                    dataType: “text”,

                                    beforeSend: function(){

                                                alert(“Loading….”);

},

Success: function(data){

            Alert(data);

}

});

});

});

This is the sample code of the AJAX using JQuery and the data inside the function (which can be found in the success). Is where the information will be sent from the server-side script. In order to send you need to use echo or print to send data in the javascript using AJAX.

The next tutorial will be using XML as the data to be sent to the client.

Lesson 1: How JQuery Works

The Basics

Let’s get started on the basic in JQuery, but before that, we should know how to setup JQuery in our page. First, download the JQuery latest version in this website jquery1.3.2.js, then save the file anywhere in your computer and name it as you like. Like for this example:

Always remember, that we need to use the latest version of JQuery. It would be more advantageous to us if we use the latest version, considering that JQuery is not fully stable in terms of some functions that we are going to use during development. The latest version for now is jquery 1.3.2 and the version 1.4 is under development. We would expect something new will come in the version 1.4. Now, after downloading the latest version of JQuery, the next is to attach the JQuery file in our page. Like for this example on how to attach JQuery in our page: 

As we can see in the HTML construction, the JQuery attach next to the title tag. We put the jquery in that part because we want to follow the basic constructions in HTML Anatomy. One thing also in terms of naming the file, sometimes we are not really going to name the JQuery as jquery.js. Mostly people remain the filename as it is when they download the jquery from the site. It would also be fine, but always remember that we should also edit the src attribute according to the filename of the JQuery that we set. Also, if it happens that we put the JQuery file in an specific folder. We need to set the path of the folder where the JQuery file is placed. Like for this example of some concept of file management in our development folder:

We can see how the file being arrange in our development folder. Another thing is that, we should change the src attribute value according to the path of the JQuery file. Take a look at this src construction in terms of attaching the JQuery file.

Conclusion

At this moment, we are able to properly attach jquery file and we considered also the filename scheme in attaching the JQuery file in our page. The last one would be the proper setting of source path of JQuery whenever we put the JQuery on a separate folder or within another sub-folder.

Next Topic:

- Explaining the History of JavaScript in which plays an important role in web development.
- How to use JavaScript in the page that will serve as the foundation in using JQuery in our page.

Welcome to JQuery-Coder.

Hello everyone!

Welcome to JQuery-Coder, this blog is going to teach you more about JQuery API and the use of those API in your website. As you can see, JQuery is one of the most widely used JavaScript Libraries in the world, because it was easy to use and implement. You can also achieve more effects and event manipulation in JQuery with less code compare to flash and other third party software that you use in your website.

Even though, this JavaScript Library is easy to used and implement. There are some aspects that will make it difficult for beginners to learn in JQuery. The proper coding structure is one of the difficulties that will be encountering especially for those beginners in JQuery.

Once we begin the tutorial you will be able to understand why it is really hard for beginners to understand the JQuery structure in coding. At the first try, you will find it simpler, but as you move forward in coding JQuery. You will be encountering some difficulties, mostly if you have lots events being used and you want to manipulate all the events as you like. This blog will be teaching how to solve those difficulties, so that you will really appreciate the JQuery and used it well in your website.

Before we begin out tutorial, you need first to download the JQuery Library in this site jquery.com.