Here's a rather more readable copy of the final version of that: http://pastie.org/1585294
-- T.J. :-) On Feb 20, 10:59 am, "T.J. Crowder" <[email protected]> wrote: > Hi, > > There's no reason you couldn't do it as a single `update`: > > * * * * > catch(e) > { > var jsfile = 'mso.Common.js'; > var routine = 'init'; > > var body = $$('body')[0]; > body.insert( > new Element('div', > { > 'id': 'errordlg', > 'class': 'console', > 'style': 'position:absolute; ' + > 'padding:4px; ' + > 'border:solid 1pt red; ' + > 'z-index:1000; ' + > 'background-color:#fff; ' + > 'width:600px; ' + > 'height:200px; ' + > 'text-align:center; ' + > 'top:10px; ' + > 'left:10px;' > }).update( > "<p style='color: red; padding 4px'>Unhandled Exception > Occurred in " + > jsfile + ":" + routine + " Error: " + e.message + "</p>" + > "<p style='padding 4px'>Please try a browser hard refresh, > CTRL + F5 " + > "(most browsers) -- alternatively try another browser. If > you are " + > "still having troubles, send us an email: > [email protected]</p>" + > "<p style='padding 4px'>We recommend the following > browsers: Google's " + > "Chrome browser or FireFox. If you have IE, please try > upgrading to IE 9</p>" > "<button style='margin-top:12px' onclick='$(\"errordlg > \").hide();'>Close</button>" > ) > );} > > * * * * > > If you do this in more than one place, or you may need to localize > things at some point, etc., you might consider using a `Template`[1] > for it: > > * * * * > var errorTemplate = new Template( > "<p style='color: red; padding 4px'>Unhandled Exception Occurred > in " + > "#{jsfile}:#{routine} Error: #{e.message}</p>" + > "<p style='padding 4px'>Please try a browser hard refresh, CTRL + > F5 " + > "(most browsers) -- alternatively try another browser. If you are > " + > "still having troubles, send us an email: > [email protected]</p>" + > "<p style='padding 4px'>We recommend the following browsers: > Google's " + > "Chrome browser or FireFox. If you have IE, please try upgrading > to IE 9</p>" > "<button style='margin-top:12px' onclick='$(\"errordlg > \").hide();'>Close</button>" > ); > > // ... > > catch(e) > { > var body = $$('body')[0]; > body.insert( > new Element('div', > { > 'id': 'errordlg', > 'class': 'console', > 'style': 'position:absolute; ' + > 'padding:4px; ' + > 'border:solid 1pt red; ' + > 'z-index:1000; ' + > 'background-color:#fff; ' + > 'width:600px; ' + > 'height:200px; ' + > 'text-align:center; ' + > 'top:10px; ' + > 'left:10px;' > }).update( > errorTemplate.evaluate({ > jsfile: 'mso.Common.js', > routine: 'init', > e: e > }) > ) > );} > > * * * * > > ...and it may be a bit off-topic, but any time I see that many inline > styles, it's a red flag for me. Use CSS rules: > > * * * * > In your CSS: > #errordlg { > position: absolute; > padding: 4px; > border: solid 1pt red; > z-index: 1000; > background-color: #fff; > width: 600px; > height: 200px; > text-align: center; > top: 10px; > left: 10px;} > > #errordlg p { > padding: 4px;} > > #errordlg p.err { > color: red;} > > #errordlg button { > margin-top: 12px; > > } > > Your template: > var errorTemplate = new Template( > "<p class='err'>Unhandled Exception Occurred in " + > "#{jsfile}:#{routine} Error: #{e.message}</p>" + > "<p>Please try a browser hard refresh, CTRL + F5 " + > "(most browsers) -- alternatively try another browser. If you are > " + > "still having troubles, send us an email: > [email protected]</p>" + > "<p'>We recommend the following browsers: Google's " + > "Chrome browser or FireFox. If you have IE, please try upgrading > to IE 9</p>" > "<button onclick='$(\"errordlg\").hide();'>Close</button>" > ); > > Using it: > catch(e) > { > var body = $$('body')[0]; > body.insert( > new Element('div', > { > 'id': 'errordlg', > 'class': 'console' > }).update( > errorTemplate.evaluate({ > jsfile: 'mso.Common.js', > routine: 'init', > e: e > }) > ) > );} > > * * * * > > There's also a possible bug in the above, because you're appending an > element with an `id` and then *hiding* (not removing) it when the user > clicks the close button; if you append another one, things will go > wrong, as you'll then have two divs with the same `id`. Probably want > to change `.hide()` to `.remove()`. > > I also would move that out of the `onclick` attribute, which is very > 1996. :-) > > AND hey, we might need this in more than one place, let's put it in a > reusable function. > > So: > * * * * > In your CSS: > #errordlg { > position: absolute; > padding: 4px; > border: solid 1pt red; > z-index: 1000; > background-color: #fff; > width: 600px; > height: 200px; > text-align: center; > top: 10px; > left: 10px;} > > #errordlg p { > padding: 4px;} > > #errordlg p.err { > color: red;} > > #errordlg button { > margin-top: 12px; > > } > > Your template: > var errorTemplate = new Template( > "<p class='err'>Unhandled Exception Occurred in " + > "#{jsfile}:#{routine} Error: #{e.message}</p>" + > "<p>Please try a browser hard refresh, CTRL + F5 " + > "(most browsers) -- alternatively try another browser. If you are > " + > "still having troubles, send us an email: > [email protected]</p>" + > "<p'>We recommend the following browsers: Google's " + > "Chrome browser or FireFox. If you have IE, please try upgrading > to IE 9</p>" > "<button name='close'>Close</button>" > ); > > The function: > function showErrorDialog(jsfile, routine, e) { > var div; > > div = $("#errordlg"); > if (div) { // Paranoia > div.remove(); > } > div = new Element('div', { > 'id': 'errordlg', > 'class': 'console' > }).update( > errorTemplate.evaluate({ > jsfile: jsfile, > routine: routine, > e: e > }) > ); > $$('body')[0].insert(div); > div.down('button[name=close]').observe('click', function() { > this.stopObserving('click'); > div.remove(); > }); > > } > > Using it: > catch(e) > { > showErrorDialog('mso.Common.js', 'init', e);} > > * * * * > > [1]http://api.prototypejs.org/language/Template/ > > HTH, > -- > T.J. Crowder > Independent Software Engineer > tj / crowder software / com > www / crowder software / com > > On Feb 20, 5:06 am, kstubs <[email protected]> wrote: > > > > > > > > > I'm looking for something cleaner than what I have pasted below, which works > > fine but I don't feel like I'm taking advantage of Prototype magic, or maybe > > object inheritance or something. Please offer a suggestion to improve the > > below. End Result: Div container with unhandled error message, some > > instructions to resolve the error, and a simple hide button (which, by the > > way, isn't working for some reason, it doesn't hide the layer). > > > Thanks, > > Karl.. > > > Here's the code: > > > catch(e) > > { > > var jsfile = 'mso.Common.js'; > > var routine = 'init'; > > > var errormsg = new Element('p', {color:'red', > > style:'padding:4px' }).update('Unhandled Exceptin Occurred in ' + jsfile + > > ':' + routine + ' Error: ' + e.message); > > var instructionmsg = new Element('p', > > {style:'padding:4px'}).update('Please try a browser hard refresh, CTRL + F5 > > (most browsers) -- > > > alternatively try another browser. If you are still having troubles, send > > us an email: [email protected]'); > > var recommendedbrowsers = new Element('p', > > {style:'padding:4px'}).update('We recommend the following browsers: > > Google\'s Chrome browser or FireFox. If you have IE, please try upgrading > > to IE 9'); > > var button = new Element('button', {style:'margin-top:12px', > > onclick:'$(\'errordlg\').hide();'}).update('Close'); > > > var div = new Element('div', {'id':'errordlg', 'class': > > 'console', 'style':'position:absolute; padding:4px; border:solid 1pt red; > > z-index:1000; background-color:#fff; width:600px; height:200px; > > text-align:center; top:10px; left:10px;'}); > > div.insert(errormsg); > > div.insert(instructionmsg); > > div.insert(recommendedbrowsers); > > div.insert(button); > > > var body = $$('body')[0]; > > > body.insert(div); > > } -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
