Data not insert and update through ajax and jQuery in admin page?

Question

I made custom plugin and done crud operation, display all data in admin page, used ajax and jquery. Data successfully deleted but not inserted or updated. Data successfully pass through ajax but not inserted. Also What I saw if input block is empty and I put some data and updated it. It got first row data.
Error- https://prnt.sc/wnzqjr
ajax for insert the data

jQuery('.ins_btn').click(function(){
        var id = jQuery(this).attr('data-id');
        var question = jQuery('#question').val();
        var answer = jQuery('#answer').val();
        // alert(id);
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php');?>', 
            type: 'POST',
            data:{ 
              action: 'insert_records', 
              insert_record : id,
              insert_question: question,
              insert_answer: answer
            },
            success: function( data ){
                alert("Records are successfully insert");
                location.reload();
            }
         });
    });

insert query

 function insert_records(){
  global $wpdb;
 $id = $_POST['insert_record'];
 $question = $_POST['insert_question'];
 $answer = $_POST['insert_answer'];


  $db_inserted = $wpdb->insert( $wpdb->prefix.'faqq', 
        array( 'ID' => $id, 
               'question' => $question, 
               'answer' => $answer) 
    );
}
add_action( "wp_ajax_insert_records", "insert_records" );
add_action( "wp_ajax_nopriv_insert_records", "insert_records" );

ajax for update the data

jQuery('.upd_btn').click(function(){
        var id = jQuery(this).attr('data-id');
        var question = jQuery('#question').val();
        var answer = jQuery('#answer').val();
        alert(question);
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php');?>', 
            type: 'POST',
            data:{ 
              action: 'update_records', 
              update_record : id,
              update_question : question,
              update_answer : answer

            },
            success: function( data ){
                alert("Records are successfully updated");
                location.reload();
            }
         });
    });

update query

function update_records(){
  global $wpdb;
  // $table_name = $wpdb->prefix.'faqq';
  $id = $_POST['update_record'];
  $question = $_POST['update_question'];
  $answer = $_POST['update_answer'];
  $db_updated = $wpdb->update( $wpdb->prefix.'faqq', 
        array('question'    => $question,
              'answer'   => $answer, array( 'ID' => $id ) )
          ); 
}

this is html code

        <form method="POST" action=""  > 
            <table>
                 <td><?php echo $print->id ?></td>
                 <td>
                    <input type="text" name="question" id="question"  value="<?php echo $print->question ?>" ></td>
                 <td>
                 <input type="text" name="answer" id="answer"  value="<?php echo $print->answer ?>" > </td>
                 <td>
                    <input type="button" value="Insert" id="insert" data-id = "<?php echo $print->id ?>" name="insert" class="ins_btn">
                </td>
                <td>
                    <input type="button" value="Update" id="update" data-id = "<?php echo $print->id ?>" name="update" class="upd_btn">
                </td>
                 <td>
                    <input type="button" value="Delete" id="delete" data-id = "<?php echo $print->id ?>" name="delete" class="del_btn">
                </td>
            </table>
        </form>

Here are some errors. 1)Getting error when update the data through ajax- https://prnt.sc/wnymkx, https://prnt.sc/wnyos5, https://prnt.sc/wnyuhk

Answer 1

I see that there's an internal server error (see screenshot) when you tried to update a record in the database, and the error is likely because you incorrectly called $wpdb->update() which has the syntax of — and note that the first three parameters ($table, $data and $where) are required:

wpdb::update( string $table, array $data, array $where, array|string $format = null, array|string $where_format = null )

But in your code, you did not set the third parameter ($where):

// In update_records():
$db_updated = $wpdb->update( $wpdb->prefix.'faqq',
    array( 'question' => $question,
           'answer'   => $answer, array( 'ID' => $id ) )
);

And I guess the array( 'ID' => $id ) is the $where part, but you probably made a typo which resulted in that part being part of the second parameter instead.

So fix that and your code would work properly. Example:

$db_updated = $wpdb->update( $wpdb->prefix.'faqq',
    array( 'question' => $question,
           'answer'   => $answer,
    ),
    array( 'ID' => $id )
);

As for your insert_records() function, it looks fine to me, so there shouldn't be an issue when inserting new records to your database table.

Additionally, you should also (later) do things like data sanitization and call wp_die() to end the AJAX request, and fix the issue as seen here.

Answer 2

I did wrong code in ajax and jquery- for update function in ajax and jQuery (Before)-

jQuery('.upd_btn').click(function(){
        var id = jQuery(this).attr('data-id');
        
        var question = jQuery('#question').val();
        var answer = jQuery('#answer').val();
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php');?>', 
            type: 'POST',
            data:{ 
              action: 'update_records', 
              update_record : id,
              update_question : question,
              update_answer : answer

            },
            success: function( data ){
                // alert("Records are successfully updated");
                // location.reload();
            }
         });
    });

After
What I did wrong was I got the same id for question('#question') and answer('#answer') column. So I got the first row data for any row Here is the answer

jQuery('.upd_btn').click(function(){
        var id = jQuery(this).attr('data-id');
        
        var question = jQuery(this).closest('table').find('.question').val();
        var answer = jQuery(this).closest('table').find('.answer').val();
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php');?>', 
            type: 'POST',
            data:{ 
              action : 'update_records', 
              update_record : id,
              update_question : question,
              update_answer : answer

            },
            success: function( data ){
                // alert("Records are successfully updated");
                
            }
         });
    });

So I changed id value and get class of each field and use closest function.