Django how can I pass data to hyperlink? - html

MY TEMPLATE
<div class="row">
<div class="col-lg-9">
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Publication date</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for questionnaire in questionnaires %}
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="questionnaires" id="questionnaires" value="{{ questionnaire.id }}">
<label><b><a href="" >{{ questionnaire.name }}</a></b></label>
</div>
</td>
<td>{{ questionnaire.pub_date }}</td>
<td>Delete</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-lg-3">
<div class="sidebar-nav-fixed pull-right">
<div class="well">
<ul class="nav ">
<li>
Add new
</li>
<li>
Export to PDF
</li>
<li>
Check results
</li>
<li>
Draw charts
</li>
<li>
Generate tokens
</li>
<li>
Clear results
</li>
<li>
Delete selected
</li>
</ul>
</div>
</div>
</div>
I need to get all checked objects from checkboxes placed in table, and pass them to hyperlinks in navbar.
For example, I have hyperlink "Delete selected". I want to delete every questionnaire which is selected by clicking on that link. Is it possible? If yes how can I do that?

In order to achieve, 'I have hyperlink "Delete selected". I want to delete every questionnaire which is selected by clicking on that link.', it's going to require a mix of jQuery and Django.
You should attach a click listener on the 'Delete selected' button which should serialize all selected questionnaires and send that data via AJAX to a Django view which will delete the necessary questionnaire objects from the database.
Here is a rough example...
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').click(function() {
$.post('url/to/django/view', $('input[name=questionnaires]').serialize(), function(data, textStatus, jqXHR) {
// DO STUFF VIA THIS CALLBACK
});
});
});
</script>
def url/to/django/view(self, request):
if request.method == 'POST':
questionnaires_to_delete = request.POST.getlist('questionnaires')
Questionnaire.objects.filter(id__in=questionnaires_to_delete).delete()
return HttpResponse('WHATEVER YOU WANT TO RETURN TO THE CLIENT')
You many run into CSRF issues depending on your setup. Here is the documentation for handling that...
https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/

Related

How to create and add html elements dynamically with angular

I am trying to build a shopping web app as a project for my master degree.
So my problem is that when I click the button to add a category(calling the function addCategory in my .ts file) I don't know how to create a div and add it to the html file with the id of the category's name, from the .ts file.
Any help it's welcomed.
<div class="container">
<div class="row">
<div class="col-6">
<h1>Products</h1>
<button (click)="addCategory()">Add category</button>
<div id="Products">
</div>
</div>
<div class="col-6">
<h1>Shopping basket</h1>
<div id="Shoppingbasket">
<table id="Productstable" class="table table-bordered">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Units</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="Productstablebody">
</tbody>
</table>
</div>
</div>
</div>
</div>
I'd suggest looking at the Tour of Heroes tutorial on the Angular web site to learn more.
You can create a list in your component, call it categories, then add more categories when you click the addCategory button. In your html template, you can loop through the categories and create an element for each of them.
I created a minimal example in a Stackblitz. Below is a rough example of how it can be done
Angular component
categories: string[] = [];
addCategory() {
this.categories.push('category');
}
HTML template
<div *ngFor="let category of categories">
{{category}}
</div>
make an array of category;
when you click add category add to the array then loop it in html like these
<div *ngFor="let category of categories" [id]="category.name">
</div>

How to align text input elements within the boundaries of a table?

Working with some Jinja code in my Flask app, I have a
<table class="table table-hover">
<thead>
<th scope="col" class="text-primary">Name</th>
<th scope="col" class="text-primary">Description</th>
</thead>
<tbody class="text-secondary">
{% for item in char.inventory %}
<tr id="{{item.itemid}}_row">
<div>
<td id="{{item.itemid}}_name">{{item.name}}</td>
</div>
<div>
<td id="{{item.itemid}}_description">{{item.description}}</td>
</div>
<td class="text-right"><button id="{{item.itemid}}" class="btn btn-outline-info" onclick="itemeditor(this)">edit</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
A loop that generates a table that's formatted with some bootstrap. The button when clicked on, leads to some JQuery code that transforms the item and description table entries into text inputs, containing the values of the table entries.
function itemeditor(elem) {
self = $(elem);
itemid = self.attr("id");
itemnamenode = $("#" + itemid + "_name")
itemdescriptionnode = $("#" + itemid + "_description")
itemnamefield = $('<input type="text" style="display : inline;" size="50" class="form-control" />')
itemnamefield.val(itemnamenode.text())
itemdescfield = $(('<input type="text" style="display : inline;" size="50" class="form-control" />'))
itemdescfield.val(itemdescriptionnode.text())
itemnamenode.replaceWith(itemnamefield)
itemdescriptionnode.replaceWith(itemdescfield)
}
The issue is that when the JQuery updates the table entries with their text inputs, the text inputs default to talking up the full width of the table and going under each other rather than spawning next to each other, in the original location of the table entries.
Before the button gets clicked
After the button is clicked
How can I set up the Bootstrap/ CSS such that the text inputs line up with the table?
Thank you very much for all and any help
Your table is not correct.
You can't put div as a closest child of tr.
Let try with this
<tbody class="text-secondary">
{% for item in char.inventory %}
<tr id="{{item.itemid}}_row">
<td>
<div id="{{item.itemid}}_name">{{item.name}}</div>
</td>
<td>
<div id="{{item.itemid}}_description">{{item.description}}</div>
</td>
<td class="text-right"><button id="{{item.itemid}}" class="btn btn-outline-info"
onclick="itemeditor(this)">edit</button>
</td>
</tr>
{% endfor %}
</tbody>
I'm thinking another way.
You don't need to replace the element.
Try to use input only, disabled as default, and only enable it when in editing mode, and also rememeber to style disabled input as a text.

