Notes for updating an item

update_item.md

Updating an item

Things to revise and do

Setup

• Click on the edit button to get the prompt

• Get the user value and send it to the node server

• Make a new file browser.js and put a link to that in the html that is returned

• Create a public folder and create this file in it

• Give access to this public folder

• Add this below the db line

  let db

  app.use(express.static('public'))

This is what allows access to the public folder.

Listen to the event

In the browser.js add this function

document.addEventListener("click", function(e){
	if(e.target.classList.contains("edit-me")){

	}
})

This says that only if there is a click on a target that has the class edit-me do something.

Now we are going to get the value that the user typed in:

document.addEventListener("click", function(e){
  if(e.target.classList.contains("edit-me")){
    let userInput = prompt("Enter your desired new text")
    console.log(userInput)
  }
})

Sending this value to the node server

https://github.com/axios/axios

Use the cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Include this in server.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/browser.js"> </script>
</body>

Add this line in browser.js

axios.post(a, b).then().catch()

The first argument a is the url that we want to send the post request to.

axios.post("/update-item", b).then().catch()

The second argument is the data that you want to send.

axios.post("/update-item", {text: userInput}).then().catch()

This returns a promise.

Inside the then you include a function that will only run when the action in the post function has completed.

The catch is where you include a function that will run if the function in the post runs into a problem.

document.addEventListener("click", function(e){
  if(e.target.classList.contains("edit-me")){
    let userInput = prompt("Enter your desired new text")
    axios.post("/update-item", {text: userInput}).then(function(){
      // Do something interesting here in the next video
    }).catch(function(){
      console.log("Please try again later.")
    })
    console.log(userInput)
  }
})

Receiving this value on the node server

Go to server.js

app.post('update-item', function(req, res){
  // This is where the db communication will happen
})

app.post('update-item', function(req, res){
  // This is where the db communication will happen
  console.log(req.body.text)
  res.send("Success")
})

Make a change

Find this line

app.use(express.urlencoded({extended: false}))

This line tells express to take form data and add it to the body object in the request.

We want to tell express to do something similar to asynchronous requests.

app.use(express.json())

Summary

This function in browser.js sends a post request

document.addEventListener("click", function(e){
  if(e.target.classList.contains("edit-me")){
    let userInput = prompt("Enter your desired new text")
    axios.post("/update-item", {text: userInput}).then(function(){
      // Do something interesting here in the next video
    }).catch(function(){
      console.log("Please try again later.")
    })
    console.log(userInput)
  }
})

This function on the server side gets this request (this is in server.js)

app.post('/update-item', function(req, res){
  // This is where the db communication will happen
  console.log(req.body.text)
  res.send("Success")
})

At this point you should see what you entered in the box on the browser in the cosole that is running your server.