Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

onclick event of a div not working in Safari or Chrome

Posted on 2014-01-30
10
4,647 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

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
 

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 27

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

856 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