Question posted in
You can find the official documentation here.

Fetch Data from DB without Page Refresh and without Button Click – AJAX PHP – Jquery ajax

I’m creating a CRUD function on my website. I’m using Ajax to instantly load data but it won’t work for me.

So far I’m seeing they need to click a button or set a time interval, but I don’t want this.
What is wrong or lacking in my code?

This is what my HTML looks like

<div class="card-body">
   <div id="blog_table">                    
   </div>
</div>

<script>
  $( document ).ready(function() {
    $("#blog_table").load("functions/blog_list.php",{
    });
  });
</script>

My PHP Code

<?php include "../../function.php";
    $user_id = $_SESSION['id'];
    $select_blogs = query("SELECT blog_id, blog_title, create_date FROM user_blog WHERE user_id = '{$user_id}'");
    $result = confirm($select_blogs);
echo '<table class="table">
          <thead>
            <tr>
                <th>Title</th>
                <th>Date Creasdawsdated</th>
            </tr>
          </thead>';
    if(row_count($select_blogs) > 0){
        while($row = fetch_assoc($select_blogs)){   
        echo "<tr>
             <td>".$row['blog_id']."</td>
             <td>".$row['blog_title']."</td>
             <td class='text-right py-0 align-middle'>
                <div class='btn-group btn-group-sm'>
                    <button href='blog_view?id=".$row['blog_id']."'' class='btn btn-info'><i class='fas fa-eye'></i></button>
                    <button id='".$row['blog_id']."'' class='btn btn-danger' onclick='deleteFunction(this.id)'><i class='fas fa-trash'></i></button>
                </div>
            </td>
            </tr>";
    }   
}
?>

Whenever I click the delete button. It just deletes the data but the table doesn’t load the changes.

This is the function of my delete button.

function deleteFunction(id) {
  event.preventDefault();
  var blog_id = id;
  Swal.fire({
    title: 'Are you sure you want to delete this blog?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!'
  }).then((result) => {
    if (result.isConfirmed) {
      $.ajax({
        method: 'POST',
        data: {'delete': true, 'blog_id' : blog_id },
        url: 'functions/blog_delete.php',
        success: function(data) {

        }
      });
    
      Swal.fire(
        'Deleted!',
        'Your blog has been deleted.',
        'success'
      )


    }
  })

  }

PHP File of the delete function.

<?php include "../../function.php";


$blog_id = escape_string($_POST['blog_id']);

$query = "DELETE FROM user_blog where blog_id = '{$blog_id}'";
$final_query = query($query);
confirm($final_query);

echo $final_query;
echo $query;

?>
Tags:

2

Answers


  1. 0

    When you add the .load() function to $(document).ready(), you’re telling jQuery to load the page once – on page load, when the document is ready. Meaning, it won’t update again until you either run the function again or you refresh the page.

    If you want to refresh the data e.g. when you press the delete button, run the function again, e.g. in your deleteFunction().

    Login or Signup to reply.
  2. 0

    Use then function after the sweet alert.

    Swal.fire(
  'Deleted!',
  'Your blog has been deleted.',
  'success'
).then(function() {
  $("#blog_table").load("functions/blog_list.php", {});
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search