title: Wordpress plugin - ajax to delete data - Success state
body: <p>I am at the beginning to learn Wordpress plugin development with PHP and Ajax.
  In the Plugin I want to delete dates from a database. 
  Therefor I developed a fancybox, in which the user see information about the id
  of the oject and the user have the possibility to delete the object.</p>
  
  <p>The ajax function to delete the object works great, but I don´t get the state "OK" from jason/ajax.
  Therefore the function doesn´t show me the message "success" and don´t close the fancybox, if the object has been deleted.</p>
  
  <p>If I refreshed the page the object was deleted.</p>
  
  <p>Want I do wrong and where is my mistake?</p>
  
  <p>Thank you for your feedback.</p>
  
  <p>The Ajax Function to delete Data:</p>
  
  <pre><code>add_action( 'wp_ajax_delete_animal', function()
  {
      global $wpdb;
      $table = $wpdb-&gt;prefix . 'tierdaten';
  
      $wpdb-&gt;delete( $table, array( 'id' =&gt; $_POST['id'] ) );
      header('Content-type: application/json');
      header('Cache-Control: no-cache, must-revalidate');
      header('Expires: ' . date('r'));
      echo trim( json_encode(['success' =&gt; true]) );
      wp_die();
  });
  </code></pre>
  
  <p>Fancybox - if someone clicked the delete button:</p>
  
  <pre><code>function showFancyBoxDelete($animal_id) {
  
  // Get the modal
  var animal_id    = $animal_id;
  
  var modal = document.getElementById('FancyBoxDelete');
  
  // Get the button that opens the modal
  var btn = document.getElementById("TestDelete");
  //var myBtns = document.getElementsByClassName("btn_delete");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // Button Abbrechen
  var abbrechendelete = document.getElementsByClassName("abbrechendelete");
  
  
  // When the user clicks the button, open the modal 
  
  btn.onclick = function() {
      modal.style.display = "block";
      document.getElementById("InhaltDelete").innerHTML = "&lt;h2&gt;Tierdaten löschen&lt;/h2&gt;&lt;p&gt;Möchten Sie wirklich den Datensatz mit der ID " + animal_id + " entgültig löschen?&lt;/p&gt;";
      document.getElementById("InhaltDeleteButtons").innerHTML = "&lt;div class='btn_left'&gt;&lt;input class='button-primary' onclick='closeFancyBox()' class='abbrechendelete' name='abbrechen' value='Abbrechen'&gt;&lt;/div&gt;&lt;div style='padding-right:60%' class='btn_right'&gt;&lt;input class='delete' type='button' value='Daten löschen'&gt;&lt;/div&gt;&lt;div class='clear_div'&gt;&lt;/div&gt;";
  
  }
  
  // auf Abbrechen klicken
  abbrechendelete.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  
  jQuery(document).on('click', '.delete', function () {
  var id = animal_id;
  
  jQuery.ajax({
      type: 'POST',
      dataType : 'json',
      url: ajaxurl,
      data: {
          action: 'delete_animal',
          id: id
      },
  
  
      statusCode: {
          '404': function() {
            alert( "page not found" );
          }
        },
  
      success: function (data) {
          console.log(data);
              if(data.type == "success") {
                  location.href = location.href;
              }
              else {
                  alert("Dein Eintrag konnte nicht gelöscht werden. ")
              } 
          } 
      }); 
  });             
  }
  </code></pre>