JavaScript - Disabe Onbeforeunload Event?

I set some value like in onbeforeUnload
document.getElementById('hGridStateModified').value='YES';
The value is not set and is not available at server side.

(
I set some value like
document.getElementById('hGridStateModified').value='YES';
The value is available at server side.
)


Code
/// START


f(window.body){
window.body.onbeforeunload = saveBeforeExit; // IE else
}else{
window.onbeforeunload = saveBeforeExit; // FX
}
function saveBeforeExit()
{

show_confirm();
}

function show_confirm()
{
var result=confirm("Do you want to save the changes before navigating.");
if (result==true)
{

document.getElementById('hGridStateModified').value='YES';
return true;
}
else
{

document.getElementById('hGridStateModified').value='NO';
return true;
}
}



///END




Thanks in advance.

Best Regards,
Sandip

i dont want to show the confirm message when using window.onbeforeunload.
Please suggest a solution to hide the confirm message..

I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup.

I am using the following code (FYI, uses prototype.js)
Code:

Event.observe(document.body, 'click', function(event) {
	if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
		staying_in_site = true;
	}
});

window.onbeforeunload = popup;

function popup() {
	if (staying_in_site) {
		return;
	}
	if (popup_displayed) {
		return;
	}
	popup_displayed = true;
	
	//popup displayed here 
}

The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior).
The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior.

Anyone here have a solution for this?

Hi forum,

I am trying to attach an event to a dynamically produced button, and then use
stopPropagation and preventDefault.
Code:

function chapter12_nodeOne() {
    
    //create an element
    var element = document.createElement('input');
    //set some attributes
    element.setAttribute('type', 'button');
    element.setAttribute('value', 'submit');
    element.setAttribute('id', 'myBtn');
    //appendd the element into a DIV
    document.getElementById('myDiv').appendChild(element);
    //uses EventUtil to attach an event listener
    EventUtil.addHandler(element, 'click', function() {
        alert('event attached');
    });

    var flag = confirm('prevent default behavior of button?');
    if (flag) {
        var el = document.getElementById('myBtn');/////////////////////////(1)
        var ev = el.onclick;
    }
}

var EventUtil = {
    addHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = null;
        }
    }
};

But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?!
PS:the event is attached, when I click on the button I get an alert message

I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though.

How can retrieve the clientX and clientY in ondrag event?

Hi,

New to javascript. Doing web page with ASP/VB.NET. Have text boxes for UI on page. Two command buttons - Submit (for db update) and Cancel. I need the Cancel button to prompt the user to verify cancellation. Need OK/Cancel buttons on alert. If user selects Cancel-no action. If user selects OK then I want the text boxes cleared of user text input and focus returned to first text box. I think this may be the code but do not know how to apply it.

function Clear()
{
var res=window.confirm("Please confirm cancellation-text boxes will be cleared");
if(res==true)
{
document.getElementById("StrtDte").value="";
document.getElementById("EndDte").value="";
document.getElementById("txtProjRegHrsAl").value="";
document.getElementById("txtProjOTHrsAl").value="";
document.getElementById("ddlRAS").focus();
}
}

Is this code valid or invalid for the events I need? How do I set it to fire when user clicks the ASP Cancel button?

Thanks,

John

Please can someone explain to me in simple terms which this actually does.

From what I understand it will check all events until a defined event happens, such as rollover of a certain image, and then it activates a function?

What I want to do is use this so that when I rollover a element such as below:
Code:

<img src="img url" alt="this is a tooltip" tooltip="true" />

I want it to pass the obj to a function which then runs, and then once the mouse of not over that element it will activate another function passing the previous object to this function.

Although an element such as the example below would not activate these functions:
Code:

<img src="img url" alt="this is a tooltip"/>

As the tooltip tag does not exist or has the value of false...


Also, wouldn't this use a lot of resources as it checks every event which the mouse passes over?

note: this is not homework

Hi all,

Currently I am doing this:

Code:

var e = document.getElementById('id');
e.style.color = '#ff0000';
e.style.fontFamily = 'sans-serif';
e.innerHTML = time;
...blah blah...

What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works.

What I want to do is also set an event for that div.... something like this:

e.event.onclick = 'runThisCode()';


Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible).

So, is it possible, and if so, how?

Thanks!

-- Roger

p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release.

I have a asp:textbox where I'd like to capture when the user hits Enter, and then instead of doing whatever it normally would, then it should call a javascript function. I'm not sure how to do that, other than I suppose I should use the OnTextChanged event. But I'm not sure which parameters are sent with the event...

Thanks in advance

I am looking to add a calendar to my website in order to list events for each day on the calendar you click on. For example, the link below shows a calendar on the left, that when you click on a day it lists all the events that day.

I have done a few searches, but am not sure if I can find a calendar that acts like this...

Calendar Example

Any help would be greatly appreciated!

Hi

I am new to Javascript. I am working in keyboard Event handling.
i dont know how to handle multple keys pressed or sequence of keys pressed.

