fighter7788
fighter7788

Reputation: 5

echo data through ajax function to a table

I am trying to use the ajax function to echo out the data submitted to a table. But it did not turn out the way i wanted it to be. The values became a string of values which i do not want that to happen, i want the value to be in a table form.

Below is my code for the form,

<div id="formbox">
  <form id="formTable">

    <table class="table table-hover">
      <thead>
        <tr>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th>Saturday</th>
          <th>Sunday</th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>
            <input type="text" class="form-control" name="startTime" id="starttime" width="50px">
          </th>
          <th>
            <input type="text" class="form-control" name="endTime" id="endtime">
          </th>
          <th>
            <input type="checkbox" name="Monday" value="1" id="monday">
          </th>
          <th>
            <input type="checkbox" name="Tuesday" value="1" id="tuesday">
          </th>
          <th>
            <input type="checkbox" name="Wednesday" value="1" id="wednesday">
          </th>
          <th>
            <input type="checkbox" name="Thursday" value="1" id="thursday">
          </th>
          <th>
            <input type="checkbox" name="Friday" value="1" id="friday">
          </th>
          <th>
            <input type="checkbox" name="Saturday" value="1" id="saturday">
          </th>
          <th>
            <input type="checkbox" name="Sunday" value="1" id="sunday">
          </th>
          <th>
            <input type="button" class="btn btn-success" value="Add" id="send">
          </th>
        </tr>
      </tbody>
    </table>

  </form>
</div>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <div id="comment"></div>
  </tbody>
</table>

My javascript code,

  $(document).ready(function() {

    function showComment() {
      $.ajax({
        type: "post",
        url: "registerarray.php",
        data: "action=showcomment",
        success: function(data) {
          $("#comment").html(data);
        }
      });
    }
    showComment();

    $("#send").click(function() {

      var starttime = $("#starttime").val();
      var endtime = $("#endtime").val();

      if (document.getElementById('monday').checked) {
        var monday = $("#monday").val();
      }
      if (document.getElementById('tuesday').checked) {
        var tuesday = $("#tuesday").val();
      }
      if (document.getElementById('wednesday').checked) {
        var wednesday = $("#wednesday").val();
      }
      if (document.getElementById('thursday').checked) {
        var thursday = $("#thursday").val();
      }
      if (document.getElementById('friday').checked) {
        var friday = $("#friday").val();
      }
      if (document.getElementById('saturday').checked) {
        var saturday = $("#saturday").val();
      }
      if (document.getElementById('sunday').checked) {
        var sunday = $("#sunday").val();
      }



      var dataString = "starttime1=" + starttime + "&endtime1=" + endtime + "&monday1=" + monday + "&tuesday1=" + tuesday + "&wednesday1=" + wednesday + "&thursday1=" + thursday + "&friday1=" + friday + "&saturday1=" + saturday + "&sunday1=" + sunday + "&action=addcomment";

      $.ajax({
        type: "post",
        url: "registerarray.php",
        data: dataString,
        success: function(data) {
          showComment();
          $("#formTable")[0].reset();

        }

      });

    });
  });

My register array codes, to register and to echo the data from the database,

<?php

$action = $_POST["action"];

