Saving div with internal elements and showing to everybody

user_10892074 0
Viewed 124

I have jQuery that makes div with internal elements on button click. I want that div to be saved in a table and show it to anybody that goes to that page.

I read this question Saving appended elements to database. Now I have two questions:

  1. In that answer, it only shows for one element (<li>). How would I save other elements that are appended inside of my div? Answered in edit below and in question's answer
  2. How would I load add those saved divs on page load? I thought to make PHP code that searches all rows with those elements from column and echo them on page load

Full JSFiddle Example

Div that I want to save:

var div = document.createElement("DIV");
var p = document.createElement("P");
var line = document.createElement("HR");
var text = document.createElement("P");
div.className = 'container';
p.className = 'date';
p.id = 'demo';
line.className = 'line1';
text.id = "text";
text.className = "feedback-container-text";
document.body.appendChild(div);
div.appendChild(p);
div.appendChild(line);
div.appendChild(text);
document.getElementById("text").innerHTML = "some text";
var d = new Date();
d.getDay();
document.getElementById("demo").innerHTML = d;
.container {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  width: 300px;
  height: 220px;
  float: left;
  margin-left: 60px;
  position: relative;
  margin-bottom: 50px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);
}

.container:hover {
  width: 300px;
  height: 225px;
  margin-top: -5px;
  transition-duration: 0.2s;
}

html php jquery javascript
1 Answers

Take the innerHTML attribute of the enclosing <div> tag

savedHTML = div.innerHTML;
// save to database

After that, add <div> and </div> with proper CSS to your string to input and store the string in the database.

See Demo:

function Add() {
var div = document.createElement("DIV");
var p = document.createElement("P");
var line = document.createElement("HR");
var text = document.createElement("P");
div.className = 'container';
p.className = 'date';
p.id = 'demo';
line.className = 'line1';
text.id = "text";
text.className = "feedback-container-text";
document.body.appendChild(div);
div.appendChild(p);
div.appendChild(line);
div.appendChild(text);
document.getElementById("text").innerHTML = "some text";
var d = new Date();
d.getDay();
document.getElementById("demo").innerHTML = d;

savedHTML = div.innerHTML;
document.f["div-value"].value = savedHTML;
}
.container {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  width: 300px;
  height: 220px;
  float: left;
  margin-left: 60px;
  position: relative;
  margin-bottom: 50px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);
  transition-duration: 0.2s;
}

.container:hover {
  width: 300px;
  height: 225px;
  margin-top: -5px;
  transition-duration: 0.2s;
}
<form name="f" action="">
  <!--Change type from 'text' to 'hidden' to hide it from users-->
  <!--and from 'button' to 'submit' so form would submit-->
  <input name="div-value" type="text" value="">
  <input name="add-button" type="button" id="add-button" value="Add DIV" onclick="Add()">
</form>

Note that in a real situation the Add function would complete by submitting the form to the following PHP script:

PHP to add div to table

/*
 * Following 2 PHP codes have been provided by the OP to benefit other community 
 * members who might find them useful.
*/
try {
    // $dbh is connection to database

    $div = $_GET['div-value'];
    $div2 = '<div class="container">'.$div.'</div>';

    $stmt = $dbh->prepare('INSERT INTO Feedback(Element) VALUES(:element)');
    $stmt->bindParam(':element', $div2, PDO::PARAM_STR);
    $stmt->execute();
    echo "Insert successful!<br/>";
} catch (PDOException $e) {
    echo "Error!: ",  $e->getMessage(), "<br/>";
    die();
}

And would retrieve all those divs with following PHP script:

PHP to retrieve all divs from table

try {
 // $dbh is also connection to database
 $stmt = $dbh->prepare("SELECT Element FROM Feedback");
 if ($stmt->execute()) {
    while ($row = $stmt->fetch()) {
      print_r($row["Element"]);
    }
 }
}
} catch (PDOException $e) {
    echo "Error!: ",  $e->getMessage(), "<br/>";
    die();
}
user_28237190
Related