Implementing dependent picklist in node.js + express

Question

I am new to node.js and express. I am writing a node.js application with express and express-handlebars as my templating framework. I want to implement a dependant picklist which will be rendered based on the chosen value of another picklist.

So far this is what I have:

This is my parent picklist

<select id="buildingsSelect" class="building-select-add "name="residentBuildings">
     {{#each buildingRows}}
         <option value="{{idBuildings}}" name={{Name}}>{{Name}}</option>
     {{/each}}
 </select>

When the user selects a building, I make an ajax request,

$('.building-select-add').change(function(){
        var buildingId = $('.building-select-add').val();
        $.ajax({
            type: 'post',
            url: '/resident_add/' + buildingId,
            success: function(data) {
                location.reload();
            },
            error: function(err) {
                console.log('------------ Error while updating this resident: ' + err);
                console.log('------------ Error while updating this resident: ' + err.message);
            }
        });
    });

and send the value which is used to make a database call to a Residents database.

router.post('/:buildingId', function(req, res){
  var buildingId = req.params.buildingId;
  console.log('OOOOOO buildingId: ' + buildingId);
  var resList = [];

  connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){
    if (err) {
      console.log('----------------------- ERROR: Error querying records - ' + err);
      console.log('----------------------- ERROR: ' + err.message);
      return err;
    }
    resList = rows;
  });
});

I want the residents to be displayed in another select but I am not able to populate it.

How do I render the select on the page? If I do a location.reload() in ajax the entire page is reloaded. Is there a way to achieve this?

Answer 1

Usually, what you would do is to make an Ajax request that returns some JSON. Then, when the browser Javascript receives the JSON, it parses that into a Javascript object or array and then you use those results to directly manipulate the DOM to insert them into a list in the page.

Depending upon your desired display, you are either inserting that list into an existing element on the page or you are creating a new list and inserting it into the page. The key is that you're taking the JSON results of the Ajax call and doing this with the client Javascript.

You don't show what the desired HTML result is after the Ajax call so I can't show exactly how would achieve that, but instead of doing a reload() , you would just take the JSON result from the Ajax call (which jQuery will have already parsed into a Javascript object for you) and you would iterate over it and insert it into the DOM as desired.

    $('.building-select-add').change(function(){
        var buildingId = $('.building-select-add').val();
        $.ajax({
            type: 'post',
            url: '/resident_add/' + buildingId,
            success: function(data) {
                // use the data result here to insert into a picklist
                // in the current page
            },
            error: function(err) {
                console.log('------------ Error while updating this resident: ' + err);
                console.log('------------ Error while updating this resident: ' + err.message);
            }
        });
    });

I'm not quite sure exactly what data you want to return from the Ajax call, but it would look something like this:

router.post('/:buildingId', function(req, res){
  var buildingId = req.params.buildingId;
  console.log('OOOOOO buildingId: ' + buildingId);

  connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){
    if (err) {
      console.log('----------------------- ERROR: Error querying records - ' + err);
      console.log('----------------------- ERROR: ' + err.message);
      return err;
    }
    res.json(rows);
  });
});

There are other ways to do this also. The result of the ajax call could be a rendered HTML template and you would just insert that HTML into the right place in the page. If it's just going into another drop-down list, then this probably doesn't make sense as there's little value to using the template engine for just a single drop-down list, but if the resulting HTML had lots of HTML to it (descriptions, columns, etc...), then you might want to use the template engine to create it rather than create it manually in Javascript. It all really depends upon what the desired HTML result looks like (something you haven't shared with us).