How to refresh div with table after clicking on button?

javascript

#1

I have created an input search and when the search the button is clicked, I use just javaScript (no jQuery or other javaScript library) to make an asynchronous ajax call to my Web API, passing the user input as a parameter along with the call. When the ajax response comes back, I dynamically build a HTML table that shows the data from the ajax response.

I got everything to work except whenever I click the search button, another table is made under the previous search results. How do I make it so that every time I search a new item, the previous search gets replaced with the new search?

Here is my html code:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Anthracite's Products</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div ng-app="">
            <div ng-include src="'top.html'"> </div>
            <div id="content">
                <h1>Products & Coffee</h1>

                <p>
                    Enter product name or starting letter for the product/coffee you want to find:
                </p>

                <input type="text" id="productSearch" value="A" />
                <input type="button" value="Search" onClick="getProduct()"/>
                <br><br><br>
                <div id="databaseError"></div>
                <div id="productTable"></div>
                <div ng-include src="'bottom.html'"> </div>
            </div>

            <script src="ajaxFw.js"></script>
            <script language="Javascript" type="text/javascript">
                    "use strict";

                    function $(element) {
                        return document.getElementById(element);
                    }

                    function getProduct() {
                        //debugger;
                        var url = "webApi.jsp";
                        url += "?q=" + $("productSearch").value;

                        function success(jsonObject) {
                            if (jsonObject.product === null) { // means artist not found.
                                $("productTable").innerHTML = "Error: JSON string evaluated to null.";
                                return;
                            }
                            if (jsonObject.recordList.length === 0) {
                                $("productTable").innerHTML = "No Products Match Your Search";
                                return;
                            } else {
                                var newRow;
                                var newCell;
                                var newImg;

                                var newTable = document.createElement("table");
                                $("productTable").appendChild(newTable);

                                for (var i in jsonObject.recordList) {
                                    newRow = newTable.insertRow(i);
                                    newCell = newRow.insertCell(0);
                                    newImg = document.createElement("img");
                                    newImg.src = jsonObject.recordList[i].imageURL;
                                    newCell.appendChild(newImg);

                                    newCell = newRow.insertCell(1);
                                    newCell.innerHTML = jsonObject.recordList[i].description;

                                    newCell = newRow.insertCell(2);
                                    newCell.innerHTML = jsonObject.recordList[i].price;
                                }

                                var newHead = newTable.createTHead();
                                newRow = newHead.insertRow(0);

                                newCell = newRow.insertCell(0);
                                newCell.innerHTML = "Product";

                                newCell = newRow.insertCell(1);
                                newCell.innerHTML = "Description";

                                newCell = newRow.insertCell(2);
                                newCell.innerHTML = "Price";
                            }
                        }

                        function error(httpReqObject) {
                            alert("there was an error");
                            console.log(httpReqObject); // when you console.log an object
                            // you can click in the log to discover all its property values.
                        }
                        ajaxCall(url, success, error);
                    }
            </script>
    </body>
</html>

Here is my ajaxFw.js:

function ajaxCall(url, successFn, errorFn) {
    
    var httpReq;
    if (window.XMLHttpRequest) {
        httpReq = new XMLHttpRequest();  //For Firefox, Safari, Opera
    } else if (window.ActiveXObject) {
        httpReq = new ActiveXObject("Microsoft.XMLHTTP");   //For IE 5+
    } else {
        alert('ajax not supported');
    }

    function sendRequest() {
        console.log("ajax calling "+url);
        cache: false;
        httpReq.open("GET", url);
        httpReq.onreadystatechange = handleResponse;
        httpReq.send(null);
    } // sendRequest

    function handleResponse() {
        if (httpReq.readyState === 4) {
            if (httpReq.status === 200) {
                console.log("Ajax success: response text is "+httpReq.responseText);
                var json = "(" + httpReq.responseText + ")";
                var object = eval(json);
                console.log(object);
                successFn(object);
            } else {
                console.log("Ajax error: "+httpReq.statusText);
                console.log(httpReq);
                errorFn("Could not read " + url + ". Status is "+httpReq.statusText);
            }
        }
    } // handleResponse
    sendRequest();
}