Develop Reference

Django: sidebar with dynamic URLs: how to dynamically create URLs which have dynamic folders in the path

I have a problem with dynamic URLs in sidebar navigation in Django and I hope some of you can help me shed some lights on how to solve it. I have looked for similar questions but I couldn't find an answer for my case.
Basically, what I want to achieve is to have a sidebar with links. This sidebar will be reused on many pages, so it sits in a separate sidebar.py file, which is later imported to the pages.
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Content</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="DYNAMIC LINK HERE">
<span data-feather="home"></span>
Status codes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Depth
</a>
</li>
</ul>
The links I want to display are the following:
urls.py
path('<id>/<crawl_id>/dashboard/', ProjectDashboard, name="crawl_dashboard"),
path('<id>/<crawl_id>/dashboard/status-codes/', StatusCodeDashboard, name="status_code_dashboard"),
path('<id>/<crawl_id>/dashboard/url-depth/', UrlDepthDashboard, name="url_depth_dashboard"),
As you can see, they are dynamic URLs which take an id and crawl_id. So, for each crawl dashboard I want the sidebar to link to its relative status_code_dashboard page and url_depth_dashboard page.
As an example:
/22/123/dashboard --> should have a sidebar with links to:
/22/123/dashboard/status-code/
/22/123/dashboard/url-depth/
What I tried to do is to create a context processor like the following:
def get_dashboard_paths(request):
# Get current path
current_path = request.get_full_path()
depths_dashboard = current_path + 'url-depth/'
return {
'depths_dashboard': depths_dashboard
}
...and then in the sidebar.py template use {{depths_dashboard}}...
This works but it's not scalable: when I am in /22/123/dashboard/status-code/ for example, I still want to have the sidebar to link to the other sections. If I use the above context processor, due to the bad solution wrong links would be created like:
/22/123/dashboard/status-code/status-code/
/22/123/dashboard/status-code/url-depth/
Do you have a hint on how I can display the sidebar on all of the above pages with dynamic URLs based on id and crawl_id? Basically the question is, how can I correctly send those parameters dynamically depending on which id and crawl_id context I am in?
Thanks a lot!

Just pass the id and crawl_id into your template. Then in the template:
Dashboard
Status code
URL depth
If you specifically want to use the preprocessor, you can also get these numbers from get_full_path().split('/').

How do I make an html div element follow vertical scrolling (in html/django)?

I'm extremely inexperienced with html and although I know python, I had never used django before this. I'm trying to set up a simple website where the user can view some code on the left side of the screen and enter some text about it on the right side of the screen. The code can be pretty long sometimes so the webpage scrolls, but I want the textbox to always be present even if you scroll up or down. As my code is now, the textbox is on the right side of the screen, but it always stays at the bottom. Here's a screenshot of what it looks like:
(can't seem to get screenshot to show up in the post, here's the link http://imgur.com/3JfgHH3)
Here's the .html file I'm using in my templates directory in django:
<div style="display: inline-block">
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<pre>{{ source_code }}<pre>
</div>
<div style ="display: inline-block" >
<form method="post" action="/labeling/{{ document_id }}/send/">
{% csrf_token %}
<input type="text" name="textfield">
<input type="submit" value="Finish" name="finish_btn" />
</form>
</div>
Sorry for my complete lack of html knowledge. How would I fix this either in django or in the html file directly so that the textbox and button move up and down with the scrolling, instead of being permanently attached to the bottom right of the screen? If necessary I can post the django code too, I just wasn't sure if this was possible directly in html.

<div style ="display: inline-block;position: fixed;" >
Implement position: fixed; into your styling of the first div. That should already do the trick. Like #furas said is - when it comes to styling - CSS the language you have to learn.

In the CSS file please add the following Code:
div.[class_name_of_div_element] {
position: fixed;
}

Flask + AngularJS - Using url_for()

I am using AngularJS + Flask in my application, and I want to know the best way to "produce" an url, and don't write any hard code url for this. I have this situation:
*considering that I'm using [[ ]] instead of {{ }} for AngularJS.
<dd ng-repeat="item in myList">
<span ng-click="doAction('{{ url_for('my_url', id="[[item.id]]") }}')">
[[item.name]]
</span>
</dd>
This is not going to work, because Jinja2 do the process url_for() before AngularJS, so "[[item.id]]" will not be substituted by AngularJS in time.
The problem is, I don't want to write in hard code like this:
<span ng-click="doAction('/my_url/[[item.id]]')">
[[item.name]]
</span>
I am pretty new in AngularJS, maybe all my approach is wrong, so, does anyone have any idea what is the best way to make an element be clicked, make a request with an URL based on the context of the clicked element?

I just ran across this problem. I ended up using Jinja2's {% set ... %}.
This is how I solved it, adapted for your example.
<dd ng-repeat="item in myList">
{% set url = url_for('my_url', id="[[item.id]]") %}
<span ng-click="doAction('{{ url }}')">
[[item.name]]
</span>
</dd>

In my case,
I was trying to dynamically create urls
I solved my issue as follows (Note: I've swapped out Angular's syntax to {[x]}:
<ul>
<li ng-repeat="x in projects">
{[x.title]}
{% set url = url_for('static',filename="img/") %}
<img src="{{url}}{[x.img]}">
</li>
</ul>

Passing variables in twitter-bootstrap without page reloading

I am new to django, and i am sure there is a better way to pass variables. I have a drop down object from twitter bootstrap and I wish to pass the values back to Python so it can query different data and display it on the page. Basically, I am looking for dynamic charts
This is my attempt, but it causes the page to be reloaded, which is not something I want
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Graphs <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a role="menuitem" href="{% url 'ins_graph' 0 %}">graph 1</a></li>
<li><a role="menuitem" href="{% url 'ins_graph' 1 %}">graph 2</a></li>
<li class="divider"></li>
<li>graph 3</li>
</ul>
</div>
I use Google Chart API to display the data. I also had a problem with drop down menus in plain vanilla django, that question may help clarify, since it has more details here.

It seems like you look for Ajax calls. To change Content on your page without reloading it, You Need to Code javascript.
More Info about it: http://api.jquery.com/jquery.ajax/
jQuery is a bootstrap dependency.
Cheers

pisa to generate a table of content via html convert

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.