Implementing ajax functionality using Mysqli And PHP and jQuery

Question

How can I use ajax php and mysqli to read data from my database without using any button? When I add a row to the table, I want information to be appear on page without loading/refreshing the page or click a button. Can I do that?

And this information will be appear like the code below

php code

<?php
if (isset($_GET['id'])) {
  $id = intval($_GET['id']);
  $date = date("l jS \of F Y");
  $query = mysqli_query($conn, "select * from tbl_dailyprogress where db_activityid='$id' and db_d='1'")or die(mysqli_error($conn));
  $count = mysqli_num_rows($query);
  if ($count != 0) {
    echo"<table class='ol-md-12 table-bordered table-striped table-condensed cf table-bordered' id='alternatecolor'>";
      echo"<thead class='cf'>";
      echo"<tr>";
      echo" <th  style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2'  >Date</th>
              <th style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2' >Notes</th>        
              <th style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2' >Progress %</th>
          ";
      echo"</tr></thead><tbody>";
      while ($row = mysqli_fetch_array($query)) {
        $idp = $row['db_id'];
        $date = $row['db_date'];
        $note = $row['db_note'];
        $progress = $row['db_progress'];
        echo"<tr>";
        echo"<td data-title='Date'>";
        echo $date;
        echo"</td>";
        echo"<td data-title='Note'>";
        echo $note;
        echo"</td>";
        echo"<td data-title='Progress %'>";
        echo'
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:' . $progress . '%">
            ' . $progress . '%
          </div>
      </div>';
        echo"</td>";
      }
      echo"</tr></tbody>";
    echo"</table>";
    echo"<br/>";
  }?>

I'm not sure what you mean. You want rows added automatically when a user adds a row? if the user adds a row in the browser, why would you need to query the DB for more rows? You already have the new row in the browser. — BeetleJuice
– BeetleJuice, Commented Jul 22, 2016 at 9:22
how can i do that i don't have experience with that if you can aid me plz — Mohamad
– Mohamad, Commented Jul 22, 2016 at 9:23
If you want it without refreshing the page than you have to make a ajax call to render the table. — Mayank Pandeyz
– Mayank Pandeyz, Commented Jul 22, 2016 at 9:24
Do you have any controller in your website ? You mean when you insert something in your db to make a request and display inserted data? — M. I.
– M. I., Commented Jul 22, 2016 at 9:25

Haresh Vidja · Accepted Answer · 2016-07-22 09:25:16Z

1

Simple example, lest assume that you what to load you data in container div tag <div id="container"></div> from page my_data.php

$(document).ready(function(){
    $("#container").load("my_data.php");
});

answered Jul 22, 2016 at 9:25

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

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

2 Comments

Mohamad Over a year ago

please in page my_data.php how to put my php code to work correct

Haresh Vidja Over a year ago

I dint get you what you say... Only you need to specify URL which you what to access .

Adil Aliyev · Accepted Answer · 2016-07-22 09:25:49Z

0

In theory it is not possible to catch the event happens in server side.

In practice it is done by sending request to server and getting response.

All you need is just send some request using ajax periodically. If there is new information in database ajax will return it to client. Then you can process it.

answered Jul 22, 2016 at 9:25

Adil Aliyev

1,1792 gold badges11 silver badges22 bronze badges

Comments

Mangesh Sathe · Accepted Answer · 2016-07-22 09:28:43Z

0

As you are inexperienced, I would suggest you to please go through the w3schools Ajax PHP tutorial first...There you will understand how to implementation ajax functionality and also, you will understand what Ajax can do and what Ajax can not...

answered Jul 22, 2016 at 9:28

Mangesh Sathe

2,1835 gold badges26 silver badges42 bronze badges

Collectives™ on Stack Overflow

Implementing ajax functionality using Mysqli And PHP and jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related