CODEWITHSUNDEEP
phpmysql
KABULPUT
KABULPUT

Reputation: 25

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

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>

Upvotes: 0

Views: 52

Answers (2)

Barmar
Barmar

Reputation: 781004

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>

Upvotes: 2

Zak
Zak

Reputation: 7515

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.

Upvotes: 2

Related Questions