0

Hi,

I'm trying to get value from mongoose and populate textbox with it. So basically when I click Edit button I would like the name of the department appear in Department name textbox. I tried multiple things but failed. ($('#departmentName').val(department.name) for example) How can I do it properly? Thank you.

my department handlebar

<h2>Departments List</h2>
<div class="row">
 <div class="col-lg-12">
  <table class="table">
   <thead>
    <tr>
     <th>Name</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <form method="POST" action="/departments/create_department">
      <td><input class="form-control" type="text" placeholder="Department Name" name="departmentName" id="departmentName"></td>
      <td><button class="btn btn-primary" type="sumit">Add Department</button></td>
     </form>
     <td><button class="btn btn-info">Update</button></td>
     <td><button class="btn btn-info">Clear</button></td>
    </tr>
    {{#each departments}}
    <tr>
     <form method="POST" action="/departments/remove_department/{{_id}}?_method=DELETE">
      <td>{{name}}</td>
      <td><button class="btn btn-danger" type="submit">Remove</button></td>
     </form>
     <form method="GET" action="/departments/edit_department/{{_id}}?">
      <td><button class="btn btn-warning" value={{id}} type="submit">Edit</button></td>
     </form>
    </tr>
    {{/each}}
   </tbody>
  </table> 
 </div>
</div>

my department controller

var express = require('express');
var router = express.Router();
var passport = require('passport');
var mongoose = require('mongoose');

var Departments = require('../models/department');
var User = require('../models/user');

// List of departments
router.get('/add_department', userAuthenticated, function(req, res, next) {
 Departments.find(function(err, departments) {
  if (err) {
   throw err;
  }
  res.render('add_department', {title:'Add New Department', departments: departments, name: departments.name, id: departments._id})
 })
});

// Edit department
router.get('/edit_department/:id', userAuthenticated, function(req, res, next) {
 var departmentName = "";
 Departments.findById(req.params.id).exec(function(err, department) {
  if (err) {
   throw err;
  } else {
   $('#departmentName').val(department.name);
   res.redirect('/departments/add_department');
  }
 })
});
Anthony Ashpen
  • 25
  • 1
  • 1
  • 8

1 Answers1

0

You could try changing the input field in handlebars to display the value you queried from mongoose

change this

<td><input class="form-control" type="text" placeholder="Department Name" name="departmentName" id="departmentName"></td>

to this

<td><input class="form-control" type="text" value={{name}} name="departmentName" id="departmentName"></td>

Then take this out of the routes

$('#departmentName').val(department.name);

UPDATE:

So something like this

// List of departments
router.get('/add_department', userAuthenticated, function(req, res, next) {

// grab the deparment from the req
var departmentFromEdit ="";
if(req.query.dn){
    departmentFromEdit = req.query.dn;
}
Departments.find(function(err, departments) {
    if (err) {
        throw err;
    }
    res.render('add_department', {title:'Add New Department', departments: departments, name: departments.name, id: departments._id})
})});

// Edit department
router.get('/edit_department/:id', userAuthenticated, function(req, res, next) {
var departmentName = "";
Departments.findById(req.params.id).exec(function(err, department) {
    if (err) {
        throw err;
    } else {
        departmentName = encodeURI(department.name);
        // dn for departmentName or defaultName
        res.redirect('/departments/add_department?dn=' + departmentName);
    }
})});
Daniel Hayes
  • 1
  • 1