I understand this question might be the same. I have googled, unfortunately i might have have missed something similar. I apologies for the same.
I have created a dynamic table in js based on some json response and updated the table accordingly. Now i have a submit button which posts currently selected raw data as an ajax call. But i am unable to call jquery. Following are the codes :
JS :
$(document).ready(function(){
$('#ajax-button').click(function() {
var formData=$("#careers").serialize();
console.log("This is the skills : "+formData);
$.ajax({
type : "POST",
url : "currentopening",
//data : "skills="+skills,
data:formData,
dataType : "json",
async: true,
success : function(response) {
var obj = JSON.parse(response);
console.log("length of json response : "+obj.length)
if(obj.length>0){
//for (var i = 0; i < obj.length; i++)
//{
console.log("the characteristics : "+obj[0].title);
addRow(obj);
//}
}
else{
document.getElementById("dynamictable").innerHTML="No jobs found!";
}
}
});
});
});function addRow(obj) {
var table_1 = document.getElementById("dynamictable");
for(var i=0;i<obj.length;i++){
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.id="apply-button";
var input = document.createElement("input");
input.setAttribute("id",obj[i].jobID);
input.setAttribute("type", "hidden");
input.setAttribute("name", "jobID");
input.setAttribute("value", obj[i].jobID);
var rowCount = table_1.getElementsByTagName("tr").length;
var row1 = table_1.insertRow(rowCount);
row1.id="x";
var cell0=row1.insertCell(0);
var cell1=row1.insertCell(1);
var cell2=row1.insertCell(2);
var cell3=row1.insertCell(3);
var cell4=row1.insertCell(4);
var cell5=row1.insertCell(5);
var cell6=row1.insertCell(6);
var cell7=row1.insertCell(7);
var cell8=row1.insertCell(8);
var cell9=row1.insertCell(9);
cell0.headers="title"; cell1.headers="qualification"; cell2.headers="salary"; cell3.headers="companyName"; cell4.headers="tags"; cell5.headers="location";
cell6.headers="experience"; cell7.headers="aboutCompany";cell8.id="hidden-element";
cell9.id="doit";
cell0.innerHTML= obj[i].title;
cell1.innerHTML= obj[i].qualification;
cell2.innerHTML= obj[i].salary;
cell3.innerHTML= obj[i].companyName;
cell4.innerHTML= obj[i].tags;
cell5.innerHTML= obj[i].location;
cell6.innerHTML= obj[i].experience;
cell7.innerHTML= obj[i].aboutCompany;
document.getElementById("doit").appendChild(btn);
document.getElementById("hidden-element").appendChild(input);}};$('#apply-button').click(function() {
console.log("id of current element : ");
var formData=document.getElementById(this);
console.log("id of current element : "+formData);
//console.log("This is the filter : "+formData);
$.ajax({
type : "GET",
url : "apply",
//data : "skills="+skills,
data:"jobID="+formData,
dataType : "text",
async: true,
success : function(response) {console.log("The response : "+response);
}
});
});
I suspect that since id apply-button is created dynamically and it is not under document.load function, my button is not able to work.Please let me know if more information is required.
I would appreciate a response on this.