CODEWITHSUNDEEP
phpjqueryajax
eMRe
eMRe

Reputation: 3247

How to add and delete with ajax or jquery

I am very new to ajax and jquery but I know some php. I have got a page where i get students detail. All i want is when i click add button that student will be inserted into paid table and that students name will show up on the page. There will be a delete button next to student`s name and it should delete the student if i click on it.

will it be hard to do this? Do you know any samples on internet?

How should my ajax code be according to my pages?

this is my student page

<?
include ("connect.php");

$id = trim($_GET['id']);

 $result = mysql_query("SELECT * FROM students
 WHERE students_id='$id'");
 while($row = mysql_fetch_array($result))
 {
 $studentname = $row['students_name'];
 }

?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>

<body>

        <form method="post" name="form">
            <input type="hidden" id="studentname" name="studentname" value="<? echo $studentname; ?>" />
            <input type="submit" id="addme" name="addme" value="Add <? echo $studentname; ?>" />
        </form>


</body>
</html>

this is my add page

<?
include ("connect.php");

if (isset($_POST['addme'])) 
{

 $studentname = $_POST["studentname"];

 mysql_query("INSERT INTO paid SET paid_name = '$studentname'");

 mysql_close($con);

}
?>

This is my delete page

<?
include ("connect.php");

  $delete = $_POST["delete"];

  mysql_query("DELETE FROM paid WHERE paid_id='$delete'");
  mysql_close($con);

?>

This is my show page:

<?

include ("connect.php");

  $result = mysql_query("SELECT * FROM paid");
  while($row = mysql_fetch_array($result))
   {
   echo $row['paid_name'];
   echo "<br>";
   }

  mysql_close($con);



?>

This is my database:

--
-- Table structure for table `students`
--

CREATE TABLE IF NOT EXISTS `students` (
  `students_id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `students_name` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`students_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

-- 
-- Dumping data for table `students`
-- 

INSERT INTO `students` VALUES (1, 'David');
INSERT INTO `students` VALUES (2, 'Lisa');
INSERT INTO `students` VALUES (3, 'Jack');
INSERT INTO `students` VALUES (4, 'Michelle');


CREATE TABLE IF NOT EXISTS `paid` (
  `paid_id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `paid_name` varchar(100) NOT NULL DEFAULT '',
  PRIMARY KEY (`paid_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

-- 
-- Dumping data for table `paid`
-- 

INSERT INTO `paid` VALUES (1, 'Michelle');
INSERT INTO `paid` VALUES (2, 'Lisa');
UPDATED#### Added my pages.

Upvotes: 1

Views: 1154

Answers (2)

Hubro
Hubro

Reputation: 59323

I encourage you to check out jQuery. It will greatly simplify the process of creating an ajax script.

You attach click events to your add and delete links. In those event functions you run the jQuery ajax function. Check the result in the ajax callback and decide whether or not to change the page html (adding or removing a student)

Upvotes: 0

Olive
Olive

Reputation: 3516

I think it would be easiest making all the functions in PHP first. Then adding jQuery/Ajax/Js on top.

However, if you still want to do it this way, I recommend reading this: http://api.jquery.com/jQuery.ajax/

Then I'd make three pages:

  1. Index (The main page)
  2. Add student page (Called using ajax, so no design needed)
  3. Delete student page (Also called using ajax, so no design needed)

Then I'd have the add_student and the delete_student page take either POST or GET arguments.

You will also need 2 JS functions:

  1. Delete student, takes the argument student_id, then calls the delete_student page with either POST or GET, through jQuery+ajax
  2. Create student, same as the above but with creating it instead.

Also, you'd need to use jQuery to add/delete the user from the page (Not only in the database), otherwise you'd have to update the page all the time.

Does this make sense?

Otherwise, feel free to ask! :)

Upvotes: 2

Related Questions