JQuery magicpreview plug-in(rikrikrik.com)

17 pointsby bdfh4218 lat temu11 comments

http://rikrikrik.com/jquery/magicpreview/

11 comments

jrnkntl18 lat temu

Plugin, plugin, huge word for some code that can be accomplished by this

using the plugin: $('form.example input:text').magicpreview('mp_');

without: $('form.example input:text').change(function() { $("mp_"+this).html(this.val()); });

or something like that =)

riklomas18 lat temu

Hi, I'm the author of the plug-in, I actually hang around here quite often actually but I didn't realise my plug-in had been submitted until now.

The reason I made this plug-in was because I was doing what you were doing in your without-plugin example, but the form got more complex and suddenly the original code wasn't working as well. So I decided to make the plug-in to not only help me out but I figured that other people might be having the same problem too. However, if I was doing something quick and simple, I would do something akin to your without-plugin example.

axod18 lat temu

Or without any library

formelement.onchange=function() {previewelement.nodeValue=this.value}

True there are caveats, some elements don't fire change until they loose focus... in which case formelement.onkeyup = formelement.onchange etc etc.

bdfh4218 lat temu

True, but rather less work when there are a good few form fields.

I thought it was worth posting for the idea - building up a finished view alongside data entry. Could have some utility.

adamc18 lat temu

This plugin is vulnerable to XSS -- try entering <script>alert('boom');</script> in the input field of the example.

riklomas18 lat temu

You can use the options to set the output as text() rather than html(), e.g. $('div').magicpreview('mp_', { 'change': 'text' });

But yes, I should really add a flag to strip out any script elements :)

technoguyrob18 lat temu

XSS detection is not just as simple as that. For example, in IE, entering the following produces a pop-up:

   <table style="background-image:url(javascript:alert(1))"><tr><td>Hi</td></tr></table>

However, read debt's comment below. XSS is irrelevant here since "XSS" means cross-site scripting, i.e., ,managing to embed Javascript into pages someone ELSE sees. Only the client sees this, it doesn't get reproduced for anyone else.

debt18 lat temu

This is only on the front end. If the backend filters html tags then XSS won't be a problem.

adamc18 lat temu

Filtering tags is notoriously difficult, though, because of the variety of encodings possible. Maybe you meant "properly encodes output"? That's the typical solution.

thomasmallen18 lat temu

Awesome. I'm doing a redesign/rebuild right now and I was about to write this myself to create this effect for the Contact form (I first saw it on ALA years back in the discussion area).

davidmathers18 lat temu

see also chain.js: http://github.com/raid-ox/chain.js/wikis