Develop Reference

Dynamically update select after changing previous select value using AJAX

I am aware that this is a recurring question, for all web programming languages. I have spent five hours trying to apply solutions found here without success, which is why I write this question.
What I want:
I have two selectors, both when loading the page are filled with information directly from the database successfully.
If I select an option from the first selector (selectSchraubfall) I want the second selector (selectWorkplace) to update, showing only those possible results for the first selector.
What I did:
Created the selectors inside the jsp getting the information from a servlet that executes a sql query ✔.
Created the onChange event listener for the first selector ✔.
Created a js function with an Ajax call to make a new query from the controller and get a filtered list of options for the second select ✔.
Inside the success function I tried to inject the result of the Ajax call into the second select via .html(), it does not work. How can I inject JSTL? In other words, how can I inject the content of wpFilteredList in selectWorkplace? ✕
What I tried:
Using JSON -> Didn't work ✕
Using JAVA scriplets inside the JSP -> Didn't work ✕
JSP
html:
<div class="row">
<div class="col-md">
<label style="font-size: 20px;">Schraubfall ID: </label>
<select id="selectSchraubfall" name="selectSchraubfall" form="formResult" class="form-control" >
<option>Select ID</option>
<c:forEach items="${screwdriverlist}" var="screwdriverlist">
<option><c:out value="${screwdriverlist.screwdriverid}" /></option>
</c:forEach>
</select>
</div>
<div class="col-md">
<label style="font-size: 20px;">Workplace: </label>
<select id="selectWorkplace" name="selectWorkplace" form="formResult" class="form-control">
<option>Select workplace</option>
<c:forEach items="${workplaceList}" var="workplaceList">
<option><c:out value="${workplaceList.workplacename}" /></option>
</c:forEach>
</select>
</div>
</div>
JS:
var options="";
$("#selectSchraubfall").on('change',function(){
var value=$(this).val();
resultSelectValue('Schraubfall', value);
});
function resultSelectValue(columnName, value) {
// Statements
var params = {};
params.colname = columnName;
params.valuecol = value;
$.ajax({
type: "GET",
url: 'ResultSelectValuesController',
data: params,
success: function (data) {
var workplaceArray = [];
$("#selectWorkplace").empty().html();
<c:forEach items="${wpFilteredList}" var="wpFilteredList">
//<option value="${wpFilteredList.name}"></option>
workplaceArray.push('"${wpFilteredList.name}"');
</c:forEach>
$("#selectWorkplace").html(workplaceArray); //I know this is not correct but how can I do something similar using the wpFilteredList?
},
error : function(ex) {
swal("Error", "Error loading workplace info " + ex.Message, "error");
}
});
}
Java (ResultSelectValuesController)
#Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String colname = request.getParameter("colname");
String valuecol = request.getParameter("valuecol");
if(colname.contains("Schraubfall")) {
//GET WORKPLACES
workplacesfilteredlist = wcdao.workplacesListFilter(colname, valuecol);
request.setAttribute("wpFilteredList", workplacesfilteredlist);
}
request.getRequestDispatcher("/Views/Results/ResultPage.jsp").forward(request, response);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
processError(e, request, response);
}
}

