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.
