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?
Related
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
I am trying to use some value that I get from clicking a button to be loaded in the if statement in my HTML template. but cannot do so.maybe I am doing everything wrong.
I have used var tag and placed my variable inside it but it didn't work when I tried to edit it through javascript code
{% for publication in page.get_children.specific %}
{% if publication.pub_type == <var id="varpubtype">pubtype</var> %}
{% if publication.pub_year == <var id="varpubyear">pubyear</var> %}
<tr>
<td>{{ publication.Authors }}</td>
<td>{{ publication.name }}</td
<td>{{ publication.pub_year }}</td>
<td>{{ publication.pub_journal }}</td>
<td>{{ publication.vol_issue }}</td>
<td>{{ publication.pages }}</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
here is my script
function toggletable( var pubtypevar)
{
document.getElementById("varpubtype").innerHTML = pubtypevar;
}
function toggleyear( var pubyearvar){
document.getElementById('varpubyear').innerHTML = pubyearvar;
}
when i used var and span tags it showed template error. That
Could not parse the remainder: '
it doesn't seem like that, you have to do the condition on the server not on the client, and the page reload when you click that button,
and then you use condition from server then you implementation on the client
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>
I need to get the previous & next value of the object (col2 from the object) in the same for loop iteration. Below is my index.html code:
<script>
var i = 1;
var j = 0;
</script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ obj.j.col2 }}</span></span> </td>
<td id='myTable'></td>
<td id='myTable'></td>
<td>{{ b.col5 }}</td>
<td>{{ b.col6 }}</td>
<td>{{ b.col7 }}</td>
</tr>
<script>j=j+1;</script>
{% endfor %}
</table>
views.py:
def display(request):
return render_to_response('index.html', {'obj': my_model.objects.order_by('col2')})
What I tried was that when using: {{ obj.0.col2 }} or {{ obj.1.col2 }}, it displays the value of that cell correctly. However, when using {{ obj.j.col2 }}, it does not display anything. Why is this happening?? Why is it not reading j's value?? When I'm initializing j to 0 outside the loop and am incrementing value of j at the end of the loop as well!!
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.