I am taking the data from textbox and option field using AJAX request to the server storing it to db, creating the row and attaching it to table.
$("#addRecord").click(function(e) {
e.preventDefault();
var question_id = $("#questionId").val();
var question_text = $("#questionText").val();
$.ajax({
url: "addContestAnswer.html",
type: "post",
dataType: "json",
data: {"questionId": question_id, "contestText": question_text},
success: function(data){
addRows(data.questionId,data.contestText);
// calling the function to create row
},
error: function (request, status, error) {
console.log("error" + status);
}
});
});
creating the row
function addRows(questionId ,questionText) {
var deleteButton = '<a href="#" id="deleteButton" class="btn btn-primary">delete</a>';
var fileUpload = '<input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc" />';
var row = "<tr><td class=\"ques_id\">"+questionId+"</td><td class=\"ques_text\">"+questionText+"</td><td class=\"ques_file\">"+fileUpload+"</td><td></td><td>"+deleteButton+"</td></tr>";
$('#recordTable tr:last').after(row);
$("#questionId").val("-1");
$("#questionText").val("");
}
So far the html generated is looking good.
But when I'm refreshing the page, none of the html IDs,classes and Names of generated row are getting preserved.
generated row after ajax call
<tr>
<td class="ques_id">17</td>
<td class="ques_text">asddgfdg</td>
<td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td></td>
<td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
</tr>
After refreshing the page
<tr>
<td>17</td>
<td>asddgfdg</td>
<td><input type="file" name="" id=""></td>
<td></td>
<td><a href="#" id="" class="btn btn-primary">delete</a></td>
</tr>
why is it happening? am I missing some tweak while generating the row, if not what's the solution?