how to update my dynamic web content without reloading the whole page using ajax, jquery, javascript

Question

I have a dynamic table , which contains some userInfo using get method ("/api/dashboard/v1") .I have a modal, onSubmit,it adds userInfo to the table using post method ("/api/adduserInfo/v1").

I used window.location.replace("http://localhost:3000/") to reload the page but want "update the table content without reloading the page" .

I am not getting any proper solution to solve these problem.please help me someone to fix these problem.My code is in Below:

/index.html

<table class="table-bordered mytable">  
    <thead class="table-head">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Address</th>
            <th>Action</th>
         </tr>
    </thead>
    <tbody class="table-body mytabBody">
    </tbody>
</table>
<div class="col-md-12 text-right">
    <button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button>
       <div class="modal fade" id="myModal" role="dialog">
           <div class="modal-dialog">
               <!-- Modal content-->
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">&times;</button>
                       <h4 class="modal-title">Enter User Information</h4>
                   </div>
                   <div class="modal-body">
                       <div class="form-group">
                           <input type="text" class="form-control" id="user_name" placeholder="User name">
                       </div>
                       <div class="form-group">
                           <input type="email" class="form-control" id="email_id" placeholder="Enter email">
                       </div>
                       <div class="form-group">
                           <input type="text" class="form-control" id="address" placeholder="Enter Address">
                       </div>
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button>
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
     </div>
</div>

/modal.js

/* these function is for save new userInfo to the table */

$(function() {
    $('#myFormSubmit').click(function (e) {
        e.preventDefault();

        var username = $("#user_name").val();
        var email = $("#email_id").val();
        var address = $("#address").val()
        $.ajax({
            url: "/api/adduserInfo/v1",
            data: {
                user_name: username,
                email: email,
                address: address
            },
            type: 'post',
            dataType: 'html',
            success: function(data) {

            },
            error: function(xhr, status) {
                alert("Sorry, there was a problem!");
            },
        });
        window.location.replace("http://localhost:3000/"); //not update only the table content without reloading the page. I want only update the table content not reload the page.
    })
});

/table.js

/* fetch table content from the DB */

$(function(){
    $.get("/api/menu/v1", function(response) {
        //console.log(response);
        var html = "";
        for(var i = 0; i< response.length ; i++){
            html += "<li><a href =''>"+response[i].name+"</a></li>"
        }
        $('.sidebar-nav').html(html);

    });

    $.get("/api/dashboard/v1", function (response) {
         //console.log(response);
        var myhtmlsec= "";
        for(var i=0; i<response.data.length; i++) {
            myhtmlsec += "<tr class='myTable'>";
            myhtmlsec +="<td id='tabUser'>"+response.data[i].user_name+"</td>";
            myhtmlsec +="<td id='tabEmail'>"+response.data[i].email+"</td>";
            myhtmlsec +="<td id='tabStatus'> </td>";
            myhtmlsec +="<td id='tabAddress'>"+response.data[i].address+"</td>";
            myhtmlsec +="<td>\
                <a href='#' onclick='myEdit(this);return false;' class='table-edit img-size'>\
                <img src='image/Edit.png'>\
                </img>\
                </a>\
                <a href='#' onclick='myDelete(this);return false;' class='table-delete img-size'>\
                <img src='image/Delete.png'>\
                </img>\
                </a>\
                </td>";
            myhtmlsec +="<td class='hide' id='tabId'>"+response.data[i]._id+"</td>";
            myhtmlsec +="</tr>"
        }
        $('.table-body').append(myhtmlsec);

    });

});

I tried most all ajax,jquery,javascript method but still Not Updating The Table Without Reload the whole page, on submitting modal also not closing

Answer 1

You can append the result of your ajax in your table just like this

$(function() {
    $('#myFormSubmit').click(function (e) {
        e.preventDefault();

        var username = $("#user_name").val();
        var email = $("#email_id").val();
        var address = $("#address").val()
        $.ajax({
            url: "/api/adduserInfo/v1",
            data: {
                user_name: username,
                email: email,
                address: address
            },
            type: 'post',
            dataType: 'json',
            success: function(data) {
                 //append the data here just like you do in your other ajax request

                 var myhtmlsec= "";
                 for(var i=0; i<data.length; i++) {
                     myhtmlsec += "<tr class='myTable'>";
                     myhtmlsec +="<td id='tabUser'>"+data[i].user_name+"</td>";
                     myhtmlsec +="<td id='tabEmail'>"+data[i].email+"</td>";
                     myhtmlsec +="<td id='tabStatus'> </td>";
                     myhtmlsec +="<td id='tabAddress'>"+data[i].address+"</td>";
                    myhtmlsec +="</tr>";
                    //and so on...
                 }
                 $('.table-body').append(myhtmlsec);
                 alert("User Information Added Successfully");

            },
            error: function(xhr, status) {
                alert("Sorry, there was a problem!");
            },
        });
        //window.location.replace("http://localhost:3000/"); remove this
    })
});