Wordpress Ajax insert data to MySQL

Question

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 (wp-maincat.php) for the plugin activation and deactivation, and it creates the custom table in the Wordpress called categ_tag.

This file creates also a menu and include 3 more pages:

Page.3: (the problem) a clone of the Wordpress "Tag" page.

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.

The problem is that when I press the submit button, nothing happens, or better I receive an alert() with no errors. On the other hand the alert() 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.

If I remove url:ajaxurl, the code works but in the responds div it load the entire wordpress page. Any help would be appreciated!

Here is some code.

UPDATE

This part adds the entry in the database

global $wpdb;
$table_name = $wpdb->prefix."categ_tag";

if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0) {
    $contentToSave = $_POST["content_txt"];

    $insert_row = $wpdb->query($wpdb->prepare(" INSERT INTO $table_name ( name_cats ) VALUES ('".$contentToSave."')"));

    if($insert_row) {
          $my_id = $mysqli->id; //Get ID of last inserted row from MySQL
          echo '<li id="item_'.$my_id.'">';
          echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
          echo '<img src="images/icon_del.gif" border="0" />';
          echo '</a></div>';
          echo $contentToSave.'</li>';  
    }else{
        header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }
}

?>

Here is the part of the code that generates the problem (ajaxurl)

<script>
jQuery(document).ready(function($){

    $("#publish").click(function (e) {
            e.preventDefault();

            var myData = 'content_txt='+ $("#name_cats").val();
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            jQuery.ajax({
                type: "POST",
                url: ajaxurl, // <------- 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);
                }
            });


    });
    });
    </script>

The form

    <h2>Category Tags</h2>  
    <div id="col-left">
        <h3>Add New Category</h3>
        <form id="addcats" method="post">
            <div class="form-field">
                <label for="tag-name">Name</label>
                <input id="name_cats" name="name_cats" type="text" style="width: 95%" value="<?php echo esc_attr($item['name_cats'])?>" class="code" required />
            </div>
            <p class="submit">
                <input type="submit" name="publish" id="publish" class="button" value="Submit"  />
            </p>    
        </form>
    </div>

    <div id="col-right">
        <h3>Category List</h3>
        <ul id="responds">

        </ul>
    </div>

Splitted the code in some parts. The entire source is in one page! — Mark
– Mark, Commented May 31, 2014 at 9:20

Bhushan Gohel · Accepted Answer · 2014-05-31 10:42:45Z

1

I suggest the simplest way to post data through Ajax :

jQuery('#category').on('change', function() {
    var sel_id = this.value; // or $(this).val()
    jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url().'/ajaxdataform.php'; ?>",
            data: {sel_id: sel_id },
            success: function(data) {
            if(data != ''){
                jQuery('#sub_category').html(data);
            }else{
                jQuery('#sub_category').attr('disabled', true);
            }
        },     
    });
});

And from another end in the "ajaxdataform.php" we get post data like this:

<?php

require( dirname(__FILE__).'/wp-load.php' );

$sel_id = $_POST['sel_id'];

$sql = "SELECT * FROM job_sub_category WHERE cat_id = $sel_id";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
    echo $row['sub_category'];
}

Like this you can fire insert query.

answered May 31, 2014 at 10:42

Bhushan Gohel

4301 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Over a year ago

I found a better way without using Ajax or better using wordpress Table_list option so it handles everything. Thank you anyway

Collectives™ on Stack Overflow

Wordpress Ajax insert data to MySQL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related