Ajax request does not fire on click

Ajax request does not fire on click - javascript

I am trying to use Ajax to post some data to a php script. I want the ajax request to be triggered when the delete button is clicked, and then delete the div where the click button was clicked.
Here is the code:
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($employees as $employee)
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
And here is the Javascript:
<script type="javscript">
$('.btn-danger').on('click', function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$.ajax({
url: '../../controllers/userManagementAjax.php',
type: 'post',
data: {'action': 'delete', 'email': id},
success: function(data, status) {
if(data == "ok") {
$('#tr'+'id').remove();
}
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
}); // end ajax call
});
</script>
I've tried a number of things and nothing works, the click event is not event logged to the the console.
Thank you all for your suggestions!

Please take a look here.
http://jsfiddle.net/py6PJ/
I removed your PHP loop, it seems to click just fine. Please confirm.
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Javascript is the same.

Related

How can I hide my table when I click in the sidebar? and Also when I click the button to show another table the current open table will close?

I have different table in every button, and I hide the table by putting the visibility to hide in the css, when I click the button the table will show. The problem is when I click the button again it won't hide the table anymore. And another thing is when I click the other buttons the table which is currently showing will hide then another table will show.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}
#Patient-Table {
visibility: hidden;
}
<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>

function patienttoggle() {
let patientTable = document.getElementById("Patient-Table");
if(patientTable.style.display == "none") {
patientTable.style.display = "block";
}else{
patientTable.style.display = "none";
}
}
Heres my upadted JS CODE

Td text with ajax call on table not clearing previous data

I have a payment table that contains details of payment and each table row has a view button. My problem is when the modal is open you will see the first table row is blank.
Blank table row:
Second, when I close the modal and open the modal again it will look like this:
Another thing I've seen is when I open another payment details it will look like this. As you can see the three data payments are for the previous opened modal.
The snippet:
var data = {
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
};
var modal = $('#payment-details-modal');
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered" id="tbbody">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees:</th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid:</th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance:</th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
This what I've tried:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
modal.find($('#sales_net_amount')).html('₱ ' + data.sales[0].sales_net_amount);
//modal.find($('#total_paid')).html('₱ ' + total_amount);
modal.find($('#total_balance')).html('₱ ' + data.sales[0].sales_balance);
}
});
}

