Results 1 to 10 of 10

Thread: Two onclick events clashing

  1. #1
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default Two onclick events clashing

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>

  3. #3
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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?

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>

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

    Schmoopy (03-29-2009)

  6. #5
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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.
    Last edited by Schmoopy; 03-29-2009 at 11:45 AM.

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    I will need some sample code (HTML and JS)

  8. #7
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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.

  9. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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?

  10. #9
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    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 "cursorointer;" 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.
    Last edited by Schmoopy; 04-01-2009 at 05:42 PM.

  11. #10
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Bump, still having problems with this, anyone?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •