Two onclick events clashing

**Schmoopy** · 03-28-2009, 05:20 PM

Hi, just to get straight down to it, here is some code:

PHP Code:


echo "<tr class=\"data\" onclick=\"jobDetail('" . $row['id'] . "','" . $_SERVER['PHP_SELF'] . "','')\";

That is one of the onclick events, here is the other:

PHP Code:


onclick=\"RemoveJob("; echo $row['id']; echo ")\"

The jobDetail function redirects to a different id, like the page is "currentjobs.php", it redirects it to -> "currentjobs.php?id=12" for example. It's set up so that a user can click anywhere on the table row and they can click on that job to get more detail on it, which redirects them. The thing is, there's another button on each table row which is a delete button, allowing the user to delete an appointment if they wish.

The problem is when the delete button is clicked it runs the RemoveJob function, but then proceeds to go ahead and redirect to another page. Is there anyway I can tell the job detail function that when the delete button is pressed not to redirect?

I've tried something along the lines of "RemoveJob() && jobDetail()", trying to return false after remove job has finished, but there are 2 onclick events clashing I think so even if I return false it goes to the other onclick event and redirects through that.

Anyone else ever had this problem / know what to do about it?

Any help is appreciated, thanks

**vwphillips** · 03-28-2009, 06:01 PM

Code:

<script type="text/javascript">

function TEST(){
 var e=window.event||arguments.callee.caller.arguments[0];
 e.cancelBubble=true;
 if (e.stopPropagation) e.stopPropagation();


}

</script>
</head>

<body>
<table border="1">
  <tr>
    <td width="50" onclick="alert('TR');">1</td>
    <td width="50" onclick="TEST('TD');">DELETE</td>
  </tr>
</table>

**Schmoopy** · 03-28-2009, 06:52 PM

Thanks for the reply but that's not exactly how mine is, in the one you've posted the two onclick events are in different table data cells.

One of the onclick events in my code is attached to the table row:

<tr class="bla" onclick="jobDetails()">

And then the other onclick is in one of the table data cells within that same row:

<tr class="bla" onclick="jobDetails()">
<td><a onclick="RemoveJob()"><img src="delete.jpg"></a></td>
</tr>

Any other suggestions?

**vwphillips** · 03-29-2009, 08:13 AM

Code:

<script type="text/javascript">

function TEST(){
 var e=window.event||arguments.callee.caller.arguments[0];
 e.cancelBubble=true;
 if (e.stopPropagation) e.stopPropagation();


}

</script>
</head>

<body>
<table border="1">
  <tr onclick="alert('TR');">
    <td width="50">1</td>
    <td width="50" onclick="TEST('TD');">DELETE</td>
  </tr>
</table>

**Schmoopy** · 03-29-2009, 11:12 AM

Great! That worked, thanks a lot

Edit: Slight problem, after I've deleted an appointment now, I can't call the jobDetail function again and the cursor doesn't go to a pointer, I imagine this is because of the script stopping propogation but I really need it to reenable after I've deleted a job.

Edit2: Ok another bigger problem is that I can only delete one job and if I try to delete another it will just mess it up and clear all the jobs, not deleting them, but they can't be seen anymore. Hope you know what to do

Thanks.

**vwphillips** · 03-29-2009, 02:21 PM

I will need some sample code (HTML and JS)

**Schmoopy** · 03-29-2009, 03:04 PM

Ok here is all the code I have so far concerning the onclick events:

Code:

<table id="currentjobs"><tr class="headings"><th class="first">Invoice Number</th><th>Name</th><th>Start</th><th>Finish</th><th>Job Description</th><th>Boat Type</th><th id="last"></th></tr>
while($row = mysql_fetch_array($query)) // Go through all records in the database, echo the following code for each record found
{
<tr class="data" onclick="document.location='" . $_SERVER['PHP_SELF'] . "?id=" . $row['id'] . "'" title="Click to view job"><td>" . "M" . $row['id'] . "</td><td>" . $row['name'] . "</td><td>". convertDate($row['start_date']) . "</td><td>" . convertDate($row['finish_date']) . "</td>";
						
			<td>" . $row['description'] . "</td><td>" . $row['boat_type'] . "</td><td class="last"><a class="remove" title="Delete Job" onclick="RemoveJob("; echo $row['id']; echo ")"></a></td></tr>";
			}
			echo "</table>";

