I've 2 section in my screen. Left section is for showing tabs and right is for displaying that tab template(as shown in screenshot). I'm not able to understand how to load different templates when I click these tabs
For example, when I click change password, I should be able to load change_password.html template
This is by far I've tried with code.
<div class="nav">
<ul>
<li class="active"></i><span class="hidden-xs hidden-sm">Home</span></li>
<li></i><span class="hidden-xs hidden-sm">Change Password</span></li>
<li>Bookings</span></li>
<li></i><span class="hidden-xs hidden-sm">Settings</span></li>
</ul>
</div>
I've tried to use with but no luck.
I've just started with django, so if anything is missed let me know. Thanks for your help!
Screenshot
I think what you're attempting is not possible. If you don't want a page reload upon clicking on a tab, you need to use Javascript to dynamically show/hide elements. If page reload is acceptable, you can create different views for each tab, each view rendering a different html file.
You can use the Django include tag to render another template with the current context. E.g. {% include "foo/bar.html" %} (see documentation here). But this will not solve your problem of displaying different content upon clicking on a tab.
Related
I've built a site where I can create new posts (essays) by the admin panel. The output is visible to users. But when I place some HTML as content in the form it doesn't render itself on the page.
example:
Output on the page (with marked unrendered HTML):
I would like to know how to fix it and also, how to name the topic I want to know ( I couldn't find anything related to my problem, probably because I don't know how to express it).
Additionally, I just start to wonder if there is one more problem nested inside. How to link CSS from the static folder having this HTML mentioned above?
Django offer the autoescape template in the builtins tags
{% autoescape off %}
{{ myhtml }}
{% endautoescape %}
But your logic seems wrong, you don't need to create a new page with the doctype, just create a base template and use the block content tag to insert your article.
In your base template replace the description and title of your page by variables that will be populated by the article data.
You need to learn the basic of Django https://docs.djangoproject.com/en/4.1/ trust me you won't regret it !
I'm trying to create a carousel and I want it to be configurable from the Experience Editor. By configurable I meant that it's possible to edit the image, text AND add/or remove slides.
The first time I create the carousel I can add/remove slides but no after saving it and opening it again, after rendering the carousel I can't remove just one slide because they all are part of the same placeholder (I can continue adding new slides and removing the new ones but not the old ones).
I have Carousel.cshtml and CarouselSlide.cshtml and the code look like:
Carousel.cshtml
<div class="carousel">
#foreach (Item slide in Model.Item.Children)
{
#Html.Action("CarouselSlide", "MediaFeature", new { model = slide });
}
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
CarouselSlide.cshtml
<div class="carousel-slide">
<div class="carousel-slide-content">
#Html.Sitecore().BeginField(....)
<div class="background-image">
.....
</div>
<div class="text-container">
....
</div>
#Html.Sitecore().EndField()
</div>
</div>
So far, the issue looks like is related with the placeholders. Any ideas about how to render DynamicPlaceholders?
EDIT
"slides" placeholder is configured to allow only CarouselSlide components
Remove the foreach loop. It is unnecessary. When Sitecore renders the placeholder it renders the previously added slides for you. When in edit mode, it also renders the container that allows you to add additional components.
Using a dynamic placeholder as you have will allow you to have multiple Carousel components on a page. Or more precisely, multiple components containing a placeholder with the key "slides". It is most likely not causing the problems you are seeing with your slides.
Update - additional info requested by OP
It looks like what you have done is mix two different styles of development. In one, you are explicitly rendering the children of the carousel item as slides. In the second you are relying on Sitecore's presentation engine to dynamically render components into a placeholder that could be using data sources from somewhere else in the tree. You need to pick one or the other, but the second approach is generally preferred.
To use the second approach, you would simply remove the foreach loop so that your Carousel view looks like this:
<div class="carousel">
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
If you decide to go with the first approach, you would remove the placeholder and then add Custom Experience Buttons to allow you to insert and sort child items under your carousel item.
With either approach, you may find that page editor does not play all that well with your Carousel javascript. The most common workaround to this problem is to render the carousel as a flat list in page editor mode.
I can't find anything about this. I just made a html template and set it as a joomla template. But one important thing I can't find how to do is how to set menu from template to Joomla. Do I have to make all items of menu again in Joomla and just take css from this?
(In template is menu made from pictures, in css is hover, position etc.)
<nav id="main_nav">
<ul>
<li class="Item1"></li>
<li class="Item2"></li>
</ul>
</nav>
You should define a position in your template where module can be outputted. It's done like this:
<jdoc:include type="modules" name="position_name" style="xhtml" />
It's always a good idea to declare the position in templateDetails.xml too.
Once you're done yo can log in to your joomla backend (administrator), go to extensions > modules. Click new select "menu" from module type selection list. Then fill up the form (you can enter title for the module, select your position, pick a menu that should be rendered here etc) and you're all set.
The menu items you add to the menu selected should appear in your website.
I'm trying to develop a reporting system using Django. I have to display reports about various categories of data.I have put each category as a tab-tab1,tab2, etc. Is it possible to have different template for each tab without having to change the url.
I have tried template inheritance but that requires have separate url for each tab.
My concern is that if the number of tabs grow, then the number of urls will also increase.
Any suggestions please?
Thanks in Advance.
Why is it a problem for the number of URLs to increase?
Presumably you don't need separate URLconf entries for each tab, you can just capture the tab name in the URL and send it on to the view:
url(r'^reports/(?P<tab_name>\w+)/$', views.reports, name='reports')
...
def reports(request, tab_name):
... do something depending on tab_name ...
You can just use {% include %} tag and include different templates.
And I think it's better to have unique URL for each tab, it least with hashtag.
You can use a library like jquery tabs to create the tabs, then load each template individually either through include as suggested by #DrTyrsa or by a custom template tag (which would be my personal preference).
Here is an example (from the excellent bootstrap framework from twitter):
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="pill-content">
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>
I have a web page where the user enters some data and then clicks a submit button. I process the data and then use the same Django template to display the original data, the submit button, and the results. When I am using the Django template to display results, I would like the page to be automatically scrolled down to the part of the page where the results begin. This allows the user to scroll back up the page if she wants to change her original data and click submit again. Hopefully, there's some simple way of doing this that I can't see at the moment.
It should already work if you provide a fragment identifier in the action method of the form:
<form method="post" action="/your/url#results">
<!-- ... -->
</form>
and somewhere below the form, where you want to show the results:
<div id="results">
<!-- your results here -->
</div>
This should make the page jump to the <div> with ID results.
It is complete client site and does not involve Django, JavaScript or similar.
You need to wrap your data into something like this:
<div id="some-id">YOUR DATA TO BE DISPLAYED</div>
and if you make redirect in your view you need to redirect to url: /some-url/#some-id
if you don't make redirect you need to scroll to the bottom using javascript (but note that redirect is preffered way to use in view after saving data).