Home > JavaScript

JavaScript

Password Support for Jeditable, a Cool jQuery Plugin

Here is the original plugin:
http://www.appelsiini.net/projects/jeditable

It let’s you implement inline editing capabilities and it’s supported by major browser.
Here are some examples:
http://www.appelsiini.net/projects/jeditable/default.html

An example usage is like this:

$(".edit_area").editable("http://www.example.com/save.php", {
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

The problem is, it doesn’t support password input types, but here is how to add this support.

1 – Open the plugin file.
2 – Find this code:

text: {
	element:function(settings,original) {
		var input=$('<input>');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

3 – Add this after that:

password: { element:function(settings,original) {
		var input=$('<input type="password">');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

Now you can do:

$(".edit_area").editable("http://www.example.com/save.php", {
         type      : 'password',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

It’s odd that the developers didn’t add this capability…

Comments (3) Filed under: AJAX,JavaScript,Web Development Posted by: Codehead

How to force the browser to renew a cached image with JavaScript

Yes, you can do it with JavaScript, it’s simple; assume that the name of your image 2.png and you are writing it dynamically to a web page the only thing you need to do is this:

var image = 'http://www.example.org/2.png?' + new Date().getTime();

To the browser, this is a new URL so it will download the image again but to the web server this is the same image regardless of what’s after the question mark.

Obviously you can adapt this to your own needs…

Comments (0) Filed under: AJAX,JavaScript,Web Development Posted by: Codehead

“Form Submit is not a function” error message

If you try to submit a form with JavaScript and keep getting “Submit is not a function” then you probably have a field in your form named “submit”.

Take a look at your form maybe a hidden field:

<input type="text" name="submit" value="true" />

Or your submit button’s name:

<input type="submit" name="submit" />

Change the name of the field to something else and try.

This is one of those situations where you find yourself pulling your hair out

Happy coding.

Comments (0) Filed under: JavaScript,Web Development Tags: AJAX, JavaScript Posted by: Codehead

Should we stop supporting users without JavaScript?

I say YES!

I’m doing it from now on, just like Facebook and many others, I will show them a message:
Sorry, you won’t be able to use this site until you enable JavaScript on your browser.

I think it’s time for AJAX everywhere and web applications should start being modern and interactive…

Comments (7) Filed under: AJAX,JavaScript,PHP,Web Development Posted by: Codehead

« Newer Posts