I'm creating a ul list of Requests based on the results from an AJAX call. I want to search for specific Requests so that the list gets rebuilt with the search results but I can't get rid of the list once it's built. How can I do this?
onload = function () {
initRequestList(URL);
$("#statusSearch_btn").click(function () {
document.getElementById("requestList").innerHTML = "";
fillSearchParameters();
initRequestList(status)
});
};
function fillSearchParameters() {
status = $("#status_txt").val();
};
function initRequestList(s) {
if (s !== null)
URL = "http://localhost:58510/api/requests/" + status;
var requestList = document.getElementById("requestList");
jQuery.support.cors = true;
$.ajax({
url: URL,
type: 'GET',
dataType: 'json',
success: function (data, textStatus, xhr) {
//console.log(data);
$.each($(data), function (key, value) {
var request = value;
var requestListItem = document.createElement("li");
requestListItem.className = "lijstBlok";
var bold = document.createElement("b");
var br = document.createElement("br");
var br2 = document.createElement("br");
var br3 = document.createElement("br");
var requestStatus = document.createTextNode(request.status);
var requestDd = document.createTextNode(request.departuredate);
bold.appendChild(requestStatus);
requestListItem.appendChild(bold);
requestListItem.appendChild(br);
requestListItem.appendChild(requestDd);
requestListItem.appendChild(br3);
var requestCity;
for (i = 0; i < request.destinations.length; i++) {
if (i !== (request.destinations.length - 1)) {
requestCity = document.createTextNode(request.destinations[i].city + ", ");
requestListItem.appendChild(requestCity);
} else {
requestCity = document.createTextNode(request.destinations[i].city);
requestListItem.appendChild(requestCity);
}
}
requestList.appendChild(requestListItem);
});
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
};
HTML
<body>
<div id="main">
<div id="newRequestDiv">
<button id="newRequestbtn" type="button">New Request</button>
</div>
<br />
<div id="requestsDiv">
<input type="text" id="status_txt" placeholder="Status" /><button id="status_btn" type="button">Search</button>
<ul id="requestList">
</ul>
</div>
</div>
<script src="js/requestDashboard.js"></script>
<script src="js/jquery-1.11.1.js"></script>
