HTML and Django - html

urls.py contains the line:
url(r'^topics/$', views.topics, name='topics'),
views.py contains the code:
def topics(request):
context = locals()
return render(request, 'topics.html', context)
The following bootstrap code is used to open "topics.html"
<p><a class="btn btn-warning" href="/topics/" role="button">More ยป</a></p>
The above code renders "topics.html" correctly which is a table.
Now, I want the cursor to go to a specific row( Ex: first row) in the table.

It's not clear for me what cursor you mean, but may be you can assign a unique id to each row like
<tr id="row-1"><tr id="row-2"><tr id="row-3"><tr id="row-4">
then you can jump to that id using
<a class="btn btn-warning" href="/topics/#row-1" role="button"></a>
<a class="btn btn-warning" href="/topics/#row-2" role="button"></a>
...
it may look a little bit basic, but with the few clues you set i think it could be a start...

Related

Sending a parameter to the render function of pdf

I'm trying in Django to render from html to pdf a monthly report that takes data from a database by month.
I need to send the selected month on the html page to the class that creates the Pdf. How can I do that?
My view class :
class view_pdf_monthly_report(View):
def get(self, request, *args, **kwargs):
push = {'month':month}
pdf = render_to_pdf('home/pdf_monthly_inquiries_report.html', push)
return HttpResponse(pdf, content_type='application/pdf')
My html: how can I send the month from here?
<div class="text-center">
<a class="btn btn-info" href="{% url 'view_pdf_monthly_report'%}" target="_blank">View PDF</a>
</div>
Thanks !
first create a simple form which will send month data to your view
<div class="text-center">
<form action="{% url 'view_pdf_monthly_report'%}" method="get">
<input type="hidden" value="{{month}}" name="month">
<button class="btn btn-info" type="sumbit">View PDF</button>
</form>
</div>
and then inside your views
class view_pdf_monthly_report(View):
def get(self, request, *args, **kwargs):
month = request.GET.get('month')
push = {'month':month}
pdf = render_to_pdf('home/pdf_monthly_inquiries_report.html', push)
return HttpResponse(pdf, content_type='application/pdf')

How to can I append variable values to a dynamically created html elements in jquery

I am dynamically creating a html link and I want to set a onclick event with a parameter. Parameters is variable.
return '<a role="button" href="#" class="btn btn-default btn-sm delete-btn ml-2" onclick="deleteMeeting('+data[1]+')" >Delete</a>'
I am getting an error,
Uncaught SyntaxError: missing ) after argument list.
Currently it render like this,
<a role="button" href="#" class="btn btn-default btn-sm delete-btn ml-2" onclick="deleteMeeting(Junior Technical Author)">Delete</a>
The problem is you are outputing a string directly into a function call without using '. You need to add escaped ' and place your data[1] inside them.
return '<a role="button" href="#" class="btn btn-default btn-sm delete-btn ml-2" onclick="deleteMeeting(\''+data[1]+'\')" >Delete</a>'
This way, you will paste your data[1] inside a string.

Insert the ID of the same Component into Input

I need to pass the id of the element inside the typescript with [theID] of the :
<ng-template #popTitle let-language="language">Error</ng-template>
<ng-template #popContent let-greeting="greeting">{{texto}}!</ng-template>
<a
type="button" class="btn btn-outline-secondary ml-5" placement="top"
[ngbPopover]="popContent" [popoverTitle]="popTitle"
triggers="manual" [theID]="#p1" #p1="ngbPopover" (click)="toggleWithGreeting(p1, 'Bonjour')">
</a>
To be able to access from the parent the parameter that will remain inside
In short, the question is how can I use [var] = "# id"
The practical use that I am going to give it is in the toggleWithGreeting function where when invoking it from another place I have to pass the id of the element, for this I plan to put it inside in an input and call it from the father
I used an ViewChild()
#ViewChild("id") p1:PopoverComponent;
I've given it too many laps and I haven't fallen for the obvious

With collapse only reveal next/one element

I have the following templates in Flask (but I don't think that's a flask problem:
Contact.html
<button type="button" class="btn btn-secondary btn-sm" data-target="#score" data-toggle="collapse" data-placement="right">Score</button>
<div id="score" class="collapse">
<span class='dot green'></span> 1
</div>
Compare.html
<!-- I only added the key elements there are some other "formatting" parts.-->
{% include "contact.html" %}
{% include "contact.html" %}
As you see in Contact.html I use a collpase. Ref: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
My problem is that I compare two contacts and therefore they both have that div with id score.
If I now click on the first Button to reveal the score of the first contact then obviously both scores are revealed. But I only want to reveal the score of the contact I clicked.
My idea is instead of data-target="#score" to say something like: Take the next #score element but I don't know how I can do that.
I figure it out how to it. Basically it's easy in my case.
Because each contact has an unique id, I can use this to build the id like this:
<!-- Generate ID -->
{% set score_id = "score" + contact.idx|string %}
<!-- Use the ID in the collapse-->
<button type="button" class="btn btn-secondary btn-sm" data-target="#{{score_id}}" data-toggle="collapse" data-placement="right">Score</button>
<div id="{{score_id}}" class="collapse">
<span class='dot {{color}}'></span> {{ contact_score }}
</div>
Then only one will expanded if clicked on the Button. Therefore thanks #Anees Ijaz for the comment. The comment pushed me in the right direction.

HTML inserts space between the first occurrence of quotes

This drives me crazy. I want to pass a string literal as a parameter to a function in HTML onclick property containing a double quote.
My HTML element looks like this:
<button onclick = "ok_button_click(""Harry Potter "")" type="button" class="btn btn-default">ok</button>
But when I load the page and open it by Inspect Element, I see a space inserted between the first quote resulting in this:
<button onclick = "ok_button_click(" "Harry Potter"")" type="button" class="btn btn-default">bad</button>
Why does the browser insert a space ???
If you are trying to pass a string value with quotes then you have to use " like this:
<button onclick = "ok_button_click('"Harry Potter"')" type="button" class="btn btn-default">bad</button>
If you just want to pass in a string literal you can just use a single quote (or the opposite of what the attribute started with) like this:
<button onclick = "ok_button_click('Harry Potter')" type="button" class="btn btn-default">bad</button>
That is because when the DOM is being parsed the browser uses " as delimiters, so in your case it is assigning ok_button_click( to the attribute onclick and Harry Potter as a separate (and unknown) attribute.
A better way of writing this code would be mixing single and double quotes as in:
<button onclick="ok_button_click('Harry Potter')" type="button" class="btn btn-default">ok</button>
A good start on HTML debugging is to run it through a validator, like in https://validator.w3.org/#validate_by_input
Try :
<button onclick = 'ok_button_click("Harry Potter")' type="button" class="btn btn-default">ok</button>