title: Wordpress Ajax insert data to MySQL
body: <p>I am working with Wordpress and I am trying to develop a plugin for my personal purpose (studying).
  At the moment I have created a main file (<code>wp-maincat.php</code>) for the plugin activation and deactivation, and it creates the custom table in the Wordpress called <code>categ_tag</code>.</p>
  
  <p>This file creates also a menu and include 3 more pages:</p>
  
  <ul>
  <li>Page.3: (the problem) a clone of the Wordpress "Tag" page.</li>
  </ul>
  
  <p>In that page I want to create the submit section on the left and on the right the table that displays the results with AJAX, so without the page reload.</p>
  
  <p>The problem is that when I press the submit button, nothing happens, or better I receive an <code>alert()</code> with no errors. On the other hand the <code>alert()</code> tells me that the code returns an error. And another problem is that I cannot see if there are already some rows in the database.</p>
  
  <p>If I remove <code>url:ajaxurl</code>, the code works but in the responds div it load the entire wordpress page. Any help would be appreciated! </p>
  
  <p>Here is some code.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><em>This part adds the entry in the database</em>
      
  
  <pre><code>global $wpdb;
  $table_name = $wpdb-&gt;prefix."categ_tag";
  
  if(isset($_POST["content_txt"]) &amp;&amp; strlen($_POST["content_txt"])&gt;0) {
      $contentToSave = $_POST["content_txt"];
  
      $insert_row = $wpdb-&gt;query($wpdb-&gt;prepare(" INSERT INTO $table_name ( name_cats ) VALUES ('".$contentToSave."')"));
  
      if($insert_row) {
            $my_id = $mysqli-&gt;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;';  
      }else{
          header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
          exit();
      }
  }
  
  ?&gt;
  </code></pre>
  
  <p><em>Here is the part of the code that generates the problem (<code>ajaxurl</code>)</em></p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function($){
  
      $("#publish").click(function (e) {
              e.preventDefault();
  
              var myData = 'content_txt='+ $("#name_cats").val();
              var ajaxurl = "&lt;?php echo admin_url('admin-ajax.php'); ?&gt;";
              jQuery.ajax({
                  type: "POST",
                  url: ajaxurl, // &lt;------- The problem is here
                  dataType:"text",.
                  data:myData,
                  success:function(response){
                      $("#responds").append(response);
                      $("#name_cats").val('');
                      $("#publish").show();
                      $("#LoadingImage").hide();
                  },
                  error:function (xhr, ajaxOptions, thrownError){
                      alert(thrownError);
                  }
              });
  
  
      });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p><em>The form</em> </p>
  
  <pre><code>    &lt;h2&gt;Category Tags&lt;/h2&gt;  
      &lt;div id="col-left"&gt;
          &lt;h3&gt;Add New Category&lt;/h3&gt;
          &lt;form id="addcats" method="post"&gt;
              &lt;div class="form-field"&gt;
                  &lt;label for="tag-name"&gt;Name&lt;/label&gt;
                  &lt;input id="name_cats" name="name_cats" type="text" style="width: 95%" value="&lt;?php echo esc_attr($item['name_cats'])?&gt;" class="code" required /&gt;
              &lt;/div&gt;
              &lt;p class="submit"&gt;
                  &lt;input type="submit" name="publish" id="publish" class="button" value="Submit"  /&gt;
              &lt;/p&gt;    
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div id="col-right"&gt;
          &lt;h3&gt;Category List&lt;/h3&gt;
          &lt;ul id="responds"&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>