title: How to display ajax error using partial view?
body: <p>I wrote a really basic <code>NodeJS</code> application that allow the user to login. Now I'm a newbie on <code>NodeJS</code> so I'm trying to understand how can I display the ajax error using a <code>PartialView</code> from the login <code>view</code>.</p>
  
  <p>First, I have a <code>view</code> called <code>signup.ejs</code>:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-5 d-none d-lg-block bg-register-image"&gt;&lt;/div&gt;
      &lt;div class="col-lg-7"&gt;
      &lt;div class="p-5"&gt;
          &lt;div class="text-center"&gt;
          &lt;h1 class="h4 text-gray-900 mb-4"&gt;Signup!&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="errors"&gt;
              &lt;% include ../partial/messages %&gt;
          &lt;/div&gt;
          &lt;form class="user"&gt;
          &lt;div class="form-group"&gt;
              &lt;input
                  type="username"
                  id="username"
                  name="username"
                  class="form-control form-control-user" 
                  placeholder="Username" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group row"&gt;
              &lt;div class="col-sm-6 mb-3 mb-sm-0"&gt;
                  &lt;input
                  type="password"
                  id="password"
                  name="password"
                  class="form-control form-control-user" 
                  placeholder="Password" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;button id="register" class="btn btn-primary btn-user btn-block"&gt;
              Register Account
          &lt;/button&gt;
          &lt;/form&gt;        
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="/js/app/user/login.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>as you can see I loaded the <code>PartialView</code> called <code>messages</code> before the <code>form</code> declaration, and at the bottom of this <code>view</code> I have included the <code>login</code> script that handle the ajax request:</p>
  
  <pre><code>$("#register").click(function (event) {
      event.preventDefault();
  
      let regData = 
      {
          'username': $("#username").val(), 
          'email': $('#email').val(), 
          'password': $("#password").val()
      };
  
      $.ajax({
          type: 'POST',
          contentType : "application/json",
          url: '/user/signup',
          data: JSON.stringify(regData),
          dataType : 'json',
          success: function (data) {
              alert('hello');
              console.log(data);
          }, 
          error: function(jqXHR, textStatus, errorThrown){
              //How to display in partial here?
          }
      });
  });
  </code></pre>
  
  <p>the <code>ajax</code> request will send the user data to <code>user/signup</code> route:</p>
  
  <pre><code>const userController = require('../controllers/user.controller.js');
  router.post('/signup', userController.save);
  </code></pre>
  
  <p>that route call the function <code>save</code> of <code>userController</code>:</p>
  
  <pre><code>exports.save = function (req, res) {
      let user = new User();
      user.username = req.body.username;
      user.email = req.body.email;
      user.password = req.body.password;
      user.passwordConfirm = req.body.passwordConfirm;
  
      //Validate
      let errors = validate(user);
  
      //All was fine
      if (!errors) {
          //todo
      }
      else {
          res.status(500).send({errors: errors});
      }
  };
  </code></pre>
  
  <p>this function simply <code>validate</code> the data before insert it in <code>MongoDB</code>, if the validation fails, then I return the errors generated by the validation method, that simply contains an array of objects, eg:</p>
  
  <pre><code>[
     { msg: 'Password mismatch' },
     { msg: 'Username length less than 6' }
  ]
  </code></pre>
  
  <p>Now I want display that messages at the top of the form, using the <code>PartialView</code> called <code>messages</code>:</p>
  
  <pre><code>&lt;% if(typeof errors != 'undefined'){ %&gt; &lt;% errors.forEach(function(error) { %&gt;
  &lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
      &lt;%= error.msg %&gt;
      &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;% }); %&gt; 
  </code></pre>
  
  <p>How can I do this using ajax?</p>
  
  <p><strong>Possible Solution</strong></p>
  
  <p>I fixed using this:</p>
  
  <pre><code>res.render('partial/messages', { errors: errors, layout: false});
  </code></pre>
  
  <p>this will return the error structure and then using ajax:</p>
  
  <pre><code> error: function(jqXHR, textStatus, errorThrown){
       $('#errors').append(jqXHR.responseText);
   }
  </code></pre>
  
  <p>I don't know if this is a good solution, let's see if any of you have something better to propose.</p>