I have created a crud reservation form using ajax. The purpose of this form is when the user submits this from the user data will be stored in the database without page refresh. The full functionality will be crud without page refresh. Successfully data insert, edit, update, and delete. The whole Mechanism perfectly works but The problem is

  1. When editing the user data and then updated. The data is updated but in this field and table showing previous data. After refreshing the page showing the updated data

  2. When deleting the user data the data is deleted from the database but in this table showing previous data.

    Plugin Name: Crud Frontend
    Plugin URI: http://example.com
    Description: Crud Frontend
    Version: 1.0
    Author: Ataur Rahman
    Author URI: md-ataur.github.io
    License: GPL v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: crud-frontend
    defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
        class CrudAjaxReservationForm{
            public function __construct(){
                add_action('plugins_loaded', array($this, 'crudfrontend_load_textdomain' ));            
                add_action('wp_enqueue_scripts', array($this, 'crudfrontend_enqueue_scripts'));
                add_shortcode( 'crud_ajax_form', array($this,'crudfrontend_shortcode' ));
                add_action( 'wp_ajax_ajaxRSF', array($this, 'AjaxdataProcess') );
                add_action( 'wp_ajax_nopriv_ajaxRSF', array($this, 'AjaxdataProcess') );
                register_activation_hook( __FILE__, array($this,'crud_table_init') );
            function crud_table_init(){
                global $wpdb;
                $table_name = $wpdb->prefix."crudfrontend";
                /* Table create in Database */
                $sql = "CREATE TABLE {$table_name} (
                    id INT NOT NULL AUTO_INCREMENT,
                    name VARCHAR(250),
                    email VARCHAR(250),
                    phone VARCHAR(250),
                    person INT(11),
                    date DATE,
                    time TIME,
                    message VARCHAR(250),
                    PRIMARY KEY (id)
                dbDelta( $sql );        
        public function crudfrontend_load_textdomain(){
            load_plugin_textdomain( 'crud-frontend', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
        public function crudfrontend_enqueue_scripts(){
            wp_enqueue_style( 'bootstrap', plugin_dir_url( __FILE__ ).'assets/public/css/bootstrap.min.css');
            wp_enqueue_script( 'crud-ajax-reservation-js', plugin_dir_url( __FILE__ ).'assets/public/js/crud-ajax-reservation.js', array( 'jquery' ), time(), true );
            $ajaxUrl = admin_url( 'admin-ajax.php');
            wp_localize_script( 'crud-ajax-reservation-js', 'url', array('ajaxUrl' => $ajaxUrl) );
        public static function AjaxdataProcess(){
            global $wpdb;
            $table_name = $wpdb->prefix."crudfrontend";
            if (check_ajax_referer( 'rsf_nonce_action', 'rn', false )) {
                $uid    = sanitize_key( isset($_POST['uid'])?$_POST['uid']:'' );
                $name   = sanitize_text_field( isset($_POST['RFname'])?$_POST['RFname']:'' );
                $email  = sanitize_email( isset($_POST['RFemail'])?$_POST['RFemail']:'' );
                $phone  = sanitize_text_field( isset($_POST['RFphone'])?$_POST['RFphone']:'' );
                $person = sanitize_text_field( isset($_POST['RFperson'])?$_POST['RFperson']:'' );
                $date   = sanitize_text_field( isset($_POST['RFdate'])?$_POST['RFdate']:'' );
                $time   = sanitize_text_field( isset($_POST['RFtime'])?$_POST['RFtime']:'' );
                $message = sanitize_text_field( isset($_POST['RFMessage'])?$_POST['RFMessage']:'' );        
                if (!empty($name) && !empty($email) && !empty($phone) && !empty($person) && !empty($date) && !empty($time)) {
                    $data = array(                  
                        'name' =>  $name,
                        'email' =>  $email,
                        'phone' =>  $phone,
                        'person' =>  $person,
                        'date' =>  $date,
                        'time' =>  $time,
                        'message' =>  $message,
                    if ($uid) {
                        $wpdb->update("{$table_name}", $data, ['id'=>$uid]);                    
                        die ('<p class="alert alert-success">Successfully Data Updated</p>');
                        $wpdb->insert("{$table_name}", $data);
                        die ('<p class="alert alert-success">Successfully Data Stored</p>');
                    die('<p class="alert alert-danger">Fields must no be empty</p>');
        public static function crud_ajax_form(){
            global $wpdb;
            $table_name = $wpdb->prefix."crudfrontend";
            $id = sanitize_key(isset($_GET['uid']) ? $_GET['uid']: null);
            if ($id) {
                $result = $wpdb->get_row("SELECT * FROM {$table_name} WHERE id='{$id}'");
            }/* Data retrieve mechanism */      
            if (isset($_GET['action']) && $_GET['action'] == "delete") {
                $wpdb->delete($table_name, ['id'=>sanitize_key($_GET['uid'])]);
                $id = null;
            }/* Delete Mechanism */
            <div class="container">         
                <div class="col-md-6 offset-md-3">
                    <div id="message"></div>
                    <form action="<?php the_permalink(); ?>" id="Rform">
                        <?php wp_nonce_field( 'rsf_nonce_action', 'rsf_nonce_field');?>                 
                        <div class="form-group">
                            <label for="name" class="label"><?php _e('Name','crudfrontend');?></label>
                            <input type="text" class="form-control" id="RFname" value="<?php if($id) echo esc_attr($result->name);?>">
                        <div class="form-group">
                            <label for="email" class="label"><?php _e('Email','crudfrontend');?></label>
                            <input type="email" class="form-control" id="RFemail"value="<?php if($id) echo esc_attr($result->email);?>">                           
                        <div class="form-group">
                            <label for="phone" class="label"><?php _e('Phone','crudfrontend');?></label>
                            <input type="text" class="form-control" id="RFphone"value="<?php if($id) echo esc_attr($result->phone);?>">
                        <div class="form-group">
                            <label for="persons" class="label"><?php _e('Number of Persons','crudfrontend');?></label>
                            <select name="persons" id="RFperson" class="form-control">
                                <option value="1" <?php if( $id && $result->person=="1") echo 'selected="selected"'; ?> ><?php _e('1 person','crudfrontend');?></option>
                                <option value="2" <?php if( $id && $result->person=="2") echo 'selected="selected"'; ?>><?php _e('2 person','crudfrontend');?></option>
                                <option value="3" <?php if( $id && $result->person=="3") echo 'selected="selected"'; ?>><?php _e('3 person','crudfrontend');?></option>
                                <option value="4" <?php if( $id && $result->person=="4") echo 'selected="selected"'; ?>><?php _e('4 person','crudfrontend');?></option>
                                <option value="5" <?php if( $id && $result->person=="5") echo 'selected="selected"'; ?>><?php _e('5 person','crudfrontend');?></option>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="date" class="label"><?php _e('Date','crudfrontend');?></label>
                                <input type="date" class="form-control" id="RFdate"value="<?php if($id) echo esc_attr($result->date);?>">                               
                            <div class="form-group col-md-6">
                                <label for="time" class="label"><?php _e('Time','crudfrontend');?></label>
                                <input type="time" class="form-control" id="RFtime" value="<?php if($id) echo esc_attr($result->time);?>"autocomplete="off">
                        <div class="form-group">
                            <textarea class="form-control" id="RFMessage" rows="5"><?php if($id) echo esc_attr($result->message);?></textarea>
                        <div class="row justify-content-center">                        
                            if ($id) {
                                echo '<input type="hidden" name="id" id="uid" value="'.$result->id.'">';
                                <button id="reserveForm" class="btn btn-primary"><?php _e('Update','crudfrontend');?></button>&nbsp;
                                <a class="btn btn-primary" href="<?php the_permalink();?>"><?php _e('Back','crudfrontend');?></a>
                                <button id="reserveForm" class="btn btn-primary"><?php _e('Reserve Now','crudfrontend');?></button>
                <div class="col-md-12">
                    <h5><?php _e("Data Show","crudfrontend");?></h5>                        
                    <table class="table table-striped">
                                <th scope="col"><?php _e("ID","crudfrontend");?></th>
                                <th scope="col"><?php _e("Name","crudfrontend");?></th>
                                <th scope="col"><?php _e("Email","crudfrontend");?></th>
                                <th scope="col"><?php _e("Phone","crudfrontend");?></th>
                                <th scope="col"><?php _e("Date","crudfrontend");?></th>
                                <th scope="col"><?php _e("Time","crudfrontend");?></th>
                                <th scope="col"><?php _e("Message","crudfrontend");?></th>
                                <th scope="col"><?php _e("Action","crudfrontend");?></th>
                            global $wpdb;
                            $table_name = $wpdb->prefix."crudfrontend";
                            $users = $wpdb->get_results("SELECT * FROM {$table_name} ORDER BY id DESC", ARRAY_A);
                            foreach ($users as $user) {
                                    <th scope="row"><?php echo esc_html( $user['id'] ); ?></th>
                                    <td><?php echo esc_html( $user['name'] ); ?></td>
                                    <td><?php echo esc_html( $user['email'] ); ?></td>
                                    <td><?php echo esc_html( $user['person'] ); ?></td>
                                    <td><?php echo esc_html( $user['date'] ); ?></td>
                                    <td><?php echo esc_html( $user['time'] ); ?></td>
                                    <td><?php echo esc_html( $user['message'] ); ?></td>
                                    <td><span><a href="?uid=<?php echo esc_html( $user['id'] ); ?>">Edit</a></span>&nbsp;&nbsp;<span><a href="?uid=<?php echo esc_html( $user['id'] ); ?>&action=delete">Delete</a></span></td>
                            <?php } ?>
        public function crudfrontend_shortcode(){
                // Turn on output buffering.
                self::crud_ajax_form(); // echo the form
                // Turn off output buffering and then return the output echoed via the above functions.
                return ob_get_clean();
        new CrudAjaxReservationForm;


            $('#reserveForm').on('click', function(){
                $.post(url.ajaxUrl, {
                    action: 'ajaxRSF',
                    rn: $('#rsf_nonce_field').val(),
                    RFname: $('#RFname').val(),
                    uid: $('#uid').val(),
                    RFemail: $('#RFemail').val(),
                    RFphone: $('#RFphone').val(),
                    RFperson: $('#RFperson').val(),
                    RFdate: $('#RFdate').val(),
                    RFtime: $('#RFtime').val(),
                    RFMessage: $('#RFMessage').val()                
                }, function(data) {
                return false;

enter image description here

1 Answer 1


Why yo don't you replace HTML again, when you edit or delete any record!

What you can do here: Once the edit/delete query, you have to write query for fetch the data again from SQL and replace using ajax response.

  • Already I did a query for data fetch. I don't understand how to replace using ajax response Nov 8, 2019 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.