Want to know more about key holding , key Listener.

Hello forum,
My name is juan and recently started html programming. I have a web page with a drop box with the name of states.
Code:

<option value="">Alabama</option>
<option value="">Alaska</option>

I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event.

Im using Ibox in order to have a image of the state open.

Code:

<a href="images/large/image_1b.jpg"  rel="ibox" title="alabama at 1024x450!"><img 
src="images/small/image_1.jpg" alt=""/></a>

the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event?

Hi
I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now.

Code:

<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("metnet", $con);
$sql="SELECT * FROM newsletter";
$result = mysql_query($sql);
echo "<form method='post'>";
$dropdown = "<select name='sname' onChange='location(this.form.sname)' >";
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>

hi there here's my problem, I want to alert each innerHTML of the tag "a" when mouse over, but it only alert when i insert "return false;" in the end of the loop, what's the problem?
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<script type="text/javascript" >
	function show(){
	var linkIt = document.getElementsByTagName("a")
	for(var i=0; i<linkIt.length; i++){
	linkIt[i].onmouseover = function(){
	alert(linkIt[i].innerHTML);
		
	}
        return false;
	}
	}
	</script>
	
</head>
<body onload="show()">
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
  </ul>
</body>
</html>

Dammit, for some reason this script has stopped working :/

When I click the links with the ID's of "login_dialog" and "register_dialog" a div should be shown... I'm using an event listener to do this.

Code:

function listener_items() {	
	//Text field background
	addEvent(document.getElementById('input_username'), "click", add_username_password);
	addEvent(document.getElementById('input_username'), "blur", remove_username_password);
	addEvent(document.getElementById('input_password'), "click", add_username_password);
	addEvent(document.getElementById('input_password'), "blur", remove_username_password);

	//Switch between forms
	addEvent(document.getElementById('dialog_login'), "click", login_dialog_login);
	addEvent(document.getElementById('dialog_register'), "click", login_dialog_register);
	addEvent(document.getElementById('dialog_recovery'), "click", login_dialog_recovery);

	//Display Dialog
 	addEvent(document.getElementById('login_dialog'), "click", navbar_login);
	addEvent(document.getElementById('register_dialog'), "click", navbar_register); 
	
	//Close Dialog
	addEvent(document.getElementById('close_dialog'), "click", login_dialog_close);
}

//Login dialog, login form input fields background text
var add_username_password = function() { add_input_text(this); };
var remove_username_password = function() { remove_input_text(this); };

//Login dialog buttons
var login_dialog_login = function() { display_form('login'); };
var login_dialog_register = function() { display_form('register'); };
var login_dialog_recovery = function() { display_form('recovery'); };

//Close dialog
var login_dialog_close = function() { display_dialog('login', 'hidden'); };

//Navigation bar buttons
 var navbar_login = function() { display_dialog('login', 'visible'); };
var navbar_register = function() { display_dialog('register', 'visible'); }; 

//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
	if ( elm.addEventListener ) {
		elm.addEventListener( evt, fun, false );
	} else if ( elm.attachEvent ) {
		elm.attachEvent( 'on' + evt, fun );
	} else {
		elm [ 'on' + evt ] = fun;
	}
};

addEvent ( window, "load", listener_items );

//Display/Hide login dialog
 function display_dialog(dialog, fun) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	//Creat array with all forms
	var formsHide = Array("login","register","recovery"); var i = 0;
	
	document.getElementById('wrapper').setAttribute('style', 'visibility:' + fun);
	for ( i = 0; i < formsHide.length; i++ ) {
		if ( formsHide[i] == dialog && fun == 'visible' );
			document.getElementById("dialog_" + dialog).setAttribute('style', active_style);
			document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:visible');
			formsHide.splice(i, 1);
		}
		document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:hidden');
	}
}
 
//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered. 
function add_input_text(obj) {
	var id = obj.id.split("input_");
	document.getElementById(id[1]).innerHTML = '';
}
function remove_input_text(obj) {
	if (obj.value.length == 0) {
		var id = obj.id.split("input_");
		var id2 = id[1].substr(0, 1).toUpperCase() + id[1].substr(1);
		document.getElementById(id[1]).innerHTML = id2;
	}
}
function display_form(form) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	var forms = Array("login", "register", "recovery");
	for ( c = 0; c < forms.length; c++ ) {
		if ( forms[c] == form ) {
			document.getElementById( forms[c] + "_form" ).style.visibility = "visible";
			document.getElementById("dialog_" + forms[c]).setAttribute('style', active_style);
			document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c] + ' active');
			forms.splice(c, 1);
		}
	}
	for ( c = 0; c < forms.length; c++ ) {
		document.getElementById("dialog_" + forms[c]).setAttribute('style', '')
		document.getElementById( forms[c] + "_form" ).style.visibility = "hidden";
		document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c]);
	}
}

HTML:
Code:

<span><a href="#"  id="login_dialog"  style="color:#33CCFF;">Login</a></span>
<span><a href="#"  id="register_dialog" >Register</a></span>