I'm having trouble deleting row(s) from an HTML-rendered MySQL table using Node JS and Nunjucks. Basically, I want to be able to delete a row from a table but my delete button does not work. Any ideas on what I should try?
HTML/Nunjucks Code:
<tr> {% for results in awards %}
<td>{{ results.awardtype }}</td>
<td>{{ results.awardeename }}</td>
<td>{{ results.email }}</td>
<td>{{ results.awardtime }}</td>
<td>{{ results.awardate }}</td>
<td>{{ results.comments }}</td>
<form action="/Delete_Award" method="post">
<td align="center">
<input type="submit" value="Delete">
</form>
</tr> {% endfor %}
JS:
app.post('/Delete_Award', function(request, response) {
var connection = request.app.get('pool');
if (request.session.loggedin) {
connection.query('DELETE FROM awards WHERE awardeename = ?', [request.body.awardeename], function(error, results, fields) {
if (error) {
throw error;
} else {
response.render('Delete_Award.html', { msg: 'Successfully deleted!' });
}
});
}
});
https://pasteboard.co/IG55dUp.png
Related
Essentially, I am trying to do the same thing as the writer of this and this
was trying to do.
Which is to dynamically update the values of an html template in a django template via an ajax call.
Both of them managed to fix their issue, however, I am unable to do so after 1.5 days.
index.html
{% extends 'app/base.html' %}
{%load staticfiles %}
{% block body_block %}
<div class="container" >
{% if elements %}
<table id="_appendHere" class="table table-bordered">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>User</th>
<th>Date</th>
</tr>
{% for e in elements %}
<tr>
<td>{{e.A}}</td>
<td>{{e.B}}</td>
<td>{{ e.C }}</td>
<td>{{ e.D }}</td>
<td>{{ e.User }}</td>
<td>{{ e.Date }}</td>
</tr>
{% endfor %}
</table>
{% else %}
No data to display! <br/>
{% endif %}
</div>
{% endblock %}
<script>
var append_increment = 0;
setInterval(function() {
$.ajax({
type: "GET",
url: "{% url 'get_more_tables' %}", // URL to your view that serves new info
data: {'append_increment': append_increment}
})
.done(function(response) {
$('#_appendHere').append(response);
append_increment += 10;
});
}, 1000)
</script>
views.py
def index(request):
elements = ElementFile.objects.all().order_by('-upload_date')
context_dict = {'elements':elements}
response = render(request,'app/index.html',context_dict)
return response
def get_more_tables(request):
increment = int(request.GET.get('append_increment'))
increment_to = increment + 10
elements = ElementFile.objects.all().order_by('-upload_date')[increment:increment_to]
return render(request, 'app/get_more_tables.html', {'elements': elements})
get_more_tables.html
{% for e in elements %}
<tr>
<td>{{e.A}}</td>
<td>{{e.B}}</td>
<td>{{ e.C }}</td>
<td>{{ e.D }}</td>
<td>{{ e.User }}</td>
<td>{{ e.Date }}</td>
</tr>
{% endfor %}
urls.py
urlpatterns = [
path('', views.index, name=''),
path('get_more_tables/', views.get_more_tables, name='get_more_tables'),
]
in the javascript part, I tried:
url: "{% url 'get_more_tables' %}", with and without quotes
If I try to access /get_more_tables/
I get the following error:
TypeError at /get_more_tables/
int() argument must be a string, a bytes-like object or a number, not 'NoneType'
So for some reason, I get nothing, the append_increment is the empty dictionary. But why?
I tried altering the code like, but to no avail:
try:
increment = int(request.GET.get('append_increment'))
except:
increment = 0
Expectation: dynamically loading database
Outcome: error or non-dynamic loading (must refresh manually)
Million thanks to everyone who attempts to help with this.
I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>
So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>
I encountered an error in replacing my row in my JQuery. This is my code snippet for my JQuery:
var newtr = '<td>'+data.row.createdDate+'</td>'+
'<td>'+data.row.emergencyOrderID+'</td>'+
'<td>'+data.row.firstName+' '+data.row.lastName+'</td>'+
'<td>('+data.row.latitude+','+data.row.longitude+')</td>'+
'<td>'+data.row.pickupLocation+'</td>'+
'<td>'+data.row.hospitalName+'</td>'+
'<td>'+data.row.driverName+'</td>'+
'<td>'+data.row.emergencyStatus+'</td>';
//$('#tbIDOrder-'+data.row.emergencyOrderID).html('test');
//alert('#tbIDOrder-'+data.row.emergencyOrderID);
$('#tbIDOrder-'+data.row.emergencyOrderID).parent().replaceWith(newtr);
and this is my row:
<tr id="tbIDOrder-{{$o->EmergencyOrderID}}">
<td>{{ $o->CreatedDate }}</td>
<td>{{ $o->EmergencyOrderID }}</td>
<td>{{ $o->FirstName }} {{ $o->LastName }}</td>
<td>({{ $o->Latitude }}), ({{ $o->Longitude }})</td>
<td>{{ $o->PickupLocation }}</td>
<td>{{ $o->HospitalName}}</td>
<td>{{ $o->DriverName}}</td>
<td>{{ $o->EmergencyStatus }}</td>
</tr>
am i missing something? If it helps, im running this code with Pusher in Laravel :) thanks for your time.
EDIT:
I replaced the script to:
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
but it still didnt work
As $('#tbIDOrder-'+data.row.emergencyOrderID) refers to TR, You can directly use .html(htmlString) to update the content.
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
Here is an example
$('#tbIDOrder-1').html('<td>New Date</td>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tbIDOrder-1">
<td>CreatedDate</td>
</tr>
</table>
Hello Everyone im sorry if my question is being so long this is my first question in Stack over flow :) ; i'm new to angularJs so im facing this problem
i was trying to make a a button that load json data that i retrieve by http.get function to a table with ng-repeat
and i wanted to make the data be loaded after i click a button
Angular:
app.controller('dayRecord', function ($scope, $http) {
var date = dateToString("dailyData")
,http;
$scope.headers = ["company", "ticker", "ccy", "last", "close", "chg", "bid", "ask", "trades", "volume", "turnover"];
//LoadDate : function to load StockRecords for a given day
$scope.loadData = function () {
http = "http://localhost:63342/nasdak/app/data?date=";//the REST service Server to fetch the day stock recrod json data
http += date; //
$http.get(http)
.success(function (response) {
console.log(response);
$scope.first = response.balticMainList;
$scope.columnSort = {sortColumn: 'turnover', reverse: true};
});
}
$scope.loadData();
});
as you see here there is :
dayRecord Controller
loadData function that gets the json data
and here is the html code for the table im trying to load
HTML
<div ng-controller="dayRecord" style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer" ng-controller="dayRecord">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
when i call the function inside the controller everything works fine
app.controller('dayRecord', function ($scope, $http) {
...
$scope.loadData = function () {
...
}
$scope.loadData();
});
but when i click the button to load the data dynamically i cannot load it i even checked the response with console.log(response) it shows that http.get is retrieving the data but it's not refreshing it on the table
Hmm maybe the issue is that you are assigning 2 pieces of html to the same controller. What about wrapping the whole html into 1 div element and put ng-controller there like below:
<div ng-controller="dayRecord">
<div style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Angular might need some help in changing the DOM. Try to add $scope.$apply() to the end of your load data function and see what happens on the console.
HTML
<form method="post">
{% csrf_token %}
<tr id = "{{ x.id }}">
<td>{{ x.name }}</td>
<td>{{ x.sth }}</td>
<td>{{ x.sth_else }}</td>
<td><button type="submit" name="edit_btn">edit</button></td>
</tr>
</form>
jQuery
$('form').on('submit', function(event){
event.preventDefault();
console.log("Executing script for edit button pressing")
x = $(this).children().first().attr('id');
console.log(x)
});
I'm trying to extract the id from the tr in the html, but whenever i get on the page and see the console output i get: undefined. Any ideas?