There's some PHP mixed in with it all but shouldn't affect the function.

RemoveJob function:

Code:

function RemoveJob(id)
{
	var e=window.event||arguments.callee.caller.arguments[0];
	e.cancelBubble=true;
	if (e.stopPropagation) e.stopPropagation();
 
	var response = confirm('Are you sure you want to delete the job?');
	if (response == true)
	{
	new Ajax.Request("removeapp.php", 
		{ 
		method: 'post', 
		postBody: 'id=' + id + '&type=job',
		onComplete: refreshTable
		});
	}
	return false;
}

Hope this helps.

**vwphillips** · 03-30-2009, 03:22 PM

I have a bit of a problem helping when PHP is posted rather than rendered HTML

but
It appears that the delete link has no content, how is it clicked?

You mention a cursor, what cursor?

What is the serverside code doing?

**Schmoopy** · 03-30-2009, 04:41 PM

Oh, I didn't post the serverside stuff, thinking it wasn't really related to the onclick events but it's hard to just do the HTML since the PHP is pretty vital, some of the code would not make any sense if there's no PHP in it.

So RemoveJob() sends a request to removeapp.php which looks like this (irrelevant bits taken out... the AJAX uses the prototype library, so it's a bit different):

PHP Code:


<?php
if ($_POST['id'] && isset($_POST['type']) && $_POST['type'] == 'job')
{
    $id = $_POST['id'];
    $query = "DELETE FROM enquiries WHERE `id`='$id'";
    
    if(mysql_query($query))
    {
        
        $query = mysql_query("SELECT * FROM enquiries WHERE `finish_date` >= '$datenow'");
    
    if (mysql_num_rows($query)) // If there are any records present in the database, execute following
    {    
        echo "<table id=\"appstoday\">\n<tr class=\"headings\"><th class=\"first\">Invoice Number</th><th>Name</th><th>Start</th><th>Finish</th><th>Job Description</th><th>Boat Type</th><th id=\"last\"></th></tr>\n";
        while($row = mysql_fetch_array($query)) // Go through all records in the database, echo the following code for each record found
        {
        echo "<tr class=\"data\"><td>" . "M" . $row['id'] . "</td><td>" . $row['name'] . "</td><td>". $row['start_date'] . "</td><td>" . $row['finish_date'] . "</td>";
                    
        echo "<td>" . $row['description'] . "</td><td>" . $row['boat_type'] . "</td><td class=\"last\"><a class=\"remove\" title=\"Delete Job\" href=\"javascript:RemoveApp("; echo $row['id']; echo ")\"></a></td></tr>\n";
        }
        echo "</table>";
        
    }
    else
    {
        echo "No jobs have been added."; // If no records found in the database for today's date
    }
    
    }
}

?>

Which pretty much updates the table, but it's not output yet. So then it sends a request to refreshTable which is simply:

Code:

function refreshTable(req){
$('appdiv').innerHTML= req.responseText;
}

Which just echoes that in the "appdiv" div.

"It appears that the delete link has no content, how is it clicked?"

Answer: The content is an image, a delete button this one to be precise:

So that is how the onclick event is called.

The cursor I was talking about isn't really important it was more just signifying that there was no link any more, after a job has been deleted.
The cursor in the CSS is defined as "cursor

ointer;" since onclick events have normal cursors on.

Tell me if I've missed anything and I'm very grateful for all the help you've given me so far.

**Schmoopy** · 04-01-2009, 05:43 PM

Bump, still having problems with this, anyone?

Thread: Two onclick events clashing

Thread Tools

Search Thread

Two onclick events clashing

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions