title: Refresh a list using AJAX after adding/deleting a user
body: <p>I need to execute two functionalities: Adding and Deleting a User to/from the database (using Mongoose). However, on execution I get a 200 OK page and a blank username. </p>
  
  <p>Is there an issue with the ajax calls?</p>
  
  <p>I am trying to extract user input from a Form (for adding) and make ajax calls to refresh the updated list.
  The code for it is below:</p>
  
  <p><strong>frontend.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log('Frontend Reached');
  
  $(document).ready(function() {
  
    /*$(".delete_user").click(function(){
        
    });*/
  
    var url = '/users/delete_user';
    var user_url = '/users/add_user';
  
  
    function load_users(e) {
      $.ajax({
        url: 'userview.ejs',
        dataType: 'text',
        type: 'post',
        ContentType: 'application/x-www-form-urlencoded',
        data: $('#list').serialize(), //$('#user_form').serialize()
        success: function(data, textStatus, jQxhr) {
          $('#list').load('userview.ejs #list');
          //$('#user_form').submit( load_users );
        },
        error: function(jqXhr, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });
  
      e.preventDefault();
    }
  
  
  
  
    $('#user_form').on('submit', '#user_form', function(e) {
      e.preventDefault();
      var user_name = $("#nameinput").val();
      var user_age = $("#ageinput").val();
  
      $.ajax({
        url: 'userview.ejs',
        dataType: 'text',
        type: 'post',
        ContentType: 'application/x-www-form-urlencoded',
        data: {
          'user_name': user_name,
          'user_age': user_age
        },
        success: function(data, textStatus, jQxhr) {
  
          $('#user_form').submit(load_users);
          load_users();
        },
        error: function(jqXhr, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });
  
      e.preventDefault();
  
  
    }); //onclick
  
  
  
    $(document).on('click', '.delete_user', function(e) {
      e.preventDefault();
      var user_id = $(this).attr('data-id');
      //console.log(user_id);
      var data = {
        user_id: user_id
      };
  
      $.ajax({
        url: 'userview.ejs',
        dataType: 'text',
        type: 'post',
        ContentType: 'application/x-www-form-urlencoded',
        data: {
          data
        },
        success: function(data, textStatus, jQxhr) {
          //   $('#list').html( data );
  
  
          load_users();
        },
        error: function(jqXhr, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });
  
      e.preventDefault();
  
  
    }); //onclick delete
  
  }); //document ready</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>userview.ejs</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta charset="UTF8"&gt;
  &lt;link href="javascripts/frontend.js"&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="/stylesheets/userlist.css"&gt;
  &lt;link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'&gt;
  &lt;link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;&lt;/script&gt;
    &lt;script&gt;
    &lt;/script&gt;
  
    &lt;title&gt;Userlist&lt;/title&gt;
    &lt;script src="javascripts/frontend.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;h1&gt;&lt;strong&gt;FORM&lt;/strong&gt;&lt;/h1&gt;
      &lt;hr id="hr2" style="border: 6px solid palevioletred"&gt;
      &lt;div id="black"&gt;
        &lt;form class="form-horizontal" method="post" action="/users/add_user" id="user_form"&gt;
          &lt;fieldset&gt;
  
  
            &lt;!-- Text input--&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="col-md-4 control-label" for="textinput"&gt;Name : &lt;/label&gt;
              &lt;div class="col-md-4"&gt;
                &lt;input id="nameinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';"&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;!-- Text input--&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="col-md-4 control-label" for="textinput"&gt;Age : &lt;/label&gt;
              &lt;div class="col-md-4"&gt;
                &lt;input id="ageinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number"&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;!-- Button --&gt;
            &lt;!-- Button (Double) --&gt;
            &lt;div class="form-group"&gt;
  
              &lt;div class="col-md-8"&gt;
                &lt;button id="singlebutton" name="button1id" class="btn btn-success"&gt;&lt;b&gt;Add User&lt;/b&gt;&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/form&gt;
  
        &lt;body&gt;
  
          &lt;h1&gt;&lt;strong&gt;USERS&lt;/strong&gt;&lt;/h1&gt;
          &lt;hr id="hr1" style="border: 6px solid #7ec4ec;"&gt;
          &lt;ul id="list" class="triangle"&gt;
  
  
            &lt;!-- Link trigger modal --&gt;
  
  
            &lt;!-- Modal --&gt;
            &lt;div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                    &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit :&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                    &lt;form&gt;
                      Name:&lt;input type="text" name="modal_username" id="nameId" value="" /&gt; Age:
                      &lt;input type="number" name="modal_age" id="ageId" value="" /&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
  
  
  
  
            &lt;% for(var i=0; i&lt;userlist.length; i++) {%&gt;
              &lt;li&gt;
                &lt;%= userlist[i].name %&gt; :
                  &lt;%= userlist[i].age %&gt; &lt;a href="#" data-id="&lt;%= userlist[i]._id %&gt;" class="delete_user" title="Delete this User" id="delete"&gt;Delete&lt;/a&gt; || &lt;a data-toggle="modal" href="#openModal" data-target="#openModal" data-id="&lt;%= userlist[i]._id %&gt;" id="update" title="Update user info"
                      class="update_user"&gt;Update&lt;/a&gt;&lt;/li&gt;
  
              &lt;% } %&gt;
          &lt;/ul&gt;
        &lt;/body&gt;
  
  
        &lt;/fieldset&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is <strong>userController.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var User = require('../models/usermodel.js');
  var userService = require('../services/userService');
  
  
  var userController = {
    add: function(request, response) {
      var user_name = request.body.user_name;
      var user_age = request.body.user_age;
  
      var newUser = new User({
        name: user_name,
        age: user_age
      });
      console.log(newUser);
  
      userService.add(newUser, function(err, added) {
        if (err != null) {
          response.send(500);
        } else {
          response.send(200);
        }
      });
    },
  
    delete: function(request, response) {
  
      var userId = request.body.user_id;
      userService.delete(userId, function(err, deleted) {
        if (err != null) {
          response.send(500)
        } else {
          response.send(200);
        }
      });
    }
  };
  
  module.exports = userController;</code></pre>
  </div>
  </div>
  </p>