Ajax Help Please, trying to call a php script via an onclick event?

[LJackson]

is it possible to use an onclick event command on a text link to call a php script which deletes a specific row from a mysql db table?

here is what i have so far.

my text link code

<a class="deleteRow" onclick="
  $.ajax({
    type: 'post',
    url: "http://www.{WEBSITEDOMAIN}.co.uk/delete.php",
    data: {joodb field|id},
  });
;" href="#">Delete</a>

and my php file

PHP Code:

<?php
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
  $id = (int) $_POST['id'];
  // make sql query to remove element with given id
  echo '<script type="text/javascript">window.alert("$id")</script>';
}?>

at the moment the php file just displays an alert box, just to confirm the script is being called and the correct id value is being passed.

unfortunately when i press on the text link nothing happens, or so it appears! if i open firebug and then click on the console tab it gives the following error

SyntaxError: syntax error
https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=18
Line 13

which is odd as there is no facebook on this page??? and the error only comes up when i click on the text link.

can anyone help me with this please?
many thanks

Luke

[DanInMa]

well , since something else on the page is affecting this code, you ned to show more.

also what syntax is this : data: {joodb field|id} ?
I dont see where your getting the id of the item to delete and assigning it to the ajax call. also why add a script block to every delete button you generate?

you could jsut use soemthing like

 $('.deleterow').click(function (e) {
e.preventDefault();//prevent default click action for the anchor
 $.ajax({
    type: 'post',
    url: "http://www.{WEBSITEDOMAIN}.co.uk/delete.php",
    data: {'id':codetogetid_here},
  });
})

[LJackson]

hi, thanks for your quick reply,

the site is a joomla website and i'm using a plugin to access the db and its the plugin which creates the syntax {joodb field|id} - that code is telling the script to get the id value from the database, thats how im getting the correct id values

the full form code is

<h2 class="filter">Waiting List</h2>
<div class="table">
<div class="tbl_headers">
<div class="tbl_header">{joodb orderlink|name|Name}</div>
<div class="tbl_header_small">D.O.B</div>
<div class="tbl_header_small">{joodb orderlink|gym_discipline|Discipline}</div>
<div class="tbl_header_small">{joodb orderlink|school_yr|School Year}</div>
<div class="tbl_header">Contact Number</div>
<div class="tbl_header">Email</div>
</div>
<div class="records">{joodb loop}
<div class="record">
<div class="name">{joodb field|name}</div>
<div class="dob">{joodb field|dob}</div>
<div class="discipline">{joodb field|gym_discipline}</div>
<div class="school">{joodb field|school_yr}</div>
<div class="contact">{joodb field|contact_number}</div>
<div class="contact">{joodb field|email_address}</div>
<a class="deleteRow" onclick="
  $.ajax({
    type: 'post',
    url: "http://www.{WEBSITEDOMAIN}.co.uk/delete.php",
    data: {joodb field|id},
  });
;" href="#">Delete</a>
</div>
{joodb loop}</div>
</div>

the website it not live yet so its hard to show you the error or the rest of the code as im not sure which code might be effecting the script or where to find it

thanks
Luke

[DanInMa]

maybe it should be data: {'id':joodb field|id} ?
perhaps you are just supplying the ID and not a key to pair the ID value with?

[LJackson]

i think you are correct as alot of example i've seen state a key to the data, but unfortunately the script still doesnt work

[LJackson]

can you see anything wrong with this code

<a class="deleteRow" onclick="
$('.deleteRow').click
(
    function()
    {
        $.get('/delete.php', function(data){alert('Server Returned: ' + data);});
        return false;
    )
);" 
href="#">Delete</a>

its throwing up a syntax error with the last ) any ideas where the code it incorrect?

EDIT
====

Ok noticed that one of the brackets were incorrect ) instead of }

now its throwing up another syntax error
TypeError: $(...) is null???

any ideas?

thanks

[DanInMa]

[QUOTE=LJackson;1306735]can you see anything wrong with this code

<a class="deleteRow" onclick="
$('.deleteRow').click
(
    function()
    {
        $.get('/delete.php', function(data){alert('Server Returned: ' + data);});
        return false;
    )
);" 
href="#">Delete</a>

you kinda went the wrong direction there. they way you have it written you are assigning the .click function , when clicking the link. Youve used some of my example, but incorrectly. My example was an attempt to show you how to bind the same action to any element with a class of deleterow, not to an individual row. also im not seeing where you are including the ID, and you are using get instead of post, Im pretty sure you should be using post for this.

give me a few Ill show you maybe an easier way to do this.

[DanInMa]

here's a different way.

add this to the head section in a script block, or even at the bottom of the body element in a script block.

OK so I am using .on, this will bind the function to any new elements in the dom. If you are using an older version of jquery you may need to use .live instead of .on.

Ok so what I am doing is assigning this function to any element with a class of deleterow.

$(function(){
$('.deleterow').on('click', function(e)
   {
       e.preventDefault();//prevent anchor from performing default click action so you dont need to use return false
       var ThisID= $(this).attr('rel');// get value of clicked links rel attribute
       $.ajax({
          type: 'post',
         url: "http://www.{WEBSITEDOMAIN}.co.uk/delete.php",
         data: {id:ThisID} //post to delete page using the rel attribute value as the id ( this assumes it's "id" in lowercase)
        });      
   }
})
;

<a class="deleteRow" rel="joodb field|id" href="#">Delete</a>

thi sis all the deleterow link needs. ( dont assign the record ID to the as the actual id for the anchor link as html element id's should not begin with a number)

ok, so hopefully this works. I am assuming youd like to do some simple error handling?
Also did you want anything on the currrent page to change, as you will still be viewing a now deleted record?

[LJackson]

ok thanks mate appreciate it,

i've been going round in circles with this

because im using joomla im not sure how to add the script to the head section of the page, i'll have a look around and get back to you

[LJackson]

ok found out where to put it, i had to chance the script slightly as there was a missing bracket, and changed .deleterow to .deleteRow so its now

<script type="text/javascript">
$(
	function()
	{
		$('.deleterow').on('click', function(e)
		{
			e.preventDefault();//prevent anchor from performing default click action so you dont need to use return false
			var ThisID= $(this).attr('rel');// get value of clicked links rel attribute
			$.ajax({
			type: 'post',
			url: "/delete.php",
			data: {id:ThisID} //post to delete page using the rel attribute value as the id ( this assumes it's "id" in lowercase)
			});      
		})
	}
)
</script>

now i have no errors on my page however when i click on the delete button nothng happens but also no errors so surely thats a good thing

my php code is

PHP Code:

<?php
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
      $id = $_POST['id'];
      // make sql query to remove element with given id
      $query = "DELETE FROM pzgym_waitinglist WHERE id=$id";
    $database->setQuery( $query );
    $database->query();
}?>

but as i say nothing happens when i click the delete button, how do i debug the page to check the value of id has passed correctly and if its found delete.php?

many thanks
Luke

[LJackson]

i've just been told on the joomla forum that joomla code doesnt work outside of joomla? so i'm guessing thats why nothing seems to be working

is it possible to delete db records using just javascript or jquery?

thanks