if ($action == "showcomment") {

    require_once 'dbfunction.php';
    $con = getDbConnect();

    if (!mysqli_connect_errno($con)) {
        $show = "SELECT * FROM scheduletime";

        $result = mysqli_query($con, $show);

        while ($row = mysqli_fetch_array($result)) {
            echo "<tr>";
            echo "<th>" . $row["startTime"] . "</th>";
            echo "<th>" . $row["endTime"] . "</th>";
            echo "<th>" . $row["Monday"] . "</th>";
            echo "<th>" . $row["Tuesday"] . "</th>";
            echo "<th>" . $row["Wednesday"] . "</th>";
            echo "<th>" . $row["Thursday"] . "</th>";
            echo "<th>" . $row["Friday"] . "</th>";
            echo "<th>" . $row["Saturday"] . "</th>";
            echo "<th>" . $row["Sunday"] . "</th>";
            echo "<th></th>";
            echo "</tr>";
        }

        mysqli_close($con);
    } else {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    ?>


    <?php

} else if ($action == "addcomment") {
    require_once 'dbfunction.php';
    $con = getDbConnect();

    $starttime2 = $_POST['starttime1'];
    $endtime2 = $_POST['endtime1'];
    $monday2 = $_POST['monday1'];
    $tuesday2 = $_POST['tuesday1'];
    $wednesday2 = $_POST['wednesday1'];
    $thursday2 = $_POST['thursday1'];
    $friday2 = $_POST['friday1'];
    $saturday2 = $_POST['saturday1'];
    $sunday2 = $_POST['sunday1'];

    if (mysqli_connect_errno($con)) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    } else {
        $query = "INSERT INTO scheduletime (startTime, endTime, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday)" .
                "VALUES ('$starttime2', '$endtime2', '$monday2', '$tuesday2', '$wednesday2', '$thursday2', '$friday2', '$saturday2', '$sunday2')";

        mysqli_query($con, $query);
    }
    echo "Your comment has been sent";
    mysqli_close($con);
}

The current out put that i receive is a long string of data linked together and not imputed into the table.

I would want the string of values to be inserted into the table accordingly.

Upvotes: 0

Views: 460

Answers (2)

CodeGodie
CodeGodie

Reputation: 12142

Instead of echoing out your results per every iteration of your while loop, you need to create a string that hold the html table you are trying to pass. To do this, change this:

   while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<th>" . $row["startTime"] . "</th>";
        echo "<th>" . $row["endTime"] . "</th>";
        echo "<th>" . $row["Monday"] . "</th>";
        echo "<th>" . $row["Tuesday"] . "</th>";
        echo "<th>" . $row["Wednesday"] . "</th>";
        echo "<th>" . $row["Thursday"] . "</th>";
        echo "<th>" . $row["Friday"] . "</th>";
        echo "<th>" . $row["Saturday"] . "</th>";
        echo "<th>" . $row["Sunday"] . "</th>";
        echo "<th></th>";
        echo "</tr>";
    }

to this:

   $html = "";
   while ($row = mysqli_fetch_array($result)) {
        $r =  "<tr>";
        $r .=  "<td>" . $row["startTime"] . "</td>";
        $r .=  "<td>" . $row["endTime"] . "</td>";
        $r .=  "<td>" . $row["Monday"] . "</td>";
        $r .=  "<td>" . $row["Tuesday"] . "</td>";
        $r .=  "<td>" . $row["Wednesday"] . "</td>";
        $r .=  "<td>" . $row["Thursday"] . "</td>";
        $r .=  "<td>" . $row["Friday"] . "</td>";
        $r .=  "<td>" . $row["Saturday"] . "</td>";
        $r .=  "<td>" . $row["Sunday"] . "</td>";
        $r .=  "<td></td>";
        $r .=  "</tr>";
        $html .= $r;
    }
    echo $html;

UPDATE:

I see now that you provided the code that shows #comment. The problem is that you are using a div inside a table You need to change that because your browser will place any div outside of the table unless the div resides in <td> tags. Remove that div, and add the id to the tbody instead.

Change this:

<tbody>
  <div id="comment"></div>
</tbody>

to this:

<tbody id="comment">
</tbody>

Upvotes: 1

UpVs
UpVs

Reputation: 1958

Try to explicitly define dataType that you expect from a server:

dataType: "html"

And the code would be:

function showComment() {
      $.ajax({
        type: "post",
        url: "registerarray.php",
        data: "action=showcomment",
        dataType: "html",
        success: function(data) {
          $("#comment").html(data);
        }
});

Upvotes: 0

Related Questions