Я работаю над созданием некоторой таблицы HTML по данным JSON.У меня есть сервлет, откуда я возвращаю некоторые данные в формате JSON и манипулирую этими данными JSON с помощью JavaScript.Там, где я застрял, мой AJAX не звонит.
У меня есть форма, где есть 3 входа FROMDATE, TO DATE и OUTLET розетка находится в опции выбора, имеющей опции 1 в качестве «ВСЕ»и еще 3 есть
Вот моя HTML-форма:
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required />
<h4>Outlets:</h4>
<select name="outlet" id="all">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<br>
<br>
<div>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tbl"></div> //after calling AJAX successfully here i would populate my table
<script type="text/javascript" src="JavaScript/DateWiseOlWiseCounterWisejs.js"></script>
Теперь в моем JavaScript я пишу некоторую логику для заполнения таблицы так, как я хочу, и вызываю ajax, но это не удается
Вот мой JavaScript:
$(document).ready(function() {
$("#formId").submit(function(event) {
$.ajax({
url : "DateWiseOlwiseCounterWiseServlet",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
function formatData(data) {
let toReturn = [];
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function(d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = [];
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function(d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
table.appendChild(thead);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function(k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function(d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
table.appendChild(thead);
thead.appendChild(headerRow);
let tbody = document.createElement("tbody");
Object.keys(dateWiseObj).forEach(function(k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function(d) {
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function(i) {
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function(d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
maxUniqueForOutlets[d].forEach(function(i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
});
tbody.appendChild(row);
//console.log(outletWiseTotal);
});
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
});
});
Я вызываю вызов функции внутри функции успеха, но ничего не происходит.как при нажатии на кнопку отправки, он просто перезагружает страницу, даже не вызывая файл JavaScript.Я вызываю свой файл JS извне или изнутри, ничего не происходит.