onSelect/onChange event in ejs with js in external file from main server code

Question

I've been looking for examples on calling an external script to ejs to render a dynamic variable, but have failed to succeed. I've tried different variations of where to put the code, but I either end up with the dynamic text rendering as [object Object] or just nothing at all. I'm calling select.js outside of app.js because it's a bigger chunk and I'm trying to keep that related directly to server stuff, but if I need to move it directly to the ejs via script/server code I can. But I'd like to figure this out, unless it's just not possible.

Code to support event handler (select.js):

// dynamically show form content based on dropdown selection

exports.selectHelp = function(displayHelpVar, callback) {
  var displayHelpVar = function displayHelp() {
    var select = document.getElementById['selection'];
    var selection = select.option[select.selectedIndex].value;

    if (selection == "delete") {
      document.getElementById('displayHelp').innerHTML = "deleting words";
      // 'deleting words';

    } else if (selection == "update") {
      value = 'updating words';
      document.getElementById('displayHelp').innerHTML = "updating words";
      // 'updating words';

    } else if (selection == "create") {
      value = 'creating words';
      document.getElementById('displayHelp').innerHTML = "creating words";
      // 'creating words';

    } else {
      document.getElementById('displayHelp').innerHTML = "i dont know how to help you";
      // 'i don\'t know how to help you';
    }
    console.log(displayHelpVar);
  };
};

form ejs

  <select id="selection" onSelect=>
    <label>
        <option value="delete" id="delete">Delete Tickets</option>
        </label>
        <label>
          <option value="update" id="update">Update Tickets</option>
        </label>
        <label>
          <option value="create" id="create">Create Tickets</option>
        </label>
  </select>

  <div id="displayHelp" style="display:initial;">
    <p><%= JSON.stringify(displayHelpVar) %><p>
  </div>
  <input type="submit" value="Upload File" />

server-side code (main index render):

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

// use ejs to render boilerplate & dynamic vars
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
  res.render('layout', {displayHelpVar: blurb.selectHelp()});
});

// form view
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '..', '/views/layout.ejs'));
});

I've referenced these for documentation already: Send object from node.js to ejs, not [object Object] and Passing an object to client in node/express + ejs?

But ultimately I know I want an event listener, not what's being served on the client. How do I get the displayHelp div to render the dynamic help text?

score 1 · Accepted Answer · answered Apr 16 '18 at 14:20

Bypassed the socket altogether by rendering this via css:

// form.ejs
<div id="container">
   <div id="delete" class="delete">
      some text
   </div>
   <div id="create" class="create">
      other text
   </div>
   <div id="update" class="update">
      some other text
   </div>
</div>

// client.js
var selectionOnChange = function() {
  var selection = select.options[select.selectedIndex].value;

  switch (selection) {
    case 'delete':
    default:
      document.querySelector('#container').className = 'selected-delete';
      break;
    case 'update':
      document.querySelector('#container').className = 'selected-create';
      break;
    case 'create':
      document.querySelector('#container').className = 'selected-update';
      break;
  };
  console.log(selection, 'selection triggered');
};

// style.css
#container div {
  display: none;
}

#container.selected-update .update {
  font-size: 14px;
  display: block;
}

#container.selected-delete .delete {
  font-size: 14px;
  display: block;
}

#container.selected-create .create {
  font-size: 14px;
  display: block;

onSelect/onChange event in ejs with js in external file from main server code

1 Answers1