Создание нового элемента выбора выбора HTML, когда новый вход добавляется в базу данных (MongoDB)? - PullRequest
Новая
       33

Создание нового элемента выбора выбора HTML, когда новый вход добавляется в базу данных (MongoDB)?

0 голосов
/ 23 октября 2019

Во-первых, я сейчас использую для проекта express.js и ejs.

Проще говоря, я создаю небольшую функцию, с помощью которой пользователь может добавить новую категорию в блог. По сути, пользователь видит выбор параметров, и если он хочет создать новый, он может. Пользователь нажимает «кнопку добавления новой категории», после чего появляется форма, которая добавляется в коллекцию категорий в базе данных (mongoDB). Когда форма отправлена ​​и домашняя страница перенаправлена, я хочу, чтобы я мог видеть варианты выбора с недавно добавленной.

Но когда новые «входные данные» будут добавлены в базу данных, как внешний интерфейс javaScript сможет найти новые данные и создать элемент option на лету? 

 <form class="ui form" action="/blogs" method="POST">
  <div class="field">     
      <label for="">Category</label> 
      <div class="select-category">
          <select class="select js-select" name="blog[category]">
              <option value="<%= category[0].name %>"> <%= category[0].name %> </option>
              <option value="<%= category[1].name %>"><%= category[1].name %></option>
              <option value="<%= category[2].name %>"><%= category[2].name %></option>
          </select>
          <div class="addCategory js-addCategory"> + </div>
      </div>
  </div>  
</form>


<div class="form-modal js-form-modal">
<form class="ui form js-form" action="/blogs/addNewCategory" method="POST">
  <div class="close-icon js-close-icon"> x </div>
  <div class="field"> 
    <label for="">Name</label>
    <input class="js-new-category" type="text" name="newCategory" placeholder="new category">
  </div>
  <button class="ui primary basic button" type="submit">Add</button>
 </form>
</div>


app.post('/blogs/addNewCategory', function(req, res){
  let newCategory = req.body.newCategory

  Category.create({
    name: newCategory
    }, function(err, newCategory){
        if(err){
           res.render('new')
       } else {
           res.redirect('/blogs/new')
      }
  })
})

Я просто хочу иметь возможность сделать что-то подобное в моем веб-интерфейсе (я знаю, что этот код не будет работать, форма никогда не отправляется и даже не использует данные избазы данных), как при нажатии кнопки «Отправить», и новые данные добавляются в базу данных, и пользователь видит только что созданный элемент параметра. 

newCategoryForm.addEventListener('submit', addNewCategory)
function addNewCategory(e){
  // e.preventDefault()
  let value = newCategoryInputEl.value
  let newOption = document.createElement('option')
  let newOptionValue = document.createTextNode(value)

  newOption.appendChild(newOptionValue)
  selectEl.appendChild(newOption)
}

Я знаю, что определенно есть способ сделать это, потому что я вижу эту функцию постояннокак в Youtube добавление нового плейлиста также в Spotify и т. д.

...