Thymeleaf: From controller to html

I have a table of values with an href.
<tr th:each="note : ${test}">
<td th:text="${note.name}">></td>
<td th:text="${note.lastName}"></td>
<td th:text="${note.studentId}"></td>
<td>
<a th:href="#{'/seeStudent/' + ${note.studentId}}">Ver</a>
</td>
</tr>
This is my controller:
#GetMapping("/seeStudent/{id}")
public String getStudentById(#PathVariable Long id, Model model) {
model.addAttribute("student", repo.findById(id));
return "seeStudent";
}
This is my HTML:
<div>
<h1>Student information</h1>
<ul>
<div th:object="${student}">
<li>
<h4>
<span th:text="${name}"></span>
</h4>
<h4>
<span th:text="${lastName}"></span>
</h4>
</li>
</div>
</ul>
</div>
For some reason the display is comming up blank, it is as if it wasn't finding the student by Id. When I debug it does locate the student and return it. I believe I may be doing something wrong when trying to pull the object data and display it in my html. Any ideas?
If you're using th:object, your expression should be (with an asterisk) *{name} and *{lastName}. If you want to use the equivalent (dollar sign) ${...} expression, it would be ${student.name} and ${student.lastName}.

applying pagination to a table in angular js where map is what i'm iterating through in ng-repeat

i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.
<table>
<thead></thead>
<tbody>
<tr>
<td><marquee>
<h3>
A tag is a keyword or label that categorizes your question with
other, similar questions. Using the right tags makes it easier
for others to find and answer your question.
</h4>
</marquee>
<hr></td>
</tr>
<tr ng-repeat="(key,value) in tagForm.data track by $index">
<td align="left">
<div ng-init='tagForm.getTag(key)'
class=" w3-container w3-card w3-white w3-margin w3-round "
style="padding-left: 40px; padding-right: 40px;">
<br>
<p ng-repeat="data2 in tagForm.message track by $index">
<a ng-click="tagForm.getAnswer(key)">Q. {{value}}</a> <span
class="badge">{{data2}}</span> <br>
</p>
<ul ng-repeat="(key2,value2) in tagForm.ans track by $index">
<li><b ng-if="key==key2">Ans. {{value2}}</b></li>
</ul>
<div ng-init='tagForm.getUser(key)'>
<b>Posted
by:{{tagForm.user2[$index]}}</b>
</div>
<button class="btn btn-default" id="{{$index}}"
ng-click="count1=count1+1" ng-init="count1=5+($index*3)-5">
Upvote <span class="badge">{{count1}}</span>
</button>
<button class="btn btn-default" id="{{$index}}"
ng-click="count=count+1" ng-init="count=1+($index*2)">
Downvote<span class="badge">{{count}}</span>
</button>
<button class="btn btn-default" ng-click="gotoanswer()">Answer
this question</button>
<br> <br />
</div> <br>
</td>
<td height=100px><br /></td>
</tr>
</tbody>
</table>
use the following pagination in your html file
<uib-pagination ng-show="isPaginate == false "
total-items="totalItems" ng-model="currentPage"
boundary-links="true" items-per-page="numPerPage"
class="pagination-sm" ng-change="pageChanged()" max-size="5">
</uib-pagination>
and then initialize the variable as per requirement in angular controller
$scope.totalItems = 80;//length of records
$scope.currentPage = 1;
$scope.numPerPage = 10;
var startpos = 0;
for dynamically loading records (loading records batch wise instead of loading all at time) refer following function
$scope.pageChanged = function() {
// if($scope.currentPage!=1)
$scope.isCollapsed = false;
$scope.isRCollapsed = false;
$scope.page = ($scope.currentPage - 1) * $scope.numPerPage;
callApi($scope.page);//get next set of 10 records
console.log('Page changed to: ' + $scope.currentPage);
};

Suppress display of Table fields in HTML / ASP.NET

I inherited a web app built in ASP.NET which returns a table of query results which pull from a database. Right now, all fields display as text, with the exception of the "Url" column which is a hyperlink (as seen in below code). What code would I add if I wanted to also suppress the display of one of the columns returned (or just not return it at all if that makes more sense)?
EDIT - additional information: the table columns are not pre-defined anywhere in the source code. The app has the ability for you to define a database and table from which to pull the results of your query - therefore the resulting table is dynamic. This is why it seems it has to be done in the HTML code of the page itself.
Below is the HTML code for the table:
<div class="row" ng-if="loading || results != null">
<div class="col-lg-2" ng-show="facets">
<div class="widget">
<div class="widget-title">
<i class="fa fa-check-square-o"></i> Facets
</div>
<div class="widget-body xlarge no-padding">
<pre>{{ facets | json }}</pre>
</div>
</div>
</div>
<div ng-class="{ 'col-lg-10': facets != null, 'col-lg-12': facets == null }">
<div class="widget">
<div class="widget-title">
<i class="fa fa-bars"></i> Results <span>({{ count }} results)</span>
</div>
<div class="widget-body xlarge no-padding">
<div class="message" ng-if="!loading && (results == null || results.length == 0)">
<div class="alert alert-warning">The query did not return any results.</div>
</div>
<div class="table-responsive" ng-if="!loading && results != null && results.length > 0">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="field in fields">
{{field}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in results">
<td ng-repeat="field in fields">
<div ng-if="field == 'Url'">
{{ result.DirectSourceUrl }}
</div>
<div ng-if="field !== 'Url'">
{{ result[field] }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I am not a .NET expert but i do know angular so if i get your question right, just ignore the field you wanna delete and don't bind it in the html or you could do something like this in angular controller right after the results are returned response.data.fieldName=undefined; (fieldName is the name off the column you wanna delete.
Hope it helped you.