Develop Reference

Having trouble with a hierarchical Wordpress sidebar menu. The script always appends the slug so you can't navigate back up the hierarchy

The menu uses a toggle to drop down child pages. It's then possible to navigate to a child page, but getting back to the parent page, or a different parent page is impossible, since each time, the slug is appended to the URL.
For example:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/
Within the Women and Epilepsy segment I can reach child pages like:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/
But I can't then go back to a different section like 'Living With Epilepsy' because this happens, resulting in a 404:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/living-with-epilepsy
Can anyone help? Thanks so much for taking the time to read this!
<aside class="sub-menu col mx-auto">
<ul class="nav flex-column mx-2 menu">
{% set siblings = post_query({
'post_type': 'page',
'post_parent': ancestor,
'orderby': 'menu_order',
'order': 'ASC'
}) %}
<a class="nav-side-title {% if fn('is_page', ancestor.slug) %}active{% endif %}" href="{{ ancestor.link }}">
<h4>{{ ancestor_name }}</h4></a>
{% for sibling in siblings %}
{% if sibling.children %}
<div class="top mx-2 d-flex align-items-baseline">
<li class="nav-item top-parent has-child collapsed" href="#{{ sibling.slug }}" data-toggle="collapse" aria-controls="{{ sibling.title }}"></li>
<a class="nav-link {% if fn('is_page', sibling.slug) %}active{% endif %}" href="{{ sibling.slug }}">{{ sibling.title }}</a>
</div>
<ul id="{{ sibling.slug }}" class="collapse child-menu" aria-labelledby="{{ sibling.title }}">
{% for subpage in sibling.children %}
{% if subpage.post_type == "page" %}
{% if subpage.children %}
<div class="mx-3 d-flex align-items-baseline">
<li class="nav-item middle-parent has-child collapsed" href="#{{ subpage.slug }}" data-toggle="collapse" aria-controls="{{ subpage.title }}"></li>
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</div>
<ul id="{{ subpage.slug }}" class="grandchild-menu collapse" aria-labelledby="{{ subpage.title }}">
{% for subpage_2 in subpage.children %}
{% if subpage_2.post_type == "page" %}
<li class="nav-item bottom">
<a class="nav-link subpage{% if fn('is_page', subpage_2.slug) %} active{% endif %}" href="{{ subpage_2.link }}"> {{ subpage_2.title }}</a>
</li>
{% endif %}
{% endfor %}<!--subpage_2-->
</ul>
{% else %}<!--subpage.children-->
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %} <!--subpage.children-->
{% else %}
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %}<!--subpage.children page-->
{% endfor %} <!--subpage-->
</ul>
{% else %} <!--sibling.children-->
<li class="nav-item top">
<a class="nav-link {% if fn('is_page', sibling.slug) %} active{% endif %}" href="{{ sibling.link }}">{{ sibling.title }}</a>
</li>
{% endif %}<!--sibling.children-->
{% endfor %} <!--sibling-->
</ul>
</aside>

How to use pagination with modal view in django

