I've made the following dynamic table, which rows are created for each record found in database.
$(document).ready(function () {
var $form = $('#my-form');
$form.submit(function () {
$.post($(this).attr('action'), $(this).serialize(), function (response) {
let table = '<table> <thead> <tr> <th>Candidate Name</th> <th>Candidate Surname</th> <th>Interview Type</th> <th>Interview Date</th> <th>Interviewer</th> <th>Feedback</th> </tr> </thead><tbody>';
response.forEach(function (d) {
table += '<tr><td>' + d.candidateName + '</td>';
table += '<td>' + d.candidateSurname + '</td>';
if (d.interviewType === 1) {
table += '<td>MOTIVAZIONALE</td>';
} else if (d.interviewType === 2) {
table += '<td>TECNICO</td>';
} else {
table += '<td></td>';
}
if (d.scheduledDate === null) {
table += '<td></td>';
} else {
table += '<td>' + d.scheduledDate + '</td>';
}
table += '<td>' + d.enterpriseId + '</td>';
if (d.finalFeedback === null) {
table += '<td><button type="button" onclick="sendValue(d.idColloquio)">Add a feedback</button></td></tr>';
}else{
table+= '<td>OK</td></tr>';
}
})
table += '</tbody>';
$('#mytable').empty().html(table);
}, 'json');
return false;
});
});
In each row there is a button used to insert a feedback: this button have to redirect in another page by passing the id as a request parameter, but the "onClick" function doesn't work. On Chrome inspector event in generated.
SendValue:
function sendValue(id) {
window.location.href="insertMotivationFeedback?idColloquio="+id;
}
Anyone can help me?
Thanks
You have to pass complete url:
window.location.href="https://example.com/insertMotivationFeedback?idColloquio="+id;
Related
I have an Html table and I'm feeding that table with data from firebase so in my Html there's no table data td i have tried to add on click on the table row tr but this is adding the click on the table header th
<div>
<table>
<tr onclick="myFunction(this)">
<th>Name</th>
<th>Phone</th>
<th>ID</th>
</tr>
<tbody id="table">
</tbody>
</table>
</div>
<script>
function myFunction(x) {
alert("Row index is: " + x.rowIndex);
}
</script>
the second try is js I have tried this and many other functions like this one but it did nothing no response no errors
function addRowHandlers() {
var table = document.getElementById("table");
var rows = table.getElementsByTagName("tr");
for (i = 1; i < rows.length; i++) {
var row = table.rows[i];
row.onclick = function(myrow){
return function() {
var cell = myrow.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
};
}(row);
}
}
and this is how im feeding td from firebase
var ref = firebase.database().ref("users");
ref.on("value", function(data){
$('#table').empty()
var content = '';
data.forEach(function(childSnapshot){
if (childSnapshot.exists()){
var childData = childSnapshot.val();
console.log(childData);
content +='<tr>';
content += '<td>' + childData.username + '</td>';
content += '<td>' + childData.phone + '</td>';
content += '<td>' + childSnapshot.key + '</td>';
content += '</tr>';
};
});
$('#table').append(content);
});
how to add onClick event to each row I'm new to HTML and js languages
You can refactor your function like
var ref = firebase.database().ref("users");
ref.on("value", function (data) {
$('#table').empty()
data.forEach(function (childSnapshot) {
if (childSnapshot.exists()) {
var childData = childSnapshot.val();
console.log(childData);
const tr = document.createElement('tr')
let content = ""
content += '<td>' + childData.username + '</td>';
content += '<td>' + childData.phone + '</td>';
content += '<td>' + childSnapshot.key + '</td>';
tr.innerHTML = content;
tr.onclick = function () {
alert('tr', childData.phone)
}
$('#table tbody').append(tr);
};
});
});
I am trying to pass a file name from dynamically created table and getting some Uncaught ReferenceError: Q1_58_English_Resume is not defined
at HTMLAnchorElement.onclick (AddRequirement:1)
Here the file name is "Q1_58_English_Resume"
The script for dynamic table is below
if (filesData.length > 0) {
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}
And the Function is below:
function DownloadAttachment(fileName) {
debugger;
var url = "/RequirementManagement/OpenFile?ids=" + fileName;
window.location.href = url;
}
Try this , should work
var table = '';
table += '<table class="radar-grid-table" id="TableAttach">';
table += '<thead>';
table += '<tr>';
table += '<th>Files</th>'
//table += '<th>Select</th>';
table += '<th>Actions</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(filesData, function (i, item) {
table += '<tr>';
table += '<td>' + item + '</td>';
//table += '<td title="' + item.AttachmentId + '">' + item.AttachmentId + '</td>';
//<input value="' + full.QuestionId + '
table += '<td> Download </td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
return table;
}
I am trying to showmodal method, but getting error while taken string. if pass int it calls, how to take string in javascript.
<script>
var table = ' <table id="example" class="table table-striped " width="100%"> <thead>';
table += ' <tr class="success">';
table += '<th>Sender</th>';
table += '<th>Recipient</th>';
table += '<th>Mail Server</th>';
table += '<th>Arrival Time</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
for (var i = 0; i < data.u.length; i++) {
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
table += data.u[i].sender + '</a></td><td>' + data.u[i].receiver;
table += '</td><td>' + data.u[i].mail_server + '</td></tr>';
}
table += '</tbody>';
table += '</table>';
$("#resp1").html(table);
function showModal (id) {
alert("hi ");
}
</script>
You're missing quotation marks in the function call
Change this line
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
To this line
table += '<tr><td><a href="javascript:showModal(\''+data.u[i].sender+'\')">';
I worked on this sample for 3 days strucked at last step!! Please some one help me!!
Any Help is appreciable!!
I am loading a dynamic table, i want to attach a grid on a column. I created a function for binding jqgrid. So when ever i am binding a table i am calling this function with a parameter,
The problem here is if i give the parameter directly it is working , but if i want to load it automatically it is not working.
I will explain below with code:
function bindData() {
$.ajax({
type: "POST",
url: location.pathname + "/getData",
data: "{}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function (response) {
var msg = eval('(' + response.d + ')');
if ($('#tblResult').length != 0) // remove table if it exists
{ $("#tblResult").remove(); }
var table = "<table class='tblResult' id=tblResult><thead> <tr><th>Name</th><th>SurName</th><th>Email</><th>Mobile</th><th>Address</th><th>Actions</th><th>image</th><th>Country</th><th>State</th><th>Gender</th><th>Add.Mobile</th></thead><tbody>";
for (var i = 0; i <= (msg.length - 1); i++) {
var row = "<tr>";
row += '<td>' + msg[i].Name + '</td>';
row += '<td>' + msg[i].SurName + '</td>';
row += '<td>' + msg[i].Email + '</td>';
row += '<td>' + msg[i].Mobile + '</td>';
row += '<td>' + msg[i].Address + '</td>';
row += '<td><img id="im" src="/User_Registration1/images/edit.png" title="Edit record." onclick="bindRecordToEdit(' + msg[i].EmployeeId + ')" /> <img src="/User_Registration1/images/delete.png" onclick="deleteRecord(' + msg[i].EmployeeId + ')" title="Delete record." /></td>';
row += '<td><img class="img" src=' + msg[i].FileName + ' alt="--NO IMAGE--"/></td>';
row += '<td>' + msg[i].Country + '</td>';
row += '<td>' + msg[i].StateName + '</td>';
row += '<td>' + msg[i].Gender + '</td>';
row += '<td style="width:250px;height:120px;"><table id="tblSub' + msg[i].Name + '"></table><script> $(document).ready(function () { BindGrid("AjjiAjji");});</script></td>';
row += '</tr>';
table += row;
}
table += '</tbody></table>';
$('#divData').html(table);
$("#divData").slideDown("slow");
},
error: function (response) {
alert(response.status + ' ' + response.statusText);
}
});
}
see the last column in which i am attaching a grid view by calling a javascript function.
js function:
function BindGrid(user) {
$(document).ready(function () {
$("#tblSub"+user).jqGrid({
loadError: function (xhr, status, error) {
alert('load:' + error);
},
url: 'Fetch.aspx?filter=' + user + '',
data: "{}",
datatype: 'json',
colNames: ['Name', 'Mobile'],
colModel: [
{
name: 'User',
index: 'User',
width: 100,
align: "left",
editable: true,
size: 80
},
{
.
.
.
So if i pass the BindGrid("AjjiAjji") it is working fine, But i want to load the grid automatically like BindGrid('+msg[i].Name+') , It is Showing Error "ReferenceError: AjjiAjji is not defined"
I think you are forgetting to add double quotes and the result whould be BindGrid (AjjAjj). try this:
BindGrid("'+msg[i].Name+'")
this should work fine
I think that problem is that the time you are attaching jqGrid to "$("#tblSub"+user)" is not present in DOM.
You should call BindGrid function only after $('#divData').html(table); which is adding table into DOM.
So that jqGrid can properly work.
I'm creating a 'live' leaderboard table. Every X seconds, an AJAX request is sent to the server to load the latest leaderboard data.
If there's a change in data, the leaderboard will instantly update upon the AJAX request.
However - If there IS a change, instead of instantly showing the new data, I want to animate the table row to its new position instead of instantly reloading it. What is the best way of achieving something like this?
I'm updating the leaderboard at the moment like so:
$(document).ready(function() {
showLeaderboard();
if (autoUpdate != false) {
window.setInterval(function(){
$('#wrapper h2, #leaderboard tbody tr').remove(updateLeaderboard());
}, reloadInterval);
}
});
function updateLeaderboard() {
leaderBoardType;
numRecords;
quizIDs;
topListTitle;
latestTitle;
$.webMethod({
url: 'xxx',
data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
type: 'POST',
cache: false,
beforeSend: function () {
$('body').append('<div class="loading"></div>');
},
success: function (ret)
{
$('.loading').remove();
$('#wrapper').prepend(topListTitle);
$.each(ret.leaderboard,function(i){
pos = i + 1;
str = '<td class="position">' + pos + '</td>';
str += '<td class="name">' + ret.leaderboard[i].first_name + ' ' + ret.leaderboard[i].last_name + '</td>';
str += '<td class="time">' + getTime(ret.leaderboard[i].time_taken) + '</td>';
str += '<td class="points">' + ret.leaderboard[i].points + '</td>';
//str += '<td>' + ret.leaderboard[i].last_name + '</td>';
//str += '<td>' + ret.leaderboard[i].incorrect_attempts + '</td>';
//str += '<td>' + ret.leaderboard[i].user_id + '</td>';
$('#leaderboard tbody').append('<tr>'+str+'</tr>');
});
},
error: function (response) { alert(response.responseText); }
});
}
HTML
<table id="leaderboard">
<thead>
<tr>
<th class="position">Position</th>
<th class="name">Name</th>
<th class="time">Time Taken</th>
<th class="points">Points</th>
</tr>
</thead>
<tbody>
</tbody>
</table>