php2025/2401.html at main · pdilip84/php2025 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="dynamicPostsContainor">asdf</p>
    <p id="dynamicPostsButton">asdfas242344</p>
    <button type="button" id="submitPostId" class="submitPostId">hit me</button>

    <script>
      // Button to load all existing posts
      let dynamicBtn = document.getElementById("dynamicPostsButton");

      // div where all existing posts appears
      let dynamicpostDiv = document.getElementById("dynamicPostsContainor");
      dynamicpostDiv.innerHTML = "";

      // To create new post
      let submitPost = document.querySelector("button#submitPostId");
      // console.log(submitPost);

      submitPost.addEventListener("click", function () {
        // write ajax call to submit post now.
        let postData = {
          title: document.querySelector("#postTitleId").value,
          content: document.querySelector("#postContentId").value,
          status: "publish",
        };
        console.log(postData);
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost/Word-Plugin/wp-json/wp/v2/posts");
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.setRequestHeader("X-WP-Nonce", myData.nonce);
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState);
          if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
          } else {
            console.log(xhr.response);
          }
        };
        console.log(typeof postData);
        postData = JSON.stringify(postData);
        console.log(typeof postData);
        console.log(postData);
        xhr.send(postData);
      });

      // Event to load all existing posts on frotend
      dynamicBtn.addEventListener("click", function () {
        console.log("button is clicked to load dynamic data");
        //   make an ajax call to fetch post data
        //   init
        let xhr = new XMLHttpRequest();
        //   open
        xhr.open(
          "GET",
          "https://dilip-parmar.in/wp-json/wp/v2/posts?categories=19"
        );
        //   prepare what to do when we received or not receive the data
        xhr.onload = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            //   console.log(this);
            let responseWeGot = xhr.responseText;
            console.log(typeof responseWeGot);
            //   console.log(responseWeGot);
            let jsonData = JSON.parse(xhr.responseText);
            //   console.log(jsonData);
            console.log(typeof jsonData);
            createHTML(jsonData);
          } else {
            console.log("Some issue with this ajax call");
          }
        };
        //   send data
        xhr.send();
      });

      // html to create layout of existing posts
      function createHTML(postData) {
        postData.forEach((element) => {
          console.log(element);
          // console.log(element.title.rendered);
          // dynamicpostDiv.innerHTML = "how you are pooja";
          dynamicpostDiv.innerHTML += "<h4>" + element.title.rendered + "</h4>";
          dynamicpostDiv.innerHTML += "<p>" + element.content.rendered + "</p>";
        });
      }
    </script>
  </body>
</html>