Below block is JSTL server side interpolation. Javascript can't process this syntax.
You need to replace below JSTL code with javascript version which pushes the data from ajax requests response to workplaceArray.
<c:forEach items="${wpFilteredList}" var="wpFilteredList">
//<option value="${wpFilteredList.name}"></option>
workplaceArray.push('"${wpFilteredList.name}"');
</c:forEach>
The code below is adds new data to the select element as option elements. You need to replace data as your response type.
data.forEach(workplace => {
$('#selectWorkplace').append($('<option>', {
value: workplace,
text: workplace
})
})
After the changes you don't need the below code anymore.
$("#selectWorkplace").html(workplaceArray);

Finally I solved the problem by myself, It worked using Gson. Basically I am returning an Array of Arrays and I manipulate the data as I want in the JSP.
The code now:
JSP
function resultSelectValue(columnName, value) {
// Statements
var params = {};
params.colname = columnName;
params.valuecol = value;
$.ajax({
type: "GET",
url: 'ResultSelectValuesController',
data: params,
success: function (data) {
$( "#selectWorkplace" ).empty();
$( "#selectSchraubfall").empty();
var htmlWorkplace = "<option>Seleccionar Workplace</option>";
var htmlsf = "<option>Todos los Schraubfalls</option>";
for (i = 0; i < data.length; i++) {
for(j = 0; j < data[i].length; j++){
alert(data[i][j]);
if(i == 0) {
htmlWorkplace += "<option>"+data[i][j]+"</option>";
}
if(i == 1){
if(data[i][j] != 'null' && data[i][j] != null){
htmlsf += "<option>"+data[i][j]+"</option>";
}
}
}
}
$( "#selectWorkplace" ).html(htmlWorkplace);
$( "#selectSchraubfall").html(htmlsf);
JAVA
#Override
public void processMethodGET(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
response.setContentType("application/json");
String colname = request.getParameter("colname");
String valuecol = request.getParameter("valuecol");
if(colname.contains("Atornillador")) {
//GET WORKPLACES
wpfilteredlist = wcdao.workplacesListFilter(colname, valuecol);
//GET SF
sffilteredlist = sfdao.SFListFiltered(colname, valuecol);
ArrayList<ArrayList<String>> listGet = new ArrayList<ArrayList<String>>();
ArrayList<String> wpList = new ArrayList<String>();
ArrayList<String> sfLista = new ArrayList<String>();
for (int i = 0; i < wpfilteredlist.size(); i++) {
wpList.add(wpfilteredlist.get(i).getName());
}
for(int i = 0; i < sffilteredlist.size(); i++) {
sfList.add(sffilteredlist.get(i).getSfname());
}
listGet.add(wpList);
listGet.add(sfList);
Gson gson = new Gson();
JsonElement element = gson.toJsonTree(listGet);
PrintWriter out = response.getWriter();
out.print(element);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
processError(e, request, response);
}
}

Display a url response in the front-end

I am able to get my url response in the console tag in google chrome. I need your help in displaying those values in my interface. The provided below code only enables me to display the first value in the url response.
main.js:
try{
var getNameOfEmployee = document.getElementById('getNameOfEmployeeID');
function displayEmployee(){
if (getNameOfEmployee.value != "") {
$("#someform").submit(function (event) {
event.preventDefault();
});
AjaxGet();
}
else{
alert("Please enter any name of employee that you wish to know the extension code of!");
}
}
AjaxGet = function (url, storageLocation, mySuccessCallback) {
var result = $.ajax({
type: "GET",
url: 'http://localhost:8080/employee/' +$("#getNameOfEmployeeID").val(),
param: '{}',
contentType: "application/json",
dataType: "json",
success: function (data) {
storageLocation = data;
globalVariable = data;
console.log(storageLocation);
console.log(storageLocation.empName0.extCode);
var length = Object.keys(storageLocation).length;
var empArray = new Array(length);
}
}).responseText ;
return result;
return storageLocation;
//console.log(result);
} ; }
catch(e){ document.getElementById("demo").innerHTML = e.message; }
My console is as:
empName0
:
{empName: "Aran", extCode: 5500}
empName1
:
{empName: "Bran", extCode: 5900}
empName2
:
{empName: "Cran", extCode: 5750}
Please somebody help me how to get all these results get printed in my index page once the submit button is clicked.
Just now I tried JSON.stringify(storageLocation) and print the results on an alert message. Please provide me an answer to display the results which are now duplicated. If you need my java file which retrieves the data, it follows:
employeeDAO.java :
#Repository public class EmployeeDAO {
private static final Map empMap = new HashMap();
static {
initEmps();
}
private static void initEmps() {
}
public JSONObject getEmployee(String empName){
Map<String ,Employee> empMap2 = new HashMap<String ,Employee>();
String filePath="D:\dummy.xls";
ReadExcelFileAndStore details = new ReadExcelFileAndStore();
List<Employee> myList= details.getTheFileAsObject(filePath);
JSONObject emp1 = new JSONObject();
boolean check=false;
int j=0;
for (int i=0; i<myList.size(); i++) {
if (myList.get(i).getEmpName().toLowerCase().contains(empName.toLowerCase()))
{
emp1.put("empName"+j,myList.get(i));
j++;
check = true;
}
}
if(check == true)
{
//System.out.println("yes");
return emp1;
}
else
{
return null;
}
}
public Employee addEmployee(Employee emp) {
empMap.put(emp.getEmpName(), emp);
return emp;
}
public Employee updateEmployee(Employee emp) {
empMap.put(emp.getEmpName(), emp);
return emp;
}
public void deleteEmployee(String empName) {
empMap.remove(empName);
}
public List<Employee> getAllEmployees() {
String filePath="D:/dummy.xls";
ReadExcelFileAndStore details = new ReadExcelFileAndStore();
return details.getTheFileAsObject(filePath);
}
public List<Employee> getAllImportantEmployees() {
String filePath="D:/dummy.xls";
ReadImportantExtensionSheet impDetails = new ReadImportantExtensionSheet();
return impDetails.getTheFileAsObject(filePath);
} }

You could add some DOM manipulation inside you AJAX success method:
success: function (data) {
storageLocation = data;
console.log(storageLocation.empName0.extCode);
$("#someform #someLabel").val(storageLocation.empName0.extCode);
$("#someform #someOtherLabel").val(storageLocation.empName0.empName);
}
This will wait for the AJAX to complete and then update your page with the results.
You can use a jQuery each function to loop over each element in the results and update their corresponding elements on the page.
success: function (data) {
storageLocation = data;
$.each(storageLocation, function (index, value) {
console.log(value.extCode);
$("#someform #someLabel" + index).val(value.extCode);
$("#someform #someOtherLabel" + index).val(value.empName);
});
}

Have a table in your html
Upon receiving the response populate in UI
This is a sample code, change as per the json structure
function load() {
var resp = '[{"empName":"Aran","extCode":5500},{"empName":"Bran","extCode":5900},{"empName":"Cran","extCode":5750}]';
var emps = JSON.parse( resp );
var i;
for(i=0; i<emps.length; i++) {
$('#empdata').append('<tr><td>'+emps[i]['empName']+'</td><td>'+emps[i]['extCode']+'</td>...</tr>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="empdata" style="border: 1px solid;background-color: #eedaff;">
<th>Name</th><th>Ext</th>
</table>
<button onclick="load();">Load</button>
</body>

How to add csrf token in django with js only without ajax?

I basically want to implement a django view that accepts some json data and then also posts a json data which would be displayed.The confirm group view accepts a list of people via json data , forms a group and then returns the group code back to display.
I was getting the Forbidden(403) CSRF token missing or incorrect Error
I am beginner in django and js so please answer accordingly. Thanking you in advance :)
view.py
import json
def confirm_group(request):
data = json.loads(request.body.decode("utf-8"))
grp = Group()
grp.group_code = group_code_generator()
grp.save()
for i in range(len(data)):
Player = Regplayer.objects.filter(pk=data[i]["pk"])
pl = Enteredplayer()
pl.regplayer = Player
pl.group = grp
pl.save()
return JsonResponse(grp.group_code, safe=False)
script.js
function confirm()
{
var i = 0;
var rows= document.getElementById("group").children;
var num= document.getElementById("group").childElementCount;
if(num==0)
{
}
else
{
// alert("Confirm grouping of "+num+" people?");
for(i=0; i < num; i++)
{
send_name=rows[i].children[0].children[0].innerHTML;
send_gender=rows[i].children[3].children[0].innerHTML;
send_clgname=rows[i].children[1].children[0].innerHTML;
send_sport=rows[i].children[2].children[0].innerHTML;
send_id=rows[i].children[5].innerHTML;
myObj["data"].push({"name":send_name, "gender":send_gender, "college":send_clgname, "sport": send_sport, "pk": send_id});
alert(JSON.stringify(myObj));
}
csrf_token = document.getElementById('csrf_token').innerHTML;
myObj["data"].push({"csrfmiddlewaretoken": csrf_token });
//POST TO BACKEND
// Sending and receiving data in JSON format using POST method
//
var ourRequest = new XMLHttpRequest();
var url = "/confirm_group/";
ourRequest.open("POST", url, true);
ourRequest.setRequestHeader("Content-type", "application/json");
// POST
var data = JSON.stringify(myObj);
ourRequest.send(data);
// Obtain
ourRequest.onreadystatechange = function () {
if (ourRequest.readyState === 4 && ourRequest.status === 200) {
var json = JSON.parse(ourRequest.responseText);
var groupCode = json.groupcode;
//json object received
new_group(groupCode);
}
};
// if success call new_group() else call error_handle()
// new_group();
//error_handle();
//empty json object now
}
}
index.html
<span id="csrf_token" style="display: none;">{{ csrf_token }}</span>
<div class="confirm-modal">
<div class="form">
<p id="modal-text"></p>
<button class="btn1" onclick="confirm()">Confirm</button>
<button class="btn2" onclick="close_modal()">Cancel</button>
</div>
</div>

Load data from database on new page, according to what button was pressed

Part of my index.html contains 3 buttons-anchors like this (There is some bootstrap as well)
Index.html
<a id="category1" href="html/auctionBay.html" class="portfolio-link" >
<a id="category2" href="html/auctionBay.html" class="portfolio-link" >
<a id="category3" href="html/auctionBay.html" class="portfolio-link" >
These buttons redirect me to the auctionBay.html which contains a div
auctionBay.html
<div id="result" class="container"></div>
What i need, is when i press a button from the above, to go to the auctionBay.html and accordingly to what was pressed, print the data from the appropriate table (category1-3) from my database into the 'result' div (it's important to be in the div).
I currently have a servlet that can do this statically when auction.html loads using an ajax call
var j = jQuery.noConflict();
function myFunction() {
j.ajax({
type : 'GET',
url : '../auctionsDisplay',
success : function(data) {
j("#result").html(data);
}
});
}
but only works if i specify the category manually.(antiques=category1 for example)
AuctionDisplay.java
public class AuctionsDisplay extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String result = "";
try {
Connection con = DBConnection.getCon();
String category = "antiques";
String query = "select id, name, price from " + category;
PreparedStatement ps = con.prepareStatement(query);
ResultSet rs = ps.executeQuery();
int i;
result = "";
boolean flag = rs.next();
while (flag) {
result += "<div class='container'><div class='row'><h1 id='antiques' class='category'>Antiques</h1></div><div class='row'>";
i = 0;
while (i < 4 && flag) {
ps = con.prepareStatement("select highestBidder, ends from auctions where itemId=?");
ps.setString(1, rs.getString("id"));
ResultSet rs2 = ps.executeQuery();
rs2.next();
String price = rs.getString("price");
if (rs2.getString("highestBidder") != null)
price = rs2.getString("highestBidder");
result += "<div class='col-md-3' portfolio-item>";
result += "<div class='w3-container w3-hover-shadow w3-center'>" + "<h2>" + rs.getString("name")
+ "</h2><div class='w3-card-20' style='width:100%'>"
+ "<input id='2' type='image' src='../img/portfolio/w3.jpg' data-toggle='modal' "
+ "data-target='#MoreInfo'style='width:90%;'>"
+ "<div class='w3-container w3-center responsive'>"
+ "<p style='padding:5px;'>Highest Bid: " + price + "\u20ac <br> " + "Ends at: "
+ rs2.getString("ends") + "<p></div></div></div></div>";
flag = rs.next();
i++;
}
result += "</div></div>";
}
} catch (Exception e) {
e.printStackTrace();
}
out.println(result);
}
I understand jquery, ajax, get-post requests, javascript (no php please), so how can i achieve what i want ? It's propably simple but it's confusing me

You can achieve what you want in javascript thanks to window.LocalStorage. Since you want your data from one page to be sent to another page(where the browser loads a whole new page which results in the loss of any data retrieved by the last page), via javascript you WILL need to make use of localStorage to get the desired results.
How to?
var j = jQuery.noConflict();
function myFunction(category_id) {
//use this id to fetch your appropriate data
j.ajax({
type : 'GET',
url : '../auctionsDisplay',
success : function(data) {
localStorage.setItem("category_result", data);
}
});
}
j('.portfolio-link').click(function(){
var category_id = this.id //this will give you the pressed <a>'s ID value
myFunction(category_id);
})
//then on document load retrieve the localStorage value you stored.
$(document).ready(function () {
if (localStorage.getItem("category_result") !== null) {
//feed the value to the 'results' div
j('#result').html(localStorage.getItem("category_result"));
}
}
Let me know if this helped

Jquery datatable warning

I have a jquery editable table.
In code behind there are three actions.
One to load data for datatable
Another to delete data from datatable
And the last one for Save data.
There is nothing special in these actions.
I have The problem with save data. Data are saved correctly to database and then there is redirection to load data to datable again.
When data are saved correctly do database, there is redirection which load new data to datatable and then i get this warning:
DataTables warning: table id=myDataTable - Requested unknown parameter '0' for row 8. For more information about this error, please see http://datatables.net/tn/4
I have looked this error on that page and i can not still find solution for this bug.
Interesting is when i get this error and i refresh page with datatable this time data are loaded correctly.
I do not know what is going on.
Please help
Here are two problematic actions
[HttpGet]
public ActionResult TesotwanieTabelki(int promotionId)
{
marketPromocji.Areas.DELIVER.Models.PromotionsProductsViewModel promotionProductsViewModelItem =
new marketPromocji.Areas.DELIVER.Models.PromotionsProductsViewModel();
promotionProductsViewModelItem.productDetails =
new List<marketPromocji.Areas.DELIVER.Models.ProductDetails>();
marketPromocji.Models.promocje promocje = unitOfWork.PromocjeRepository.GetByID(promotionId);
aspnet_Users produktyWDanejPromocji=promocje.promocje_produkty.Select(x => x.produkty).First().aspnet_Users; //czyje produkty w danej promocji
ICollection<produkty> produkty = unitOfWork.ProduktyRepository.Get().Where(x => x.aspnet_Users.UserId== produktyWDanejPromocji.UserId).ToList();
List<SelectListItem> selectList=new List<SelectListItem>();
foreach (produkty p in produkty)
{
selectList.Add(new SelectListItem { Text = p.nazwa, Value = p.id.ToString()});
}
promotionProductsViewModelItem.selectList = selectList;
promotionProductsViewModelItem.data_start = promocje.data_start;
promotionProductsViewModelItem.data_koniec = promocje.data_koniec;
promotionProductsViewModelItem.czy_zielony_koszyk = promocje.czy_zielony_koszyk;
promotionProductsViewModelItem.id = promocje.id;
promotionProductsViewModelItem.poziom_dostepnosci = promocje.poziom_dostepnosci;
promotionProductsViewModelItem.wynagrodzenie = promocje.wynagrodzenie;
if (promocje.sposob_wynagrodzenia != null)
{
promotionProductsViewModelItem.sposobWynagrodzenia = promocje.sposob_wynagrodzenia;
}
else
{
promotionProductsViewModelItem.sposobWynagrodzenia = "";
}
ICollection<marketPromocji.Models.promocje_produkty> promocje_produkty = unitOfWork.PromocjeProduktyRepository.Get().Where(x => x.ref_promocja == promotionId).ToList();
foreach (marketPromocji.Models.promocje_produkty item in promocje_produkty)
{
promotionProductsViewModelItem.productDetails.Add(new marketPromocji.Areas.DELIVER.Models.ProductDetails()
{
productId = item.produkty.id,
cena_brutto = item.cena_brutto,
cena_brutto_dla_sklepu = item.cena_brutto_dla_sklepu,
cena_netto = item.cena_netto,
cena_netto_dla_sklepu = item.cena_netto_dla_sklepu,
nazwa = item.produkty.nazwa,
url_obrazka = item.produkty.url_obrazka
});
}
Session[User.Identity.Name] = promotionProductsViewModelItem; //this session is used for datatable update action
return View(promotionProductsViewModelItem);
}
[HttpPost]
public ActionResult AddData(FormCollection formCollection)
{
int promotionId = Convert.ToInt32(formCollection.Get("promotionId"));
string addedProductId = formCollection.Get("Produkty");
int productId = Convert.ToInt32(addedProductId);
marketPromocji.Areas.DELIVER.Models.PromotionsProductsViewModel promotionsProductsViewModel =
(marketPromocji.Areas.DELIVER.Models.PromotionsProductsViewModel)Session[User.Identity.Name];
produkty produkt = new produkty();
produkt = unitOfWork.ProduktyRepository.GetByID(productId);
promocje_produkty promocjeProdukty = new promocje_produkty();
promocjeProdukty.cena_brutto = Convert.ToDecimal(formCollection.Get("cenaZakupuNetto")); //tutaj to jeszcze musze sprawdzic czy to w odpowiedniej kolejnosci jest;/
promocjeProdukty.cena_brutto_dla_sklepu = Convert.ToDecimal(formCollection.Get("cenaZakupuBrutto"));
promocjeProdukty.cena_netto = Convert.ToDecimal(formCollection.Get("cenaSprzedazyNetto"));
promocjeProdukty.cena_netto_dla_sklepu = Convert.ToDecimal(formCollection.Get("cenaSprzedazyBrutto"));
string zielonyKoszyk = formCollection.Get("zielonyKoszyk");
if(zielonyKoszyk==null)
{
promocjeProdukty.czy_zielony_koszyk = false;
}
else
{
promocjeProdukty.czy_zielony_koszyk = true;
}
promocjeProdukty.ref_produkt = productId;
promocjeProdukty.ref_promocja = promotionId;
try
{
unitOfWork.PromocjeProduktyRepository.Insert(promocjeProdukty);
unitOfWork.Save();
}
catch(Exception ex)
{
}
return RedirectToAction("TesotwanieTabelki", new { promotionId=promotionId});
}