Member Avatar for sugumarclick

Hi All,
I'm developing a Calendar project . I have all the concepts and framework with me upto my knowledge.
I need to show the events on a particular day which i will fetch it from mysql values by PHP.
Forgive me if im not posting in a professional way.

<td class="cal_events" onclick="createEventonDate('18-3-2010')">//createEventonDate('18-3-2010') makes the form for events creation asking for event name and event place
	<a title="" href="showMonthEvents.php?event=67&sho=0">18</a>
	<br/>
	
	<div id="viewEvent18-3-2010" style="display: none; height: 121px; width: 229px;"> // I will Not show this div content until an Onclick Event, which calls 
displayEvent(18) occurs.
	<p>1st Event</p>
	<p>2nd Event</p>
	<p>
		<a id="close" onclick="closeViewEvents(18)" href="javascript:void(0)">Close</a>
	</p>
	</div>
	<p onclick="displayEvent('18-3-2010')">Show events on 18</p> // displayEvent(18-3-2010) makes the viewEvent18-3-2010 display:block from display:none;
</td>

:

But what my problem is Onclick <p> tag is available inside the <td> so that whenever the function displayEvent('18-3-2010') on <p> tag is called automatically "createEventonDate('18-3-2010')" is called on background. I can manually make to hide the form in displayEvent(18-3-2010) function which is not the right way,makes the design collapse and also it doesnt make sense in a professional manner. how to solve this problem. I will be pleased to anyone who Have come across these kind of problems and help me.ANY SUGGESTIONS. I dont where im going wrong. '(:'(;);)

  • 3 Contributors
  • 3 Replies
  • 1K Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by littlealien88
Member Avatar for Airshow

Sugumarclick,

The easiest way by far to avoid the problem you are experiencing is not to have an onclick event handler associated with your table cell; find an alternative way of achieving the required action.

However, if you must have this event handler, then you can still achieve what you want but you are forced into writing your code in a very different way.

The reason for this is that we need to be able to stop what is known as "event propogation" which is the browser feature causing your problem. And in order to stop event propogation, we need access to the "event" itself, and this is not possible in all browsers with event handlers attached inside HTML tags.

The solution is to attach event handlers in javascript, where we have greater control and freedom. Sooner or later most web developers find that they have to attach events this way and can even get to like it.

Here's a modified version of your markup with the necessary Javascript (and some CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.eventBox {
	display: none;
	height: 121px;
	width: 229px;
	margin-top: 6px;
	padding: 6px;
	background-color: #e0f0e0;
	border: 1px solid #9e9;
}
</style>
<script>
function createEventonDate(dateStr) {
	alert('createEventonDate');
}
onload = function(){
	function stopPropogation(e){
		e.cancelBubble = true;
		if(e.stopPropagation) { e.stopPropagation(); }
	}
	function eventBoxOpenerCloser(e, action) {//This function opens/closes 'viewEvent' boxes.
		// Note that e is passed through to this function such that :
		// a) we can obtain the clicked element's 'date' attribute (thence the id of the box to open/close).
		// b) we can pass it to stopPropogation() to inhibit a parent element's onclick handler.
		e = e || event;//Shorthand cross-browser way to refer to the (click) event.
		var target = e.target || e.srcElement;//Shorthand cross-browser way to refer to the target (clicked) element.
		var dateStr = target.getAttribute('date');//Get the custom  HTML attribute 'date'
		var el = document.getElementById('viewEvent' + dateStr);//Form reference to the corresponding box
		if(el) { el.style.display = (action) ? 'block' : 'none'; }//Open/close the box, as determined by formal variable 'action'.
		if(target.blur) { target.blur(); }//Hide ugly browser carat.
		stopPropogation(e);//Prevent events firing higher up in the DOM.
		return false;
	};
	var links = document.getElementsByTagName('a');
	for(var i=0; i<links.length; i++) {//Loop through all <a> nodes
		if(links[i].className == 'eventBoxOpener') {//if link is an 'eventBoxOpener'
			links[i].onclick = function(e){ return eventBoxOpenerCloser(e, 1); }//Call opener/closer, passing the event (e) and the "open" action
		}
		if(links[i].className == 'eventBoxCloser') {//if link is an 'eventBoxCloser'
			links[i].onclick = function(e){ return eventBoxOpenerCloser(e, 0); }//Call opener/closer, passing the event (e) and the "close" action
		}
	}
	var divs = document.getElementsByTagName('div');
	for(var i=0; i<divs.length; i++) {//Loop through all <div> nodes
		if(divs[i].className == 'eventBox') {//if div is an 'eventBox', the allow a click on the box to close itself
			divs[i].onclick = function(e){ return eventBoxOpenerCloser(e, 0); }//Call opener/closer, passing the event (e) and the "close" action
		}
	}
}
</script>
</head>
<body>
<table cellpadding="6" cellspacing="0" border="1">
<tr>
<td class="cal_events" onclick="createEventonDate('18-3-2010')">
	//createEventonDate('18-3-2010') makes the form for events creation asking for event name and event place
	<a title="" href="showMonthEvents.php?event=67&sho=0">18</a>
	<div id="viewEvent18-3-2010" class="eventBox" date="18-3-2010">
		 // I will Not show this div content until an Onclick Event, which calls displayEvent(18) occurs.
		 <p>1st Event</p>
		 <p>2nd Event</p>
		 <p><a href="" class="eventBoxCloser" date="18-3-2010">Close</a></p>
	</div>
	<p><a href="" class="eventBoxOpener" date="18-3-2010">Show events on 18</a></p>
	// displayEvent(18-3-2010) makes the viewEvent18-3-2010 display:block from display:none;
</td>
</tr>
</table>
</body>
</html>

NOTES:

  • I have left onclick="createEventonDate('18-3-2010')" in the <td> tag to show that you can have mixed HTML- and Javascript-attached event handlers (though it's not generally considered good practise).
  • Your <a title="" href="showMonthEvents.php?event=67&sho=0">18</a> should really be attached in javascript similarly to the box openers/closers.

For detailed explanation see comments in code.

Airshow

Edited by Airshow because: n/a
Member Avatar for sugumarclick

Hi Airshow,
It works. Stop propogation is the function which i was searching over a week. Cheers for you. .Simply great

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.