title: ajax a href onclick get php variable and execute php file
body: <p>Before I ask this question, I have already referred to the example of <a href="https://stackoverflow.com/questions/10241259/run-php-code-when-user-clicks-link-and-pass-variables?rq=1">this question</a>. However, it seems doesn't work. Without using ajax, I can get my post deleted but after implement ajax, the deleteAtc.php seems to be not working.</p>
  
  <p>My delete page code (delete.php)</p>
  
  <pre><code>    &lt;h4&gt;Select an Article to Delete:&lt;/h4&gt;
  
      &lt;?php foreach ($articles as $article) { ?&gt;
  
          &lt;span&gt;&lt;?php echo $article['article_title']; ?&gt;&lt;/span&gt; &lt;a href="#" id="link"&gt;Delete&lt;/a&gt;&lt;br /&gt;
  
          &lt;script type="text/javascript"&gt;
          $(function(){
              $('#link').click(function(){
                  var id = &lt;?php echo $article['article_id']; ?&gt;;
                  $.ajax({
                      type: "GET",
                      url: "deleteAtc.php",
                      data: "id"+id+,
                      sucess: function() {
                          $('#sucess').html(data);
                      }
                  })
                  return false;
              });
          });
          &lt;/script&gt;
          &lt;div id="success"&gt;&lt;/div&gt;&lt;br /&gt;
      &lt;?php } ?&gt;
  </code></pre>
  
  <p>While my deleteAtc.php code:</p>
  
  <pre><code>&lt;?php 
  
  session_start();
  
  include_once('../includes/connection.php');
  
  if (isset($_SESSION['logged_in'])) {
      if (isset($_GET['id'])) {
          $id = $_GET['id'];
  
          $query = $pdo-&gt;prepare('DELETE FROM articles WHERE article_id = ?');
          $query-&gt;bindValue(1, $id);
          $query-&gt;execute();
  
          echo "Article deleted";
      }
  }    
  ?&gt;
  </code></pre>
  
  <p>What I'm trying to do here is to delete the record without redirect to <code>deleteAtc.php</code>, it will remove out the record and replace <code>Article Deleted</code></p>
  
  <p><s>May I know where did I go wrong in ajax side?</s></p>
  
  <p><strong>Please refer below for updated question</strong></p>
  
  <hr />
  
  <p>Based on the answer below, here is my updated code:</p>
  
  <p>delete.php</p>
  
  <pre><code>&lt;h4&gt;Select an Article to Delete:&lt;/h4&gt;
  
  &lt;div id="message"&gt;&lt;/div&gt;
  
  &lt;?php foreach ($articles as $article) { ?&gt;
  
  &lt;span&gt;&lt;?php echo $article['article_title']; ?&gt;&lt;/span&gt; 
  &lt;a href="#" class="link" data-artid="&lt;?php echo $article['article_id']; ?&gt;"&gt;Delete&lt;/a&gt;&lt;br /&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function(){
              $('.link').click(function(){
                  var elem = $(this);
                  $.ajax({
                      type: "GET",
                      url: "deleteAtc.php",
                      data: "id="+elem.attr('data-artid'),
                      dataType:"json",  
                      success: function(data) {
                          if(data.success){
                                 elem.hide();
                                 $('#message').html(data.message);
                          }
                      }
                  });
                  return false;
              });
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>deleteAtc.php</p>
  
  <pre><code>&lt;?php 
  
  session_start();
  
  include_once('../includes/connection.php');
  
  if (isset($_SESSION['logged_in'])) {
      if (isset($_GET['id'])) {
          $id = $_GET['id'];
  
          $query = $pdo-&gt;prepare('DELETE FROM articles WHERE article_id = ?');
          $query-&gt;bindValue(1, $id);
          $query-&gt;execute();
  
          //Also try to handle false conditions or failure
          echo json_encode(array('success'=&gt;TRUE,'message'=&gt;"Article deleted"));
      }
  }    
  ?&gt;
  </code></pre>
  
  <p>Somehow, if I delete two record at a time, only the first record echo the result, the second result deleted doesn't echo out the result.</p>
  
  <p>Am wondering, possible to add jquery animation to .show the success message and .hide the record deleted?</p>