How to run a Javascript query on data that is being received from a database

Question

I'm currently working on a very important project and I'm almost done. But I'm stuck on the final part of the core function of the website... I want to know how to retrieve data from three columns: "Title", "Description", "Link" from my database and print the "Title" and "Description" rows to a <div></div> and i want to use the $("#anchor").attr("href", link) to the link attribute <div><a href = "" id = "anchor"></a></div> my problem is that it only executes the Javascript code on the first row in the database table.

<html>

<head>
  <title>test001</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <style>
    #load1 {
      background-color: green;
      height: 100px;
      width: 100px;
    }
    
    #load2 {
      background-color: green;
      height: 100px;
      width: 100px;
    }
  </style>

  <div id="divone">
    <div id="load">
      <div id="load1">

      </div>
      <div id="load2">

      </div>
      <div>
        <a href="" id="load3" target="_ blank">
                    Test
                </a>
      </div>
    </div>
  </div>
  <script>
    function clone() {
      var div = document.getElementById("load");
      var cln = div.cloneNode(true);
      document.getElementById("divone").appendChild(cln);
    }
  </script>
  <?php
    $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
              // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
}
    $sql = "SELECT * FROM insertion";
    $result = $conn->query($sql);
        if ($result->num_rows > 0) {
   // output data of each row
    while ( $row = $result->fetch_assoc() ) {
            $array[] = $row;
            $id = $row['ID'];
            $tle = $row['Title'];
            $des = $row['Description'];
            $lnk = $row['Link'];
            echo "<script type = text/javascript>clone()</script>";
}

} else { echo "0 results"; }
            $conn->close();
 ?>

    <script>
      var id = "<?php echo $id; ?>";
      var title = "<?php echo $tle; ?>";
      $("#load1").text(title);
      var desc = "<?php echo $des; ?>";
      $("#load2").text(desc);
      var lnk = "<?php echo $lnk; ?>";
      $("#load3").attr("href", lnk);
    </script>
</body>

</html>

Your clone() function is creating duplicate IDs. IDs have to be unique. — Barmar
– Barmar, Commented Jun 19, 2018 at 19:57

Zak · Accepted Answer · 2018-06-19 19:59:34Z

2

You're echo-ing only one row because your echo is outside your while loop:

You need to move your echo for the data back into the loop IE

echo " <script>";
 while ( $row = $result->fetch_assoc() ) {
        $array[] = $row;
        $id = $row['ID'];
        $tle = $row['Title'];
        $des = $row['Description'];
        $lnk = $row['Link'];
        echo "clone();";
        echo 'var id = "' . $id . '";';
        echo 'var title = "' . $tle . '";';
        echo '$("#load1").text(title);';
        echo 'var desc = "' . $des . '";';
        echo '$("#load2").text(desc);';
        echo 'var lnk = "' . $lnk . '";';
        echo '$("#load3").attr("href", lnk);';
}

} else { echo "0 results"; }
        $conn->close();
        echo "</script>";

update

Also as Barmar stated in comment, you'll be overwriting the text for $("#load1") every iteration of the loop. In order to "see" this working .. I'd use $("#load1").append() so you can at least "view" what you are doing and change your code accordingly -- OR -- Create the elements dynamically, and use a key to name them.

edited Jun 19, 2018 at 19:59

answered Jun 19, 2018 at 19:54

Zak

7,5812 gold badges29 silver badges62 bronze badges

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

1 Comment

Barmar Over a year ago

He's also creating duplicate IDs. $("#load1").html() is going to overwrite the same element each time through the loop.

Barmar · Accepted Answer · 2018-06-19 20:04:23Z

2

You shouldn't be using Javascript to create all the DIVs. Just do it in the PHP script itself.

You also need to change all your duplicate IDs to classes, since IDs are supposed to be unique.

<div id="divone">
    <?php
    while ($row = $result->fetch_assoc()) {
        ?>
        <div class="load">
            <div class="load1"> <?php echo $row['Title']; ?> </div>
            <div class="load2"> <?php echo $row['Description']; $> </div>
            <div> <a class="load3" href="<?php echo $row['Link']; ?>" target="_blank">Test</a> </div>
        </div>
        <?php }
?>
</div>

answered Jun 19, 2018 at 20:04

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

How to run a Javascript query on data that is being received from a database

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related