update .onclick event

[Roebuc]

Hello all, I am trying to update the .onclick event after its been clicked once. Everything works fine in my script except updating the .onclick event. I have searched the web and found that I should do the following:

div.onclick = function(params);

or

div.onclick = new function(){updatedStatement};

I have tested both of these steps in IE and FF with no luck. Here is my code:

function movePhrase(OPT,MENU,ID,DIR,LEVEL){
		
		if(DIR == "up"){
			var num = OPT - 1;
		}else{
			var num = OPT + 1;
		}
		
		var phraseID = "option" + OPT;
		var newPhraseID = "option" + num;
		var linkID = "link" + OPT;
		var newLinkID = "link" + num;
		var upImgID = "up" + OPT;
		var downImgID = "down" + OPT;
		var newUpImgID = "up" + num;
		var newDownImgID = "down" + num;
		
		if(OPT == 1){
			var downDiv = document.getElementById(downImgID);
			var newDownDiv = document.getElementById(newDownImgID);
			var newUpDiv = document.getElementById(newUpImgID);
		}else if(OPT == 0){
			var upDiv = document.getElementById(upImgID);
			var newUpDiv = document.getElementById(newUpImgID);
			var newDownDiv = document.getElementById(newDownImgID);
		}else{
			var upDiv = document.getElementById(upImgID);
			var downDiv = document.getElementById(downImgID);
			var newDownDiv = document.getElementById(newDownImgID);
			var newUpDiv = document.getElementById(newUpImgID);
		}
		
		var currentLink = document.getElementById(linkID);
		var newLink = document.getElementById(newLinkID);
		
		var linkURL = currentLink.href;
		var newLinkURL = newLink.href;
		
		var currentPhrase = document.getElementById(phraseID);
		var newPhrase = document.getElementById(newPhraseID);
		
		var text = currentPhrase.innerHTML;
		var newText = newPhrase.innerHTML;
		
		var params = "source=phrases&id="+ID+"&num="+OPT+"&move="+DIR+"&menu="+MENU+"&level="+LEVEL;
		
		if (ID != "notSet"){
			xhttp.open("POST","ajax.php",true);			
			xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhttp.setRequestHeader("Content-length", params.length);
			xhttp.setRequestHeader("Connection", "close");
			xhttp.onreadystatechange = function(){
				var msgDiv = document.getElementById("message");
				var msg = "Never Set";
				if(xhttp.readyState == 4) {
					msg = xhttp.responseText;
				}else{
					var readyState = xhttp.readyState;
					msg = "Ready State: "+readyState+"<br />";
				}
				
				msgDiv.innerHTML = msg;
			}
			xhttp.send(params);

		}
		
		if(OPT == 1){
			downDiv.onClick = newOnClcik(OPT,MENU,ID,'down',LEVEL);
			newDownDiv.onClick = newOnClcik(num,MENU,ID,'down',LEVEL);
			newUpDiv.onClick = newOnClcik(num,MENU,ID,'up',LEVEL);
		}else if(OPT == 0){
			upDiv.onclick = newOnClcik(OPT,MENU,ID,'up',LEVEL);
			newUpDiv.onclick = newOnClcik(num,MENU,ID,'up',LEVEL);
			newDownDiv.onclick = newOnClcik(num,MENU,ID,'down',LEVEL);
		}else{
			upDiv.onclick = newOnClcik(OPT,MENU,ID,'up',LEVEL);
			downDiv.onclick = newOnClcik(OPT,MENU,ID,'down',LEVEL);
			newDownDiv.onclick = newOnClcik(num,MENU,ID,'down',LEVEL);
			newUpDiv.onclick = newOnClcik(num,MENU,ID,'up',LEVEL);
		}
		
		currentLink.href = newLinkURL;
		newLink.href = linkURL;
		
		currentPhrase.innerHTML = newText;
		newPhrase.innerHTML = text;
		
	}
	
	function newOnClcik(opt,menu,id,level,dir){
		var string = "movePhrase("+opt+","+menu+","+id+",'"+dir+"',"+level+")";
		
		return string;
	}

Below is an example or the div code I am trying to update:

<div id="downImage1">

								<img id="down1" src="images/downArrow.JPG" onmouseover="this.src='images/downArrowPressed.JPG'" onclick="movePhrase(1,20,331,'down',1)" onmouseout="this.src='images/downArrow.JPG'"  width="40" height="40" />
							</div>

Any help would be appreciated.

[Airshow]

There's so much code there, I can't really work out what you are trying to do. Can you provide more explanation please and/or a complete page (as far as you have developed it).

Airshow

[Roebuc]

Those are the complete functions for javascript. I realize there is a lot of code, I have not optimized it as I am trying to make sure I am covering every little piece correctly.