I am diplaying a ListView with pagination in a modal view in django but when I click the link to the next page it closes the modal. I want to display the next result page inside that modal. Or close that modal and open a new one inside a new modal view
How can I use pagination (show the next result page) inside that modal
This is the modal
<div class="modal-dialog modal-dialog-centered modal-lg" >
<div class="modal-content">
<div class="wrapper wrapper-content {% block entry %} animated fadeInRight {% endblock entry %}">
<div class="row">
<div class="col-lg-12">
<h3>Trabajadores: {{ list_title }}</h3>
<div class="col-12">
<div class="">
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="mydatatable">
<thead>
<tr>
<th class="text-navy" >Nombre</th>
<th class="text-navy">Primer apellido</th>
<th class="text-navy">Cédula</th>
<th class="text-navy">Email</th>
</tr>
</thead>
<tbody>
{% for worker in workers %}
<tr class="clickable" onclick="window.location='{% url 'riesgo:worker_detail' worker.id %}'">
<td>
{{ worker.name }}
</td>
<td >
{{ worker.last_name1 }}
</td>
<td >
{{ worker.identification }}
</td>
<td >
{{ worker.email }}
</td>
</tr>
</tbody>
{% empty %}
<span style="color: red">{{ list_message }}</span>
{% endfor %}
</table>
</div>
<div class="pull-right">
<nav>
<ul class="pagination">
{% if 'name' in request.get_full_path %}
{% if has_previous_pages %}
<li class="page-item">
<a class="page-link" href="{{ request.get_full_path }}&page={{ 1 }}" aria-label="1...">
<span aria-hidden="true">Página 1</span>
<span class="sr-only">1...</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="{{ request.get_full_path }}&page={{ previous_page }}" aria-label="Anterior">
<span aria-hidden="true">«</span>
<span class="sr-only">Anterior</span>
</a>
</li>
{% endif %}
{% for pr in paginator_rows %}
{% if pr == actual_page %}
<li class="page-item active"><a class="page-link" href="{{ request.get_full_path }}&page={{ pr }}">{{ pr }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="{{ request.get_full_path }}&page={{ pr }}">{{ pr }}</a></li>
{% endif %}
{% endfor %}
{% if has_more_pages %}
<li class="page-item">
<a class="page-link" href="{{ request.get_full_path }}&page={{ next_page }}" aria-label="Siguiente">
<span aria-hidden="true">»</span>
<span class="sr-only">Siguiente</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="{{ request.get_full_path }}&page={{ total_pages }}" aria-label="1...">
<span aria-hidden="true">Página {{ total_pages }}</span>
<span class="sr-only">{{ total_pages }}...</span>
</a>
</li>
{% endif %}
{% else %}
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ 1 }}" aria-label="1...">
<span aria-hidden="true">Página 1</span>
<span class="sr-only">1...</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Anterior">
<span aria-hidden="true">«</span>
<span class="sr-only">Anterior</span>
</a>
</li>
{% endif %}
{% for pr in paginator_rows %}
{% if pr == page_obj.number %}
<li class="page-item active"><a class="page-link" href="?page={{ pr }}">{{ pr }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ pr }}">{{ pr }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Siguiente">
<span aria-hidden="true">»</span>
<span class="sr-only">Siguiente</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="1...">
<span aria-hidden="true">Página {{ page_obj.paginator.num_pages }}</span>
<span class="sr-only">{{ page_obj.paginator.num_pages }}...</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</nav>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="return close_modal()">Cerrar</button>
<i class="fa fa-plus"></i> Crear
</div>
</div>
</div>
</div>
</div>
</div>
This is the listview:
class WorkerModalListView(LoginRequiredMixin, ListView):
model = WorkerModel
group_required = [u'Auxiliar Legal', 'Jefe de la Oficina Local', 'Jefe de la RBRP']
template_name = 'riesgo/worker/worker_list_modal.html'
context_object_name = 'workers'
paginate_by = 10
def get_context_data(self, *args, **kwargs):
context = super(WorkerModalListView, self).get_context_data(*args, **kwargs)
#context['name'] = self.request.GET.get('name', '')
context['value_name'] = self.request.GET.get('name', '')
#print(context['name'])
self.request.session['page_from'] = "persona"
self.request.session['referer'] = ""
if context['is_paginated']:
list_pages = []
if 'name' not in self.request.GET:
for i in range(context['page_obj'].number, context['page_obj'].number + 5):
if i <= context['page_obj'].paginator.num_pages:
list_pages.append(i)
else:
first_range = self.request.GET.get('page', '1')
if len(WorkerListView.get_queryset(self)) % self.paginate_by == 0:
paginated = int(len(WorkerModalListView.get_queryset(self)) / self.paginate_by)
else:
paginated = int(len(WorkerModalListView.get_queryset(self)) / self.paginate_by) + 1
if paginated > 1:
for i in range(int(first_range), int(first_range) + 5):
if i <= paginated:
list_pages.append(i)
context['total_pages'] = paginated
context['has_more_pages'] = True if int(first_range) < paginated else False
context['next_page'] = int(first_range) + 1 if int(first_range) < paginated else '0'
context['has_previous_pages'] = True if int(first_range) > 1 else False
context['previous_page'] = int(first_range) - 1 if int(first_range) > 1 else '0'
context['actual_page'] = int(first_range)
context['paginator_rows'] = list_pages
return context

normally i have a piece of code that I insert when I need Pagination it looks like this:
<nav>
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1">« first</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a>
</li>
{% endif %}
<li class="page-item active">
<a class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</a>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">last »</a>
</li>
{% endif %}
</ul>
</nav>
after I just insert it on the page I need like this:
{% include 'components/paginate_index.html' %}
for the view I think you are working too much, a regular listview will have all the items for Pagination include already, so a normal Listview should look like this:
class AccountsListView(LoginRequiredMixin, ListView):
model = User
paginate_by = 15
template_name = "accounts/employees/listView.html"

Accordian Table showing all panels when clicked when using Shopify linklists

I have a sidebar menu setup that is looping through shopify linklists and outputting the parent and child collection titles and URLs. The problem is that when i click on one of the anchor tags, it opens all of the anchor links as the data-target and id are not unique. I have tried changing the div id to a random number using Mat.random() but cant make this work.
Here is the code
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapseOne"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapseOne">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}

you can use the forloop.index to append unique value into a loop in Shopify liquid
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion-{{forloop.index}}">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapse{{forloop.index}}"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
<ul>
{% for childlink in link.links %}
<li>
{{childlink.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
you read more about forloop here

changing navbar icons to active with django-Javascript

I have made a navbar with bootstrap4 and I want to toggle the icon of current page to active.
Currently, I am using
<li class="nav-item"><a href="/" id="A"
{% if request.path == "/" %}
class="nav-link active"
{% else %}
class="nav-link"
{% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
{% if request.path == "/blog/" %}
class="nav-link active" {% else %}
class="nav-link"
{% endif %}>Blog</a></li>
what I would like is a simpler way with use of url names that could activate a script
like this:
{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>
{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}
Could there be an easier way? Please suggest to highlight the active page icon on navbar to toggle styles.
Thank you

The best way to do this without violating DRY principles and hard-coding your urls would be to use reverse in the templates.
Example:
<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}
<!-- ..... Body HTML ..... -->
<li class="nav-item">
<a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
Blog
</a>
</li>

How to set correct pagination href of next page if having arguments in url - django

I am working on a django project but I am facing problem in pagination, on search page if multiple argument are passed in url then how I can set them to href of next page, here what I am trying to do is -
{% if is_paginated %}
<ul class="pagination pull-right">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
but if first page url is
http://127.0.0.1:8000/search/products/?q=shirt&brand=Adidas
and the next page is
http://127.0.0.1:8000/search/products/?q=shirt&page=2
brand is not there !! it is not possible for me to add each arguments to href as I did for query, is there any way to just add &page{{i}} at the end of url?

I use template tag to achieve this :
#register.simple_tag(name='url_replace')
def url_replace(request, field, value):
print('this is form tag',request,field,value)
d = request.GET.copy()
d[field] = value
return d.urlencode()
and in templates:
{% if is_paginated %}
<ul class="pagination pull-right">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
This will work fine.