Load SQL data into datatable

Question

I am trying to load some mySQL data into a datatable to allow ordering and searching easily etc... I want the data to be in the form of a div so I can easily chance how it Looks. I have the below code which results in the errors listed at the bottom of this post.

`index.php`

<?php
include 'includes/SQL/connect.php';
include 'includes/structure/header.php';
?>

  <script>
    $('document').ready(function() {
      $.ajax({
        url: 'includes/SQL/getData.php',
        type: 'POST',
        dataType: 'html',
        success: function(newContent) {
          $.each(newContent, function(newContent) {
            console.log(newContent);
            $('#example').append('<tr><td>' + newContent + '</td></tr>');
          })
        }
      });
    });
  </script>

  <div class="container">
    <div class="row">
      <div class="col-lg-12 posts-list" style="padding-top: 30px; padding-bottom: 35px">
        <table id="example" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Word</th>
              <th>deff dic</th>
              <th>deff simp</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>

`getdata.php`

<?php
include 'connect.php';
$columns = array();

$sql = "SELECT * FROM glossary";
$res = mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
$dataArray = '';

while($row = mysqli_fetch_array($res) ) {
    $dataArray .= '<div class="post" id="post_'.$row["id"].'">
    <div class="single-post row generic-blockquote" style="background-color: #F1F1F1; margin-bottom: 10px;">
      <div class="col-lg-9 col-md-9 ">
        <a class="posts-title" href="blog-single.html"><h1>'.$row["Word"].'</h1></a>
        <p class="excert">
          Accounts help you do money stuff.
        </p>
        <a href="blog-single.html" class="genric-btn primary">More info</a>
      </div>
    </div>
    </div>
    ';
}

echo json_encode($dataArray);

Error

Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (jquery-3.3.1.js:9857)
    at waypoints.min.js:8
    at waypoints.min.js:8
    at waypoints.min.js:8
    at waypoints.min.js:8
jquery-3.3.1.js:489 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in "<div class=\"post\" id=\"post_1\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>management<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    <div class=\"post\" id=\"post_2\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>profit<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    <div class=\"post\" id=\"post_3\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>marketing<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    "
    at isArrayLike (jquery-3.3.1.js:489)
    at Function.each (jquery-3.3.1.js:351)
    at Object.success (test.php:62)
    at fire (jquery-3.3.1.js:3268)
    at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398)
    at done (jquery-3.3.1.js:9305)
    at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)

Please try to put all the code needed in the question itself, not external. — KIKO Software, Aug 03 '19 at 09:34
Possible duplicate of [jquery 3.0 url.indexOf error](https://stackoverflow.com/questions/37738732/jquery-3-0-url-indexof-error) — Dharman, Aug 03 '19 at 09:37
@Dharman I read this post and tried fixed, they did not help with my problem — richard manning, Aug 03 '19 at 09:43

score 0 · Answer 1 · answered Aug 03 '19 at 10:07

What you're basically trying to do is use the jQuery's $.each on a (big) text string (the HTML you receive from AJAX request). The error is telling you, that it can't iterate over it because it isn't a object or array:

at isArrayLike (jquery-3.3.1.js:489)
at Function.each (jquery-3.3.1.js:351)

There are several ways on how to deal with this

Remove the $.each() and just paste the HTML by doing $('#example').html(newContent). If you still need the <tr><td>, just add that to the string in your while loop in getData.php
Create an array instead of a string and append new strings to that array. Then you probably can keep using $.each(). ( dont forget to set dataType : 'json')

Example:

getData.php

$dataArray = array();
while(...){
    $dataArray[] = 'big html string';
} 

print_r(json_encode($dataArray));

Or only send the useful data in the request and make the HTML when it's received (personal favorite).

Example:

getData.php

$dataArray = array();
while(...){
    $subArray = array();
    $subArray['post_id'] = 1
    $subArray['post_name'] = 'My Awesome Post';
    $subArray['post_description'] = 'This is an awesome description'
    $dataArray[] = $subArray;
} 

print_r(json_encode($dataArray));

index.php

var myhtml = ''
$.each(newContent, function () {
     html += '<tr><td><div class="post" id="post_' + this.id + '"> ... </td></tr>';
}
$('#example').html(myhtml)

There are probably even more ways on how to do this, but this should give you an idea.

score 0 · Answer 2 · answered Aug 03 '19 at 10:08

You should try this.

<?php
include 'connect.php';
$columns = array();

$sql = "SELECT * FROM glossary";
$res = mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
$dataArray = array();

while($row = mysqli_fetch_array($res) ) {
    $dataArray[] = '<div class="post" id="post_'.$row["id"].'">
    <div class="single-post row generic-blockquote" style="background-color: #F1F1F1; margin-bottom: 10px;">
      <div class="col-lg-9 col-md-9 ">
        <a class="posts-title" href="blog-single.html"><h1>'.$row["Word"].'</h1></a>
        <p class="excert">
          Accounts help you do money stuff.
        </p>
        <a href="blog-single.html" class="genric-btn primary">More info</a>
      </div>
    </div>
    </div>
    ';
}

echo json_encode($dataArray);

Load SQL data into datatable

index.php

getdata.php

Error

2 Answers2

`index.php`

`getdata.php`