Solved

onclick event of a div not working in Safari or Chrome

Posted on 2014-01-30
10
4,537 Views
Last Modified: 2014-04-03
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
Comment
Question by:dgerler
10 Comments
 
LVL 6

Expert Comment

by:Mahesh Bhutkar
ID: 39823054
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39823651
Why do you use double-double quotes associated to the triggered events, such as onclick=""alert(.... ???
0
 

Author Comment

by:dgerler
ID: 39823694
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
 

Author Comment

by:dgerler
ID: 39823797
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:dgerler
ID: 39823982
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39824080
Your HTML calls the rs.Fields Id, I see.
0
 

Author Comment

by:dgerler
ID: 39824987
That ID has to do with the button in the database.
0
 
LVL 26

Accepted Solution

by:
skullnobrains earned 500 total points
ID: 39892932
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Several part series to implement Internet Explorer 11 Enterprise Mode
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now