A Web Developers Blog » Javascript

jQuery Tagging Plugins

jmz — Thu, 22 Mar 2012 14:16:29 +0000

If you have an application where people add a lot of data, organising this data to make it easy for people to find what they want can be difficult. One simple solution that can make organising and finding this data simple is to allow your users to add tags to each item.

I was looking for a good jQuery plugin for an app I’ve been working on and I thought it might be useful to some people if I did a quick round up of the ones I had a look at.

JQUERY TAGS INPUT PLUGIN

Tagit

jQuery Tag Plugin

Tagzy

In the end, Tagzy was the plugin I decided to use for the tags in my application. I thought it was nice and simple to implement and use.

Also, here is a little screenshot of it in action in my app. Changing the look of the tags was really straight forward too!

Easily get javascript libraries using Script SRC

jmz — Tue, 25 May 2010 09:17:40 +0000

When developing a new site I always like to make sure I use the latest release of my javascript library hosted by Google. Then I just update it to a local version before the site goes live.

Today I came across a great little site that lets you get the links to the latest versions of the most popular javascript libraries quickly and easily.

You find your library on the page and click the ‘Copy’ button. Then all the code you need to include the library in your page is copied to your clipboard.

I really like simple, easy to use sites like this that do one thing and do it well rather than trying to do too much.

Enabling and disabling a text input with a checkbox using jQuery

jmz — Mon, 12 Apr 2010 07:00:22 +0000

I wanted to make a quick bit of javascript that would enable or disable a text input based on whether a checkbox was checked or not. I thought this might come in handy so I made it into a tutorial and posted it here. This script will work for any amount of checkboxes and text inputs on a page. You can see a working demo of it here.

First we start off with our blank HTML page.





Enabling and disabling a text input with a checkbox using jQuery

Next include the jQuery js file from Google.





Readonly Input Box

Next we add our text inputs and check boxes. I have also added some labels so that you can see which check box goes with which input. I have added 3 inputs so to show that you can use this technique with multiple boxes.





Readonly Input Box



Readonly Input Box

My Test Label 1






My Test Label 2






My Test Label 3

Now I add a class to each check box so that I know which check boxes I want jQuery to watch for clicks on. You don’t have to do this but you might get some strange results if you didn’t and you had other check boxes on your page.





Readonly Input Box



Readonly Input Box

My Test Label 1






My Test Label 2






My Test Label 3

I’ll also add a value to each check box, this will match the name of the input I want it to control.





Readonly Input Box



Readonly Input Box

My Test Label 1






My Test Label 2






My Test Label 3

Next, the jQuery. First of all we need the javascript tags, this normally goes at the end of the document so that the HTML & CSS are loaded before any javascript, giving the user the impression that the page is loading faster.





Readonly Input Box




Readonly Input Box

My Test Label 1






My Test Label 2






My Test Label 3

This tutorial will only deal with inputs that are all enabled when the page first loads (I might write another one in the future that covers having some disabled when the page loads) so we need to make sure that all the checkboxes are checked when the page loads. I did this with javascript, this might not be the right way to do it if you want it to degrade gracefully. To check all of my checkboxes when the page loads I use the code.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
	});

Next I write some jQuery code that tells jQuery to do something whenever someone clicks one of the checkboxes with the class of ‘input_control’.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Now we do a simple if statement that says ‘if the check box was checked then set the disabled attribute to false, if the check box was unchecked then set the disabled attribute to true.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
			}
		});
	});

And that’s it! I’ve added the code of the completed page below and you can see a demo here. There are probably other ways of doing this, but this is the simplest way that I came up with. I did try doing this with toggle rather than using an if statement but although the disable/enable checkbox worked, the checkbox didn’t check/uncheck.

Completed Page





Readonly Input Box




Readonly Input Box

My Test Label 1






My Test Label 2






My Test Label 3

Javascript Confirm Box

jmz — Fri, 07 Aug 2009 07:00:30 +0000

A lot of developers have found that users can sometimes click links without thinking, this is not normally too harmful unless the button does something like delete a record from a database. That is why a lot of sites use confirmation boxes that will ask a user “Do you really want to delete this?” before the action is completed.

This tutorial will show you how to create a javascript function that will allow you to do this really easily.

Here’s an example of what we will be creating:

View A Demo

First of all we will need our link that will delete the record, I’ll just use a dummy page with the link on like this:



	
    		Javascript Confirm Example
		
	
	
		Delete

The “Delete” link is going to be the link we’ll add the confirmation to.

Next we need our javascript function:

function confirmDelete(delUrl) {
  if (confirm("Are you sure?")) {
    document.location = delUrl;
  }
}

The javascript is pretty simple. When the user clicks the link, a confirm box is popped up. The text from the confirm box is the “Are you sure?” text. If the user clicks “Ok” then they are redirected to the delUrl link, otherwise they stay on the page they are on.

Now we need to make a few changes to the HTML. We need to add the javascript function and we need to tell the link to run the function when it is clicked.



	
    		Javascript Confirm Example
		
		
	
	
		Delete

Now you can see in the example, when the link is clicked a box pops up and asks you if you are sure, if you click Ok you go to the delete.html page, if you click Cancel you go back to the page you were on. Simple!

Now, lets make this function a little bit more generic. Say we had one link on our site to delete the item, like in the example above. But we also had a link to let a user hide an item aswell. Using the code above, we would need one function to say “Are you sure you want to delete this item?” and one to say “Are you sure you want to hide this item?” which we really don’t want to do if we can get away with it.

So if you need to, you can use this slightly modified function.

Basically, all we’ve done here is, rather than hard coding the text that is displayed in the confirm box, we’ve set it as a variable called msg which is passed from the link.

The code for our page now looks like this.



	
    		Javascript Confirm Example
		
		
	
	
		Delete | Hide

You might have noticed I’ve changed the links slightly to include the text to go in the confirm box.

View A Demo

And that’s it, you now have a delete confirmation function that can link to any page and display any message.

Free WYSIWYG editors

jmz — Tue, 03 Mar 2009 11:03:44 +0000

As a developer, there will inevitably be a time when you have to use a WYSIWYG editor in one of your projects. There are a huge range of these editors that all have good and bad bits and that all have different price ranges. In this roundup, I’ve decided to only include the ones that cost my favourite price, FREE!!

A Web Developers Blog » Javascript

jQuery Tagging Plugins

JQUERY TAGS INPUT PLUGIN

Tagit

jQuery Tag Plugin

Tagzy

Easily get javascript libraries using Script SRC

Enabling and disabling a text input with a checkbox using jQuery

Readonly Input Box

Readonly Input Box

Readonly Input Box

Readonly Input Box

Completed Page

Readonly Input Box

Javascript Confirm Box

Free WYSIWYG editors

TinyMCE

FCKEditor

jwysiwyg

openWYSIWYG

EWELive

Free Rich Text Editor