title: inline Edit Remove using Ajax/Jquery in PHP MySql
body: <p>This is new for me. I don't know how to start with jquery. I am trying to make inline edit using Ajax. I found this code somewhere. But I am not able to make it. In <code>config.php</code> I have configured all the database connection and in <code>response.php</code> I have set sql query with php. In database I have 2 columns <code>id</code> and <code>content</code>.</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Ajax Add/Delete a Record with jQuery Fade In/Fade Out&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  //##### send add record Ajax request to response.php #########
  $("#FormSubmit").click(function (e) {
          e.preventDefault();
          if($("#contentText").val()==='')
          {
              alert("Please enter some text!");
              return false;
          }
          var myData = 'content_txt='+ $("#contentText").val(); //build a   post data structure
          jQuery.ajax({
          type: "POST", // HTTP method POST or GET
          url: "response.php", //Where to make Ajax calls
          dataType:"text", // Data type, HTML, json etc.
          data:myData, //Form variables
          success:function(response){
              $("#responds").append(response);
              $("#contentText").val(''); //empty text field on successful
          },
          error:function (xhr, ajaxOptions, thrownError){
              alert(thrownError);
          }
          });
  });
  
  //##### Send delete Ajax request to response.php #########
  $("body").on("click", "#responds .del_button", function(e) {
       e.returnValue = false;
       var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
       var DbNumberID = clickedID[1]; //and get number from array
       var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
  
          jQuery.ajax({
          type: "POST", // HTTP method POST or GET
          url: "response.php", //Where to make Ajax calls
          dataType:"text", // Data type, HTML, json etc.
          data:myData, //Form variables
          success:function(response){
              //on success, hide  element user wants to delete.
              $('#item_'+DbNumberID).fadeOut("slow");
          },
          error:function (xhr, ajaxOptions, thrownError){
              //On error, we alert user
              alert(thrownError);
          }
          });
  });
  
  });
  &lt;/script&gt;
  
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="content_wrapper"&gt;
  &lt;ul id="responds"&gt;
  &lt;?php
  //include db configuration file
  include_once("config.php");
  
  //MySQL query
  $Result = mysql_query("SELECT id,content FROM add_delete_record");
  
  
  //get all records from add_delete_record table
  while($row = mysql_fetch_array($Result))
  {
    echo '&lt;li id="item_'.$row["id"].'"&gt;';
    echo '&lt;div class="del_wrapper"&gt;&lt;a href="#" class="del_button" id="del-'.$row["id"].'"&gt;';
    echo '&lt;img src="images/icon_del.gif" border="0" /&gt;';
    echo '&lt;/a&gt;&lt;/div&gt;';
    echo $row["content"].'&lt;/li&gt;';
  }
  
  //close db connection
  mysql_close($connecDB);
  ?&gt;
  &lt;/ul&gt;
  &lt;div class="form_style"&gt;
  &lt;textarea name="content_txt" id="contentText" cols="45" rows="5"&gt;&lt;/textarea&gt;
  &lt;button id="FormSubmit"&gt;Add record&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>response.php</strong></p>
  
  <pre><code>&lt;?php
  //include db configuration file
  include_once("config.php");
  
  if(isset($_POST["content_txt"]) &amp;&amp; strlen($_POST["content_txt"])&gt;0) 
  {   //check $_POST["content_txt"] is not empty
  
  //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
  $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); 
  
  // Insert sanitize string in record
  if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))
  {
       //Record was successfully inserted, respond result back to index page
        $my_id = mysql_insert_id(); //Get ID of last inserted row from MySQL
        echo '&lt;li id="item_'.$my_id.'"&gt;';
        echo '&lt;div class="del_wrapper"&gt;&lt;a href="#" class="del_button" id="del-'.$my_id.'"&gt;';
        echo '&lt;img src="images/icon_del.gif" border="0" /&gt;';
        echo '&lt;/a&gt;&lt;/div&gt;';
        echo $contentToSave.'&lt;/li&gt;';
        mysql_close($connecDB); //close db connection
  
  }else{
  
      //header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.
      header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
      exit();
  }
  
  }
  elseif(isset($_POST["recordToDelete"]) &amp;&amp; strlen($_POST["recordToDelete"])&gt;0 &amp;&amp; is_numeric($_POST["recordToDelete"]))
  {   //do we have a delete request? $_POST["recordToDelete"]
  
  //sanitize post value, PHP filter FILTER_SANITIZE_NUMBER_INT removes all characters except digits, plus and minus sign.
  $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT); 
  
  //try deleting record using the record ID we received from POST
  if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))
  {    
      //If mysql delete query was unsuccessful, output error 
      header('HTTP/1.1 500 Could not delete record!');
      exit();
  }
  mysql_close($connecDB); //close db connection
  }
  else
  {
  //Output error
  header('HTTP/1.1 500 Error occurred, Could not process request!');
  exit();
  }
  ?&gt;
  </code></pre>
  
  <p>Thanks &amp; Regards</p>
  
  <p>Vaibhav</p>