Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5214
  • Last Modified:

onclick event of a div not working in Safari or Chrome

Hi. I have a div with an onclick event. It works in FF and IE, but not Safari or Chrome.
I've been searching, but what I have found has not fixed it.

Even the first alert(); fails. When I click on the div, I get nothing.

Any assistance is appreciated.

html with div:
	theRows(rowCount) = theRows(rowCount) & "              <div id=""" & rs.Fields("id") & """ class=""keyBox_theButton"" style='background-color: " & rs.Fields("NormalClr")  & "; color: " & rs.Fields("NormalCompClr") & ";' onmousedown=""alert(''):"" onclick=""alert('');clickedButton('" & rs.Fields("id") & "','" & sStore & "');"" onMouseOver=""javascript: KeyFlyOver('" & rs.Fields("id") & "');"" onMouseOut=""javascript: KeyFlyOff('" & rs.Fields("id") & "');"" >" & rs.Fields("description") &  "</div>" & vbcrlf

Open in new window


and the javascript:
function clickedButton( id, store )
{

// we could go with the right click here so that we can separate that from the edit...
	alert(beenDragged);
	var e = window.event;
	if(e)
	{
		var curMouseX = e.clientX;
		var curMouseY = e.clientY;
		clickMode = e.button;
	}
//	alert("1");
	if(beenDragged == true)
	{
		beenDragged = false;
		return;
	}

//alert("2");
  if(processing)
  {
    	alert("Processing.  Please Wait");
    	return;
  }
  // we get this if we are dragging or not.
  // the only way to know if we are clicking or dragging is to wait for the
  // timer to expire then if we are not dragging, we are clicking...
//alert("3");
  processing = true;

  if(LastLitButton != "0" && LastLitButton != id )
  {
  	document.getElementById(LastLitButton).style.backgroundColor = theColors[LastLitButton].getNormalColor();
	document.getElementById(LastLitButton).style.color = theColors[LastLitButton].getNormalCompColor();
  }
//alert("4");
  document.getElementById(id).style.backgroundColor = theColors[id].getSelColor();
  document.getElementById(id).style.color = theColors[id].getSelCompColor();
  LastLitButton = id;
//alert("5");
	var myhtml = "<iframe FRAMEBORDER='0' src='KeyDetail.asp?ID=" + id  + "&Store=<%= sStore %>' width='550' height='600'>"

	var divs = document.getElementById(id);
	var left = getLeftPos(divs);
	var top = getTopPos(divs);
	document.getElementById('MYDIV').innerHTML = myhtml
//alert("6");
	// here we need to know which colors to set the button to a
	// and which button was lit last so we can turn it off.
	activate(-1);
}

Open in new window

0
dgerler
Asked:
dgerler
1 Solution
 
Mahesh BhutkarCommented:
onclick=""alert('');clickedButton('" & rs.Fields("id") & "','" & sStore & "');""

Open in new window


what is significance of alert(''); here?

You are calling clickedButton() function here.

function clickedButton( id, store )
{

// we could go with the right click here so that we can separate that from the edit...
	alert(beenDragged);

Open in new window


where beenDragged variable defined here?
0
 
Sar1973Commented:
Why do you use double-double quotes associated to the triggered events, such as onclick=""alert(.... ???
0
 
dgerlerAuthor Commented:
Why do you use double-double quotes associated to the triggered events, such as onclick=""alert(.... ???
The code is from a classic ASP page and to to produce single quotes it requires double quotes.
i.e. to get onclick="alert('test');" I have to write onclick=""alert('test');""


what is significance of alert(''); here?

I was attempting to check whether the onclick event was even being called at all. I do not get the alert so I don't think it is being raised at all.

where beenDragged variable defined here?
It is defined at the document level and set true or false in another function.

I did some other testing and with the onMouseOver event and I was able to produce the alerts just fine.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dgerlerAuthor Commented:
ok.. I remove the call to clickedButton from the onclick event and left only the alert('clicked');
I didn't get the alert. However, I noticed if I worked in another window entirely then moved to the page in question and the first click on the page was a button I would get the alert with clicked. If I clicked again, it failed. Focus another window and come back it worked.

Now that tells me the problem is with events occurring before the click. I'm trying to learn the debuggers with Safari and chrome (never used them before), but I thought I'd share the source to the entire page and maybe someone else can find it faster than I can.
The source is in the attached file.
KeyboardTop.asp-files--2-.zip
0
 
dgerlerAuthor Commented:
I may have found it, but I don't know what to do about it.
In dnd.js function dragDropMove contains the following code
	if(e.button!=1 && document.all &&  !operaBrowser )
 	{
		dragDropEnd();
	}

Open in new window

I didn;t write this code so I'm not entirely sure what the purpose of the use of document.all is here, but I know it's undefined and not supported in Chrome. I see it's recommended to use of document.getElementById(), but what Id should I use?
0
 
Sar1973Commented:
Your HTML calls the rs.Fields Id, I see.
0
 
dgerlerAuthor Commented:
That ID has to do with the button in the database.
0
 
skullnobrainsCommented:
window.event is the microsoft way

in the normal way (w3c-approved), the event object is passed as the first argument of the callback function

you also should use the function's name as the onclick property or bind the click event in js

try something like this


element.onclick = function(event) {
  event = event || window.event
  ...
}

you don't need to pass the id as an argument : the id will be available from within the function as "this.id". i have no idea about the store stuff.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now