We Keep Coding

Images Don't Display After Making Layered Webpage

I am using python, html, jinja, java script ect. to build a webapp on a raspberry pi powered device. So far when I put images on my webpages everything works fine. However when I create a "layered" webpage that is using a variable to differentiate between user profile files, it breaks my local image references which wont load and instead display their tag. Using online images for the image source works perfectly fine however.
Not Working Code(Python):
#app.route('/adminPortal/<user_id>', methods=['GET', 'POST'])
def adminPortal(user_id):
print('Admin Portal')
...
Working Code(Python):
#app.route('/adminPortal', methods=['GET', 'POST'])
def adminPortal():
print('Admin Portal')
Unchanged HTML:
<img src="{{ 'static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px> <span style="display:inline-block; width: 50px;"></span>
<img src="{{'static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px> <br>
<img src="https://api.time.com/wp-content/uploads/2021/06/Pills.jpg" alt="Picture of Avatar" height=200px> <br>
<img src="{{'static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">
So far I have not been able to find any success how I reference the photos, and I don't know how to create the same webpage infrastructure in any other manner than the "layered" system I have set up.

The URL static/oldLady.jpg means "relative to the directory with the current page". If you are rendering /adminPortal, then it means /static/oldLady.jpg. If you are rendering /adminPortal/joe, then it means /adminPortal/static/oldLady.jpg.
The solution is to use absolute URLs: /static/oldLady.jpg.

Embeded pdf File is not displaying in Django

I was trying to display photos and pdf files in a django project using <embed> but pdf file is not displaying
Here is what i was doing
This is view function
#login_required
def view_documents(request):
students = Student.objects.filter(user=request.user)
return render(request, 'student/view_documents.html',{'students':students})
and then I used for tag in template
{% for student in students %}
#lines of code
{% endfor %}
and to display the pdf file i have used
<embed src="{{student.adhar_card_pdf.url}}" width="800px" height="400px" type="application/pdf"/>
but it was showing some kind of error like localhost refused to connect
i also used iframe
<iframe src="{{student.adhar_card_pdf.url}}" style="width:718px; height:700px;" frameborder="0"></iframe>
But image is displaying in the browser using same code without any error
<embed src="{{student.photo_jpg.url}}" width="230px" height="250px" />
Why pdf file is not displaying ?? Please help me
Thanx in advance.
Edited: In console it is showing -- Refused to display '' in a frame because it set 'X-Frame-Options' to 'deny'.
This is how it is displaying pdf

X_FRAME_OPTIONS = 'SAMEORIGIN'
Insert the above line in settings.py just before the MIDDLEWARE section
and for the file path in embed tag write path as
{{student.file.get.photo_jpg.url}}
And then give a hard reset in Chrome or any browser you are using.
It worked for me I hope it works for you as well.

Python Selenium can't change Select element value

I have a Select element with two options: Credit / Debit Card and Cash, with the former being the default. I have tried everything conventional and whatever else I can think of but I cannot change this value to Cash. My code as it stands is the following
pay_type_dropdown = driver.find_element_by_xpath(path_ending_in_select)
pay_type_dropdown.click()
# Have tried with and without clicking. Never seemed to make a difference.
pay_type_select = Select(pay_type_dropdown)
pay_type_select.select_by_visible_text('Cash')
But I have also tried select_by_value('CASH') - the option tag's value - and select_by_index(1), as well as
pay_type_dropdown = driver.find_element_by_xpath(path_ending_in_select)
pay_type_dropdown.click()
elems = pay_type_dropdown.find_elements_by_tag_name('option')
elems[1].click()
and
elems = pay_type_dropdown.find_elements_by_xpath(path_ending_in_select + '/option')
elems[1].click()
also to no avail. The drop box opens (if clicked on with the click() function) but no other value is selected. Nothing happens past that and there is no error. It is not in a separate frame as I am able to interact with everything else without having to shift into the correct frame. Any help would be much appreciated, thanks.
EDIT: This is the relevant HTML.
<div class="z-form-row" data-bind="visible: settings.tender.active, 'if': settings.tender.active">
<div class="z-form-field">
<label data-bind="_t: 'cart_options_payment_label'">I'll pay with:</label>
<select data-bind="value: settings.tender.selected, options: settings.tender.types, optionsText: 'label',
optionsValue: 'id', valueAllowUnset: true"><option selected="selected" value="CARD">Credit / Debit Card</option><option value="CASH">Cash</option></select>
</div>
<i class="z-row-icon z-icon-card" data-bind="css: tenderTypeIcon()"></i>
</div>

