Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

onclick event of a div not working in Safari or Chrome

Posted on 2014-01-30
10
Medium Priority
?
5,039 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
[X]
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
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 2000 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

Industry Leaders: 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!

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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.
Suggested Courses

604 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