Category Archives: JavaScript & jQuery

Customize JQuery UI datepicker with From and To date

I think you have used the JQuery UI datepicker many times and you have also faced trouble when there are 2 date text-boxes and you have to use datepicker in both with taking care that one text-box date value always less than the 2nd one.

 

I think you have got my point, what I want to say.
Like you have two date fields named as FROM and TO and FROM date should always less then TO date.

 

For solving the same you have to make a trick in the datepicker function.
Below is the same you can use.

 

Just add below three lines to include CSS and JS  in your document head as below.

 

Head Section:


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

 

JavaScript Code:

<script type="text/javascript">
$(document).ready(function(){

	$("#datepicker").datepicker({
	
		dateFormat : 'dd/mm/yy',
		minDate    : new Date(),
		maxDate    : '+1Y',
		defaultDate: "+1w",
		changeMonth: true,
		onSelect   : function(selected){
		
			var arr = selected.split("/");
			var spares = [arr[2], arr[1],parseInt(parseInt(arr[0])+1)];
			var joint = spares.join("/");
			var minDate2 = new Date(joint);
			$("#datepicker2").datepicker("option","minDate", minDate2);
		
		}
	
	});
	
	$("#datepicker2").datepicker({
	
		dateFormat : 'dd/mm/yy',
		minDate    : "+1",
		defaultDate: "+1w",
		maxDate    : '+1Y',
		changeMonth: true,
		onSelect   : function(selected) {
		
			$( "#datepicker" ).datepicker( "option", "maxDate", selected );
		
		}
	
	});

});
</script>

 

HTML Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2">From Date:</td>
    <td><input type="text" value="" name="indate" id="datepicker" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">To Date:</td>
    <td><input type="text" value="" name="outdate" id="datepicker2" /></td>
    <td>&nbsp;</td>
  </tr>
</table>

 

For further reference you can go through the JQuery UI library by the below URL.

JQuery UI datepicker

 

I hope this all will help you.

Let me know by comments, if you still face any issue related to above.

 

JQuery AJAX file uploading with custom browse button & without Flash

AJAX file uploading using jQuery & PHP:

In the day to day life of web programming, you will need to upload the files on server without page refresh. It is very easy with flash, but will little bit tricky with XMLHttpRequest (JavaScript Browser Object) and AJAX.
Find the below code or Package that will help you to design your file browse button as per your site theme or whatever the design you want. I think you already aware by the AJAX (Asynchronous JavaScript and XML)

 

Find the below Package for doing the job of AJAX file uploading, where you don’t need Flash work at all.

 

You have to add 2 JavaScript (jQuery) file and a very simple Style Sheet, which is used to make the browse button as per your requirement or needs.

 

Download the below zip file to explore your world of web application development.

Cheers!!

ajax-upload-file.zip

 

If you find any bug left by me 🙂 or find any difficultly to implement, please post comment.

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

$('#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});

 

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.

 

 

 

JavaScript function equivalent to PHP’s str_replace

Below is the JavaScript function worked like PHP’s str_replace.

<script type="text/javascript">
function str_replace (search, replace, subject)
{
var result = "";
var  oldi = 0;
for (i = subject.indexOf (search); i > -1; i = subject.indexOf (search, i))
{
result += subject.substring (oldi, i);
result += replace;
i += search.length;
oldi = i;
}
return result + subject.substring (oldi, subject.length);
}
</script>

 

You can find more equivalent JavaScript function same as it works for PHP.

 

You can get the library of these functions by php.js or can directly download by below link.

Download php.default.min.js

 

Just 3 simple steps to go with jQuery FancyBox

Download the latest jQuery FancyBox package by jQuery FancyBox Website

 

1. Set the headers
The first thing to do is include the required files in the header of your page.
For the FancyBox, first the jQuery library, then the plugin script, and an additional style sheet files.

 

/* Include jQuery - try to use latest version */
<script type="text/javascript" src="your_path_to/jquery.js"></script>

/* jQuery fancybox plugin */
<script type="text/javascript" src="your_path_to/jquery-fancybox.js"></script>

/* Additional Style for fancybox */
<link href="your_path_to/fancybox.css" rel="stylesheet" type="text/css" />

 

2. Next step is to declare how and when the FancyBox will be displayed on your page.The below code tells that every link that has a class fancy box will have its content opened in a fancy box.

It can be added in the page header (as below) or in a separate (.js) file.

 


<script type="text/javascript">

$(document).ready(function(){
$(".fancybox").fancybox();
});

</script>

 

3. Finally, you just need to create a link whose class will have to be fancy box (as you have declared in fancybox function) and whose href attribute will need to contain the path of the page/element you wish to open within the fancy box.


<a href="page_target_path" class="fancybox">How's it!!</a>