Tag Archives: Javascript

Simple Star Rating System With jQuery

jQuery Star Rating System

This is jQuery plugin for star rating systems.The code below is modified of original script to make it simpler for you to develop a star rating in your application.

 

Check the demo below

hover and click events on stars to change there state

[code lang=”js”]
$(‘#star1’).rating(‘www.your-url.php’, {maxvalue:1});

$(‘#star2’).rating(‘www.your-url.php’, {maxvalue:1, curvalue:1});

$(‘#rate1’).rating(‘www.your-url.php’, {maxvalue:5, increment:.5});

$(‘#rate2’).rating(‘www.your-url.php’, {maxvalue:5, curvalue:3});
[/code]

 

Find the complete package of Simple Star Rating by the below link:

jQuery-star-rating.zip

Drawbacks of AJAX

AJAX(Asynchronous JavaScript And XML) is nothing but a technique which uses the JavaScript and XML together to provide the flexibility in interactive web pages. It is used to send a request to the server using the XMLHttpRequest and use the result sent by the server in the web page.

 

Once you use an application built with AJAX, it’s easy to see the benefits: The page reloads time are reduced, and features such as automatic type-ahead facilitate data entry, user experience improves but there are some drawbacks of AJAX, you should take care before developing a page using AJAX.

 

AJAX is using JavaScript it may not work when the JavaScript is disabled.
Any user whose browser does not support AJAX or JavaScript, or simply has JavaScript disabled, will not be able to use its functionality. Similarly, devices such as smart phones, PDAs, and screen readers (very much popular now a days) may not have support for JavaScript/XMLHttpRequest object (AJAX), so a user must take care as a reference point for developing applications that are accessible to everyone.

This requires extra development time to deliver an alternative solution (using the NOSCRIPT tag), when a user has disabled JavaScript support within their browser.

 

Not all browsers support AJAX.Though IE 5.x, 6.x, Mozilla 1.x, Firefox still supports.
Browsers use the different objects to handle this technique, you have to code for each browser, XMLHttpRequest is not supported in older version. No standardization of XMLHttpRequest yet.

 

The Really Simple History (RSH) JavaScript library highlights another major issue with Web applications that use AJAX. There is no browsing history, so Back/Forward buttons become useless.
Pages are dynamically updated (do not automatically register themselves with the browser’s history engine) using the AJAX, when the back button is pressed the full information on the page may not be reflected. The browsers don’t remember the partial page refreshes being done by using AJAX.

 

Bookmarking becomes difficult with AJAX. This is because of the fact that in the browser address bar URL remains same when AJAX requests are sent.
Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application.

 

Use of JavaScript slows down the application. There is definitely a performance difference between showing a static HTML page than processing JavaScript events. The older generation of browsers is really awful in this context. Hence this is one of the serious AJAX drawback for browsers like IE6.

 

One of the drawback is that AJAX based applications are difficult to debug than synchronous applications (which use PHP, JSP, Servlets for complete page refreshes).Though there are tools and browser extensions or plugins/addons to debug AJAX code (Firebug, Fiddler2 etc.)

 

The AJAX code is written in HTML or js files and these are downloaded by the browser. So anyone can see your source code for generating AJAX requests. Once the hackers know the URL and parameters to generate AJAX requests, they can very easily generate hoax in AJAX requests to your server.

Like any other application that uses the HTTP protocol, data is sent as clear text. For this reason, no sensitive data should take a ride via HTTP using AJAX or any other technology.

 

Due to the asynchronous nature, now user can keep on generating requests even when he has not received response for earlier requests. This can lead to scenario where more requests are generated than the server can handle and hence you are forced to increase the capacity of your servers.

 

AJAX is a lack of interaction with search engines.
If you are developing an application and then thinking of making it seo optimized then better don’t use AJAX (or use minimal), because the search engines don’t understand AJAX and they need a proper URL for indexing the content which is one of the AJAX Drawbacks for websites that want to reach out in search engine results.

 

Server load and bandwidth can be an issue when delivering AJAX-based applications. These applications often use AJAX to provide features like type-ahead searching in text boxes or loading data in the background. The user may see fewer page reloads, but the server calls are still there.

It is worth considering whether the back-end server can handle countless simultaneous calls to the server when many users are using the type-ahead feature. Displaying interim messages like “Loading” can alleviate user concerns because this lets them know something is happening rather than being presented with a blank page.

 

 

Be sure to consider the above potential issues with AJAX before putting it to use in your application. A hybrid approach is usually the best solution with AJAX because it provides certain features in the UI and other technologies used in other facets of an application.

 

 

Have you encountered with delivering AJAX-based solutions? Share your experience with ScriptArticle.com.

 

 

 

Resolve conflicts with jQuery and other JavaScript libraries using jQuery.noConflict

A problem that often occurs in web development is a conflict between your jQuery function and some other JavaScript library.

 

This is due to many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case,$ is just an alias for jQuery, so all functionality is available without using $.

 

The following article is a short guide on how you can avoid or resolve conflicts with jQuery and other JavaScript libraries.

All you need to do is wrap your jQuery function in some jQuery noconflict tags.

If you wanted to hide a div on load you would normally use the following code

[code lang="js"]
$(document).ready(function() {
$('#myDiv').hide();
});
[/code]

 

However, if you are using another JavaScript library, such as Prototype, you will find this code doesn't work. This is because Prototype also uses the dollar sign ($); this causes a conflict.

 

To prevent this, you just need to do is wrap the code in these tags.

[code lang="js"]
(function($){
$(document).ready(function() {
// Do awesome stuff...
$('#myDiv').hide();
});
})(jQuery);
[/code]

 

You will notice that your code now functions as you would like it to work.

You can also create a alias for jQuery.noConflict(); and can use it further in jQuery function as below.

[code lang="js"]
<script type="text/javascript" src="other_javascript_library.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other javascript library's $ can follow here.
</script>

var jQ = jQuery.noConflict();
// Do something with jQuery
jQ("div p").hide();

// Do something with another library's $()
$("content").style.display = 'none';
[/code]

 

Hope this will help.

 

JSON (Simple and Universal data exchange format)

JSON (JavaScript Object Notation) is a text-based, light-weighted, language-independent data interchange format. It was derived from the ECMAScript Programming Language Standard. JSON follows a small set of formatting rules for the portable representation of structured data. It is easy for humans to read and write and easy for machines to parse and generate. These properties make JSON an ideal data-interchange language.

 

JSON is built on two structures:

 

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

 

An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence

 

In JSON, data can take on these forms:

* An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by, (comma).

 

* An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by, (comma).

 

* A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.

 

* White space can be inserted between any pair of tokens. Excepting a few encoding details that completely describe the language.

 

A JSON text is a serialized object or array.

JSON-text         = object / array

 

These are the six structural characters used in JSON.

begin-array     by  [ left square bracket
begin-object    by  { left curly bracket
end-array       by  ] right square bracket
end-object      by  } right curly bracket
name-separator  by  : colon
value-separator by  , comma

 

The terms “object” and “array” have taken from the conventions of JavaScript. JSON’s design goals were for it to be minimal, portable, textual, and a subset of JavaScript.

 

Example

[code lang=”js”]
var employees = { "operations" : [ // operations is an array in employees.
{ "firstName" : "Steve", // First element
"lastName" : "Jobs",
"age" : 50 },

{ "firstName" : "Maria", // Second Element
"lastName" : "Denial",
"age" : 41 }
], // End "operations" array.

"development" : [ // Development is another array.
{ "firstName" : "Kailash",
"lastName" : "Chaturvedi",
"age" : 25 },

{ "firstName" : "Mahesh",
"lastName" : "Yadav",
"age" : 42 }
]
} // End JSON Employees data
[/code]

Here employee is an object. That object has two properties or name/value pairs. “operations” is an array which holds two JSON objects showing the names and age of 2 employees. Likewise “development” is also an array which holds two JSON objects showing the name and ago of the two employees who work in development. All of this data exists within the employees object. There are several different ways to access this data.

 

How to access Data in JSON?

 

Using the “employee” example above, if we wanted to access the first person who worked in development.

document.writeln(employees.development[0].firstName + ‘ ‘ + employees.development[0].lastName);

 

You can also access the second person who works in “operations”
document.writeln(employees.operations[1].firstName + ‘ ‘ + employees.operations[1].lastName);

 

The most common and easy way to access JSON data is through dot notation.
This is simply the object name followed by a period and then followed by the name/property you would like to access.

 

[code lang=”js”]
var myObject = { ‘color’ : ‘cyan’ };
document.writeln(myObject.color); // output show cyan
[/code]

 

If your object contains an object then just add another period and name.

[code lang=”js”]
var myObject = { ‘color’ : ‘cyan’,
‘house’ : {‘room’ : 5 }
};

document.writeln(myObject.house.room); // output will 5
[/code]