4 ms·

JQuery magicpreview plug-in

17 points by bdfh42 18y ago

jrnkntl 18y ago
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 =)
- bdfh42 18y ago
  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.
- axod 18y ago
  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.
- riklomas 18y ago
  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.
thomasmallen 18y ago
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).
adamc 18y ago
This plugin is vulnerable to XSS -- try entering <script>alert('boom');</script> in the input field of the example.
- riklomas 18y ago
  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 :)
  - technoguyrob 18y ago
    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.
- debt 18y ago
  This is only on the front end. If the backend filters html tags then XSS won't be a problem.
  - adamc 18y ago
    Filtering tags is notoriously difficult, though, because of the variety of encodings possible. Maybe you meant "properly encodes output"? That's the typical solution.
davidmathers 18y ago
see also chain.js: http://github.com/raid-ox/chain.js/wikis http://github.com/raid-ox/chain.js/wikis

17 points by bdfh42 18y ago

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 =)

bdfh42 18y ago
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.
axod 18y ago
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.
riklomas 18y ago
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.

thomasmallen 18y ago

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).

adamc 18y ago

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

riklomas 18y ago
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 :)
- technoguyrob 18y ago
  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.
debt 18y ago
This is only on the front end. If the backend filters html tags then XSS won't be a problem.
- adamc 18y ago
  Filtering tags is notoriously difficult, though, because of the variety of encodings possible. Maybe you meant "properly encodes output"? That's the typical solution.

davidmathers 18y ago

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