Creating a Javascript Alert

aspless · December 16th, 2008, 03:30 PM

Chaps,

What i am trying to achieve is the ability to produce a CSS styled alert with a close button.

After many varied examples i have cobbled an initially well written piece of JavaScript into my draconian version of script hence my post.!

The validation method i am using is classic asp and some SQL queries.. Sorry!

The initiation of the alert would be from a query string and associated error type.

Code:

<%qs=request.QueryString("qs")%>

The Style Sheet attributes are:

HTML Code:

<style type="text/css">
/** Quick basic stylising */
body, div, td, th {
 font-family: Tahoma;
 size: 11px;
}
h1, h2, h3 {
 font-weight: 100;
 font-family: Tahoma;
}
/** Hidden State for the dialog */
div.hiddenState {
 visibility: hidden;
 display: none;
}
/* Some rought layout, could be anything including backgrounds etc */
div.visibleNotifyMsg {
 position: absolute;
 top: 150px;
 left: 150px;
 width: 300px;
 background: #6382d2 url("/images/icons/info-i-icon.png");
  background-repeat:no-repeat;
 color: #FFF;
 border: 1px solid #3a5daf;
  border-right-width: 2px;
  border-bottom-width: 2px;
 padding-left:25px;
  padding-right:3px;
  padding-bottom:10px;
  padding-top:3px;
}
</style>

The JavaScript Used so far

Code:

<script type="text/JavaScript" language="JavaScript">

function notifyErrors(id, errors, visibleStateCSS) {
 // Locate and update our popup window
 object = document.getElementById(id);
 object.innerHTML = '<strong>The following errors occured when validating your form:</strong><pre>';
 object.innerHTML += '<strong>The following errors occured when validating your form:</strong><pre>';
 object.innerHTML += '</pre><p><input type="image" src="/images/buttons/b-close.png" onclick="javascript:document.getElementById(\'' + id + '\').className = \'hiddenState\';" value="Close Window" /></p>';
 object.className = visibleStateCSS; 
}

function validate() { 
 errStack = new Array();
 // Check the email address, if error, push into stack
 notifyErrors('notifyPopup', errStack, 'visibleNotifyMsg');
 
}
</script>

Below example of simple form

HTML Code:

<form name="form" methos="post" action="test.asp">
<input type="button" value="Submit" /><div id="notifyPopup" class="hiddenState"></div>
</form>

Using asp i have the following trigger to initiate the javascript separatley from the form

Code:

<% If qs = "er" then%>
<script>
validate();
</script>
<%End If%>

I fully admit my knowledge of JavaScript is at best a Neolithic grasp but the upshot of my issue is the close button on the created alert is associated with the form.

As a result when you select the "close" button on the alert it initiates the form and tries to open for example test.asp.

My finger in the air assumption is that

Code:

object = document.getElementById(id);

is the association.

Is there a way of either simplifying the JavaScript to correctly close the alert or more likely a simpler way.

Any input appreciated

dparsons · December 16th, 2008, 04:40 PM

I think you will find that if you change this line:

javascript Code:

object.innerHTML += '</pre><p><input type="image" src="/images/buttons/b-close.png" onclick="javascript:document.getElementById(\'' + id + '\').className = \'hiddenState\';" value="Close Window" /></p>';

to something like

javascript Code:

object.innerHTML += '</pre><p><input type="image" src="/images/buttons/b-close.png" onclick="javascript:document.getElementById(\'' + id + '\').className = \'hiddenState\'; return false;" value="Close Window" /></p>';

or

javascript Code:

object.innerHTML += '</pre><p><a onclick="javascript:document.getElementById(\'' + id + '\').className = \'hiddenState\'; return false;" style="cursor:pointer;"><img src="/images/buttons/b-close.png" /></a></p>';

it will correct your problem.

The reason that your form is posting is because you are using an INPUT tag for your image and, the default behavior of is to post the form. To prevent this from happening you simply use 'return false;' in your onclick event to prevent the post.

hth.
-Doug

aspless · December 16th, 2008, 05:10 PM

Thanks dparsons,

That works perfectly.

dparsons · December 16th, 2008, 05:15 PM

No problem, glad it worked out for you! ^^

zeronexxx · February 18th, 2009, 09:21 PM

Check this website out, a bit doughy but interesting. check the top notification.

http://www.ready4recession.com/