Basically, I have a form with 10 text areas. Each of these textareas could have children. So each option needs to be able to drill down on. The form is built in 3 columns. On the left, 2 arrows; up or down. The middle column is the textarea and the final column is a link to the child. When the up or down option is clicked, the following actions happen:

1 > The database is updated with the new sequence of the two updated textareas. There are two updated textareas because the chosen option is swapped with the option above it or below it.

2 > The text of the textareas on the enduser page are swapped.

3 > The links to the children are swapped.

4> The up and down buttons onclick events need to be updated reflecting the new parentid, option(sequence number) and some other parameters.

This all works except updating the onclick event. I have given up on updating the onclick event. I have re-wrote the function in php and have javascript call the function.

However, my question still stands. I have read many forums saying this is possible, updating the onclick event. However, I have tried this and tested in multiple browsers and I cannot get it to work. I have a couple of thoughts on the matter and was hoping someone could confirm or present an example of how to do this:

1) In my example, the onclick is in an image tag. ie:

<img src="image" onclick="event" />

Maybe that is not allowed?

2) The most recent conversation I can find on the subject in forums is early October. There has been a released update for both IE and FF. Perhaps this was changed for security reasons in the update? I cannot find any information on this but I can see where a potential security risk is.

Anyways, I would really appreciate any further insight on this. Thank you for taking the time to look into it airshow.

[Airshow]

Roeboc,

OK, I understand much better now but maybe you could post the entire HTML - that's what's missing more than the js.

Meanwhile, I have cobbled together a demo to show you how to swap two adjacent elements. It's not exactly what you want but it should show you how to do it simply and concisely.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Move UP/DOWN</title>
<script>
onload = function(){
	for(var i=1; i<=4; i++){
		var el = document.getElementById('d'+i);
		el.onclick = function(e){
			e = e || event;
			var a = (e.altKey) ? this.nextSibling : this;
			var b = (e.altKey) ? this : this.previousSibling;
			if(a && b){
				var p = this.parentNode;
				p.removeChild(a);
				p.insertBefore(a, b);
			}
		}
	}
}
</script>
</head>

<body>

<div>
	<div id="d1">1 1 1 1 1 1 1</div>
	<div id="d2">2 2 2 2 2 2 2</div>
	<div id="d3">3 3 3 3 3 3 3</div>
	<div id="d4">4 4 4 4 4 4 4</div>
</div>

<p style="font-size:12px;">
Click rows to move up/down<br />
<span style="font-size:10px;">
Up: Click<br />
Down: Alt-click
</span>
</p>

</body>
</html>

I tested in IE6 and the latest FF and some reason FF (on my computer at least) is very slow to get the hang of what is required of it. With IE it is instantaneous.

No more time now. Maybe you will have posted again when I get home from work this evening.

Must dash.

Airshow

[Roebuc]

I have not done OOP for javascript yet. Could you explain the following for me?

el.onclick = function(e){
			e = e || event;
			var a = (e.altKey) ? this.nextSibling : this;
			var b = (e.altKey) ? this : this.previousSibling;
			if(a && b){
				var p = this.parentNode;
				p.removeChild(a);
				p.insertBefore(a, b);
			}

Why e = e || event; Why not just e = event;

Why the ? and :

Both events have the .altKey attached, how are you telling it to just be click?

I am assuming removeChild and insertBefore are standard parentNode functions?

I did put this into a page on my server and tested it. I will try tieing this into my project. Sorry for the questions, I am a student and this is for a school project. Just trying to understand what I am doing.

[Airshow]

I'm glad you're asking questions and will try to explain but you may also need to do some background reading. The internet is your best resource. e = e || event; is present for cross-browser purposes. IE and Mozilla handle events differently and this is the most economical way to unify the two types of "event object" into a single variable within the handler function. Read this line as "if e exists then use it (Moz), otherwise use the global variable event " (IE). We could have written e = e || window.event; , which is identical. By setting the result to e , we need only consider e from that point on within the function. ?: together form the so-called "conditional operator" or "ternary operator". It takes three arguments and occurs in several programming languages. It is a concise form of an if(){...}/else{...} structure. Best read about it elsewhere, eg, here. It is well worth learning. e.altkey is not attached, it is tested. This is purely a mechanism that I used to allow my demo to do an upward swap or a downward swap, depending on whether the alt key is pressed when the user clicks the mouse. You will be using dedicated up/down buttons so this aspect will most probably disappear in your code. removeChild() and insertBefore() are indeed standard methods. They can be applied to many types of Document Object Model (DOM) node. In this case we apply it to the clicked element's parenetNode. Your code will probably differ in this respect. From what you say in your second post, I think you want to swap two table rows in response to a click inside one of the row's cells. You may need to use .parentNode.parentNode to climb up from the clicked element (via the table cell) to the table row.

Swapping table rows is much much easier than swapping their contents one piece at a time, which is what I think you were attempting.

Airshow