Your tbody have one tr which you are using for cloning so make that display:none and when you clone that tr remove that display:none .Also, to empty tbody expect the first tr you can use $('#tbbody tbody tr:not(:first-child)').remove();.
Demo Code :
var data = {
"sales": [{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}],
"payments": [{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
};
//when modal show ..
$(document).on("shown.bs.modal", "#payment-details-modal", function() {
var modal = $('#payment-details-modal');
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$('#tbbody tbody tr:not(:first-child)').remove(); //remove all trs except first
//if payements key is there get length or else 0
var length = (data.payments != undefined) ? data.payments.length : 0
console.log("---"+length)
if(length > 0 ){
$.each(data.payments, function(i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.attr('style', '') //after clone remove style(display:none)
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
}else{
//else part
$('#tbbody tbody').append("<tr><td>No Result Found</td></tr>")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#payment-details-modal">Open Modal</button>
<div id="payment-details-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered" id="tbbody">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<!--added display none-->
<tr style="display:none">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees:</th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid:</th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance:</th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Problems creating dynamic attributes inside foreach: knockoutjs

I am having problems displaying data in the accordian, as shown in photo.
No matter what row you click, the same "hidden row" is displayed. And I see why... the following line sets the target of the accordian element.
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
Somehow I need to make "#demo1" unique, and the hidden row as well.
Here is the code: How would I make sure each row gets it's own unique target id, as well as the hidden row?
Thanks!
<table class="table table-striped table-bordered notranslate">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: customers">
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>
<i class="fa fa-plus" style="cursor: pointer"></i>
</td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td> <i class="fa fa-pencil mr-1" data-bind="click: $root.editCustomer"></i> <i class="fa fa-trash mr-1" data-bind="click: $root.deleteCustomer"></i></td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="demo1" >
<table class="" style="background-color: lightyellow; width: 100%;">
<tbody>
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td data-bind="text: address1"></td>
<td data-bind="text: address2"></td>
<td data-bind="text: city"></td>
<td data-bind="text: state"></td>
<td data-bind="text: zip"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

You should make sure the data-target and matching hidden row id are unique for each row. You can use the attr data-binding to dynamically set these attributes and utilize the $index context observable property of the foreach binding to construct unique matching values.
This could result in for example data-bind="attr: { 'data-target': '#demo' + $index() }" for the data-target and data-bind="attr: { id: 'demo' + $index() }" for the matching hidden row id. Have a look at the shortened example below:
ko.applyBindings({
customers: [{}, {}, {}, {}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<table class="table table-striped table-bordered notranslate">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: customers">
<tr data-toggle="collapse" data-bind="attr: { 'data-target': '#demo' + $index() }" class="accordion-toggle">
<td colspan="6">Click to toggle</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" data-bind="attr: { id: 'demo' + $index() }">
<table class="" style="background-color: lightyellow; width: 100%;">
<tbody>
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td colspan="5">...</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Use JS/HTML to shift a portion of a row from one table to another and delete the rest using onclick

I have two tables - addFriends and existingFriends. The addFriends table has a button in the fourth column that, when clicked, should delete the corresponding row from that table and add it to the existingFriends table.
Right now, my code deletes the entire row (correct) and moves it to the other table (correct) but it includes the button and I don't want it to do that. The formatting also gets messed up and I can't figure out why.
Code:
HTML
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td>
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
JS
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
tbl.appendChild(row);
}
</script>
Picture Output: Before Click
Picture Output: After Click
Both of the below answers solved the problem of moving one row to a different table. I am not going to bother fixing the formatting issue as I am now required to convert everything to react and react does not have value or onclick javascript functions.

You can give the table cell with the add button a class so it can be selected with a query selector and removed.
To make the adding button more dynamic, you should pass this as an argument to the function and set row as the parentNode of the parentNode of the button so the function will work for more than one row.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
<tr id="daniel">
<td>Daniel </td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc(elem) {
row = elem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
var add = row.querySelector('.addColumn');
row.removeChild(add);
tbl.appendChild(row);
}
</script>
</body>
</html>

your javascript should look like this ...
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
row.lastElementChild.remove();
tbl.appendChild(row);
}
</script>

How to call jsonp with angular js [duplicate]

This question already has answers here:
How to make a jsonp request
(2 answers)
Closed 7 years ago.
I am trying to get data in my table by using jsonp. I really don't know what I am doing wrong. I think it has something to do with the contents of my url. Or that I am not getting the data correctly. I have tried to do callback= JSON_callback. Still does not work.
This is my url http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=JSON_CALLBACK
with contents:
callback([{"naam":"Hogeschool InHolland","docenten":null,"id":null},{"naam":"Hogeschool Utrecht","docenten":null,"id":null},{"naam":"Universiteit Utrecht","docenten":null,"id":null}])
app.js:
angular.module('OrganisatieApp', [
'OrganisatieApp.controllers',
'OrganisatieApp.services'
]);
services.js:
angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource,$http) {
var organisatieAPIservice = [];
organisatieAPIservice.getOrganisaties = function(){
return $http({
method: 'jsonp',
url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=callback'
});
}
return organisatieAPIservice;
});
my Html div:
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{$index + 1}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].provincie}}</td>
<td>{{organisatie.curriculum}}</td>
</tr>
</tbody>
</table>
<ng-view></ng-view>
</div>
</div>
</div>
<div class="col-md-6">
<div class="page-header">
<h1>Opleidingsprofiel</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Aantal Organisaties<span class="badge">3</span></li>
</ul>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{organisatie.Organisatie.id}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].naam}}</td>
<td>{{organisatie.naam}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
controller.js:
angular.module('OrganisatieApp.controllers', []).
controller('organisatieController',function($scope, organisatieAPIservice) {
$scope.organisatieList = [];
organisatieAPIservice.getOrganisaties().success(function (response) {
//Assign response in Callback
$scope.organisatieList = response.docenten;
});
});

The name of the callback should be "JSON_CALLBACK"
https://docs.angularjs.org/api/ng/service/$http#jsonp

Develop Reference

JavaScript is the programming language of the Web.

Ajax request does not fire on click - javascript

Related

How can I hide my table when I click in the sidebar? and Also when I click the button to show another table the current open table will close?

Td text with ajax call on table not clearing previous data

Problems creating dynamic attributes inside foreach: knockoutjs

Use JS/HTML to shift a portion of a row from one table to another and delete the rest using onclick

How to call jsonp with angular js [duplicate]

Categories

Resources