Solved

onclick event of a div not working in Safari or Chrome

Posted on 2014-01-30
10
4,472 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

758 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

17 Experts available now in Live!

Get 1:1 Help Now