Apologies if this question has already been asked. I'm new to HTML and I'm not familiar with the words I should use to find help with.
I'm using Flask and HTML to make a website.
My code:
<!DOCTYPE html>
<html>
<body>
<h3>Click the result you want to investigate</h3>
{% for r in results %}
<p id=r["links"] onclick="myFunction(id)"> {{r["title"]}} ({{r["address_snippet"]}}) </p>
{% endfor %}
<script>
function myFunction(id) {
document.getElementById(id).innerHTML = "CLICKED HERE";
}
</script>
</body>
</html>
I'm trying to print out a list of names, and etc to the screen. The user will click one name, this name will then be returned to a Python function for further analysis.
As a first attempt, I just want to change the text from the name to "CLICKED HERE". However, regardless of which name I click, only the first entry changes.
I can't figure out how to set the id from the container. Any help would be appreciated!
You need to update your code like this, so you get the actual value from the variable r["links"], by adding the brackets {{r["links"]}}
<p id="{{r["links"]}}" onclick="myFunction('{{r["links"]}}')"
Related
I am new working with HTML and Python, and I am trying to develop some code for personal use.
The goal is to show the different leagues with a color code: red or green, and if I click on a league, it opens a different tab with more detailes information of that league, that is to say, it would be necessary to send the id of the league to the server to be able to use it for the next tab. I am trying to use a form, but it is not working.
The if-else condition is just to choose whether the color is red or green based on a league condition.
The problem I am having is that, creating the form with the for loop as I am doing, the league id that sends is always the same (1st league of the lopp), it is not dynamic, then I would like to know how to program it to be able to see the chosen league.
No matter on what league you click, you always access the same league information. I guess there is something wrong with the code because it is not dynamic, it does not display info based on my selection.
My idea was to have multiple forms created with the loop, one for each league, but it doesnt work.
I would really appreciate your help, thank you very much!
This is the HTML code:
competicionesAPIDict is a dict where the key is the country and the values the different leagues that exists in it.
competicionesAPI is the value obtained from the dict, that is iterated to get the info from each league.
<div style="width: 80%; height: 70%; background-color: azure; width: max-content">
{% for paisAPI, competicionesAPI in competicionesAPIDict.items() %}
<div class="div_pais">
<h4>{{paisAPI}} </h4>
<img src={{dict_banderas_pais[paisAPI]}} alt="No funciona" width="30px" height="30px"/>
{% for competicionAPI in competicionesAPI %}
{% if dict_hay_competicion[competicionAPI['id']] %}
<form name="siCompeticion"+{{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
<input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
<a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: green;"
onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
</form>
{% else %}
<form name="noCompeticion"+{{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
<input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
<a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: red;"
onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
</form>
{% endif %}
{% endfor %}
</div>
{% endfor %}
OK, I was wrong in a comment about hidden input field value being a problem.
I mean, it is still a problem, but it should work as is, except for JS code bug you made.
So first, what gave me wrong impression was that you would usually make one form per request, and then do as I said, set the forms values correctly to provide data of the request upon submit. You made a lot of forms, one per iteration, which is not wrong, but what you did is say in onclick event to activate always the first form on the site. I.e.
document.forms[0]
so, whatever you click, only first form will be submitted with the value of the first hidden input field in it.
As you have if-else clauses, I wouldn't rely on form indexes within the DOM, but use something to create unique IDs per each form, then use document.getElementById() to get that exact form and submit it. But you already gave your forms names, so you can use those with document.getElementsByName() or give the form an ID of same value.
Names does not need to be unique, IDs should.
Just a little sample:
<form id="siCompeticion"+{{competicionAPI['id']}} ...>
<input type="hidden" name="something" value={{competicionAPI['id']}}>
CLICK ME
</form>
In your place I would most probably write a little JS code to perform AJAX request, most likely using jquery. In any case, I would avoid making a lot of forms.
I am trying to rename my hyperlink to place in a pdf file. Thus, I do not want to give to the user a massive long link.
Let's say my link is like:
https://www.google.com/search?q=images+of+dogs&rlz=1C1OKWM_esES969ES969&sxsrf=AOaemvJFDb3FKdXO1Yqb3A1BdjWNfw0Edg:1632237403618&tbm=isch&source=iu&ictx=1&fir=D5X9VdSPli-xYM%252CHUMB4Zy1hHwFaM%252C_&vet=1&usg=AI4_-kShuarwW69ikZrP2YUHRVOpRHKKfQ&sa=X&ved=2ahUKEwiPs4aVrpDzAhUR1RoKHQiNAZIQ9QF6BAgPEAE&biw=2133&bih=1013&dpr=0.9#imgrc=D5X9VdSPli-xYM
And I want it to appear in the pdf like:
"Link to picture"
My code:
texto_body=f"Hi,<br> <br> This is a test with a link {link} <br> <br> Thanks,"
body=f"""\
<html>
<body>
<p style="color:black;"> {texto_body}</p>
<img src="cid:image1" alt="Logo" style="width:90px;height:90px;"><br>
</body>
</html>
"""
Solved. I found that text of the link
is the way to set up hyperlinks with a given name
I'm working at my first project in Django and learning it by the way. Currently I'm stuck at the part of the project where I have to show additional data if checkbox is selected as true.
Long story short, there have to be checkbox at my page which name is "Cars", if user check the checkbox as True, select list of models of cars should be displayed immediately, below this checkbox, without affecting other input sources on current page.
Is there easy way how to accomplis this? Thanks for help.
/edit
HTML code
<p class="dhcp"> DHCP: {{ form.dhcp }} </p>
<p class="collapse1 collapse"> IPv4 adresy: {{form.ipv4_adress }} </p>
<p class="dhcpv6"> DHCPv6: {{ form.dhcpv6 }} </p>
<p class="collapse2 collapse"> IPv6 adresy: {{form.ipv6_adress }} </p>
JS code
$(document).ready(function() {
$(".dhcp").click(function(event) {
$(".collapse1").fadeToggle().delay(100);
});
$(".dhcpv6").click(function(event) {
$(".collapse2").fadeToggle().delay(100);
});
})
It's just part of it, its quite "big" by now and not telling anything because of being generated by django form. Main issue right now is that if I click on same row as is checkbox, it trigger action of displaying data.
take a look at this JS Fiddle . Its a simple JS solution with a fadeToggle for your problem. The Delay of 100 is optional but it makes the hole thing more elegant although this stays in conflict with your "should be displayed immediately" ;)
<input class="collapsed" type="checkbox">Cars
<div class="collapse2 collapse" style="display:none;">
<li>car hello</li>
<li>car lala</li>
<li>car 1</li>
</div>
$(".collapsed").click(function(event){
$(".collapse2").fadeToggle().delay(100);
})
If there are multiple checkboxes like this you maybe would have to use the this keyword in JS.
That should do the Trick if not leave a comment.
below is the index.html file inside my workspace/projectname/templates/appname
<!DOCTYPE html>
<html>
<head>
<title>my news</title>
</head>
<body>
<h1>look below for news</h1>
{%if categories%}
<ul>
{%for category in categories%}
<li>{{category.name}}</li>
{%endfor%}
</ul>
{%endif%}
{%if headings%}
<p>
{%for heading in headings%}
{{heading.title}}
<br>
{{heading.content}}
{%endfor%}
</p>
{%endif%}
</body>
</html>
the problem is <ul> and <li> tags are working and displaying the list as it should do.the <a> tag is also displaying a hyperlink,but the <p> tag and <br> tags are not being rendered and are being displayed as a text,cant think what might be the problem.i am fairly new to django.
Try using {{heading.content|safe}} or turn autoescape off (See docs).
Although, the other answer accurately solves your problem, but that approach is not safe everytime.
If you know that only trustworthy people are going to write that article/post, then you can simply turn Django's autoescaping off (as pointed in the other answer).
But if you want to display HTML from an untrustworthy source, you are prone to XSS attacks. In that case you should use applications like django-bleach. It will escape specific HTML tags like <script> and any other tags that you want to escape.
Does anyone have any idea how to use the tag so the table of content comes onto the 1st page and all text is coming behind. This is what i've got so far, it generates the table of content behind my text...
pdf.html
<htmL>
<body>
<div>
<pdf:toc />
</div>
<pdf:nextpage>
<br/>
<h1> test </h1>
<h2> second </h2>
some text
<h1> test_two </h1>
<h2> second </h2>
some text
</body>
</html>
I can't seem to get everything in the right position, even with the it doesn't seem to work... any help or documentation somewhere? The PISA docs are rly crappy with details actually...
Btw 1 more extra thing, is it possible to make this table of content jump to the right page? If yes how does this works?
Regards,
I found I couldn't get that pagebreak to work for me, so I used inline CSS and, specifically, the page-break property to fix it.
In your case, this should do the trick:
<div style="page-break-after:always;>
<pdf:toc />
</div>
<h1> test </h1> ...etc...
As far as the links are concerned, there may be a way to automatically generate them, but I found it easier to manually create a table of contents using links and anchors:
<h1>Table of Contents</h1>
<ul>
<li><a href="section1">The name of section 1</li>
<li><a href="section2">The name of section 2</li>
</ul>
<h2>The name of section 1</h2>
<a name="section1"></a>
<h2>The name of section 2</h2>
<a name="section2"></a>
There's obviously some duplication, but I haven't found it difficult to maintain for my documents. It depends how long or complicated you expect yours to became.
The bigger downside is that this option won't include page numbers.
Steve's comment about the page-break property is correct. I personally used a separate CSS file with
h2 {
page-break-before:always;
}
so that all of my sections would start on a new page.