Programmatically delete everything before a HTML node?

I am trying to create a corpus of data from a set of .html pages I have stored in a directory.
These HTML pages have lots of info I don't need.
This info is all stored before the line
<div class="channel">
How can I programmatically remove all of the text before
<div class="channel">
in every HTML file in a folder?
Bonus question for a 50point bounty :
How do I programmatically remove everything AFTER, for example,
<div class="footer">
?
So if my index.html was previously :
<head>
<title>This is bad HTML</title>
</head>
<body>
<h1> Remove me</h1>
<div class="channel">
<h1> This is the good data, keep me</h1>
<p> Keep this text </p>
</div>
<div class="footer">
<h1> Remove me, I am pointless</h1>
</div>
</body>
After my script runs, I want it to be :
<div class="channel">
<h1> This is the good data, keep me</h1>
<p> Keep this text </p>
</div>

This is a bit heavy on memory usage, but it works. Basically you open up the directory, get all ".html" files, read them into a variable, find the split point, store the before or after in a variable, and then overwrite the file.
There are probably better ways to do this, nonetheless, but it works.
import os
dir = os.listdir(".")
files = []
for file in dir:
if file[-5:] == '.html':
files.insert(0, file)
for fileName in files:
file = open(fileName)
content = file.read()
file.close()
loc = content.find('<div class="channel">')
newContent = content[loc:]
file = open(fileName, 'w')
file.write(newContent)
file.close()
If you wanted to just keep up to a point:
newContent = content[0:loc - 1] # I think the -1 is needed, not sure
Note that the things you're searching should be kept in a variable, and not hardcoded.
Also, this won't work recursively for file/folder structures, but you can find out how to modify it to do that very easily.

to remove everything above and everything below
that means the only thing left should be this section:
<div class="channel">
<h1> This is the good data, keep me</h1>
<p> Keep this text </p>
</div>
rather than thinking to remove the unwanted, it would be easier to just extract the wanted.
you can easily extract channel div using XML parser such as DOM

You've not mentioned a language in the question - the post is tagged with python so this answer might still be out of context, but I'll give a php solution that could likely easily be rewritten in another language.
$html='....'; // your page
$search='<div class="channel">';
$components = explode($search,$html); // [0 => before the string, 1 => after the string]
$result = $search.$components[1];
return $result;
To do the reverse is fairly easy too; simply take the value of $components[0] after altering $search to your <div class="footer"> value.
If you happen to have the $search string cropping up multiple times:
$html='....'; // your page
$search='<div class="channel">';
$components = explode($search,$html); // [0 => before the string, 1 => after the string]
unset($components[0]);
$result = $search.implode($search,$components);
return $result;
Someone who knows python better than I do feel free to rewrite and take the answer!

Refreshing images on a page without refreshing the whole page with Django

I'm making an application that receives images.
I'm making it in a pretty hacky way, where this is the HTML:
<body onload="javascript:setTimeout('location.reload(true);', 1000);" >
<div class="container">
<img class="img0" src="{{ uno }}"/>
<img class="img1" src="{{ dos }}"/>
<img class="img2" src="{{ tres }}"/>
</div>
</body>
And this is in views.py:
def main(request):
x = get_newest_pics()
uno = x[-1]
dos = x[-2]
tres = x[-3]
context = { 'uno' : uno, 'dos' : dos, 'tres' : tres }
return render(request, 'index.html', context)
I'm sure there's a better way to go about this, but I'm very new to Django and I don't know how. At this point, the page is just flickering every second showing the same images, when really I just want it to refresh whenever there is a new image. Is there a way to consistently call get_newest_pics() and refresh just the images, rather than the whole page? Or even just a way to make the page stop flickering?

The way to do this is to implement ajax on your front end, and then request for new images at an interval, once a new image is found, update the container where you are showing your images and add the new (available) image.
Have a look at the django-dajaxice library to help you with the "wiring" of your front end to django correctly.
The way you have written your code, all three images are sent at once to your page, and your javascript snippet is in effect just refreshing the page very quickly, which is why you see the flickering effect.
You could do a "hack" and create a separate view for each image in django, then call each view on an interval using javascript - it would have the same end result but really inefficient in terms of code.