I want to create a list which is clickable and which would allow me to take a survey when I click it.
{% extends "layout.html" %}
{% block title %}
Take Survey
{% endblock %}
{% block main %}
<div class="list-group">
{ for search in searches }
{{search.topic}}
{ endfor }
</div>
{% endblock %}
When I click it I want it to go to a page which shows the questions of the survey whose topic was being shown.
I have created SQL tables for users,surveys,questions and options. Surveys are linked to users, questions are linked to surveys and options are linked to questions.
I just need a way to access the survey id({{search.id}}) in my take route where I could run a SQL query using the survey id to link everything.
Just a disclaimer, I am a beginner in HTML so please try to explain elaborately.
There are multiple ways that you can do this with html, here are a few of them
create a hidden input with the value that u need, and later when u need it retrieve it from that input
<input type="hidden" id="searchId" name="searchId" value="3487">
add a custom attribute to an element, and later when needed retrieve it from that element
<div class="list-group">
{ for search in searches }
{{search.topic}} data-search-id="{{search.id}}"
{ endfor }
</div>
There are also multiple ways you can do this without html
insert a script that has the search id, and later retrieve that id from javascript
{% block main %}
<div class="list-group">
{ for search in searches }
{{search.topic}}
{ endfor }
<script>
// just make sure that this variable is unique, so u dont cause errors or overwrite another variable by mistake
const MY_APP_SEARCH_ID ={{search.id}}
</script>
</div>
{% endblock %}
You could also generate a unique url for each survey
{{search.topic}}
and then handle that search id from the \take endpoint
Related
I want to create a simple list of every article URL in my blog (I have >150).
My current code:
{% for article in blogs['myblog'].articles %}
{{article.url}}
{% endfor %}
The problem is that it only outputs 50 URLs, as per the standard Shopify pagination limit. How could I overcome this? Any solutions using Ajax or otherwise would be highly appreciated.
You can overwrite the pagination limit simply by wrapping the call with the pagination tag and passing the number you want to paginate.
{% paginate blogs['myblog'].articles by 999 %}
{% for article in blogs['myblog'].articles %}
{{article.url}}
{% endfor %}
{% endpaginate %}
PS: Please note that the more articles you have the longer it will take for the DOM to load.
I am currently in the process of the basics of Javascript and I know Django. So I am trying to use javascript to show elements in HTML for a Django For Loop.
The purpose of doing this is that I understood that presenting data using Javascript doesn't require the page to be refreshed, so I decided to give it a try.
To explain more my question here is an example of what I did.
I have a list of name of users who likes a posts and there are presented in the following format in the template:
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
{% for user in post_likes %}
<span class="dropdown-item" >{{ user.username }}</span>
{% endfor %}
So I added an id to the span and added the following script related to javascript:
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
{% for user in post_likes %}
<span id="id{{ forloop.counter }}" class="dropdown-item" >{{ user.username }}</span>
{% endfor %}
</div>
<script>
var element = document.getElementById("id{{ forloop.counter }}");
element.innerHTML = "{{ user.username }}";
</script>
When a new user likes the post his name should appear directly in this loop without the page refreshing but it is not happening and the name of the logged-in user is the one and appearing.
I am not sure if this is the correct way to integrate Javascript and Django together, but I thought of trying and I searched for answers but didn't find something solid.
My question: Is there something that I should fix in my code to present the data in the template to avoid the page refreshing?
Update
I have updated by code for the script and hmtl using forloop.counter but the page needs to be refreshed to view the new names added to the list
This is not a whole answer, but I think there is a problem in your code:
{% for user in post_likes %}
<span id="id01" class="dropdown-item" >{{ user.username }}</span>
{% endfor %}
This results in several span with same id. Consider using forloop.counter.
Not that simple, if you want to send live data you need to implement something like Django Channels, and send data through websockets
I have a Django template that renders a little bit of data about the user. It is a for list that goes through and creates this element for each user. I want to be able to click on that and have a modal appear with all of their information. So if I click on user1 I get user1's information, and so on. I am not sure how to do this.
I am currently trying to use JavaScript to do this. The problem is that I cannot get the data from the specific element into JavaScript. I have the modal working, in that it pops up. However, I cannot find a way to retrieve the data from the specific user clicked on.
#dashboard.html
{% for party in parties %}
<div class="userInfo">
<img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
<div class="userText">
<p>{{party.lastName}} </p></br>
</div>
<button name="remove">Remove</button>
</div>
{% endfor %}
I just need to get data from a specific user into the js from the specifc button clicked. Maybe there is a better way to do this? I am not sure. I just need be able to populate a modal with data from the specific user clicked. The above code shows the html for the loop that creates the user info.
It may be a bit verbose depending on how large your object is but you could use data attributes:
{% for party in parties %}
<div class="userInfo" data-lastName="{{party.lastName}}" data-etc="{{party.etc}}">
<img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
<div class="userText">
<p>{{party.lastName}} </p></br>
</div>
<button name="remove">Remove</button>
</div>
{% endfor %}
and then just access them when you click to open the modal:
const users = document.querySelectorAll('.userInfo');
for (let i = 0; i < users.length; i++) {
users[i].addEventListener('click', function() {
const userData = {
lastName: this.dataset.lastName,
etc: this.dataset.etc
}
openMyModal(userData);
})
}
})
I'm currently using Django in my template to generate href for each list element and on the url, a certain method is executed, removing the item from the list, however I'd like a confirmation box to appear to assure the user they wish to delete it.
The only issue is the url is dynamic, and changes for each element of the list using django variables, shown below:
<div id="list5">
<ul>
{% if results %}
{% for result in results %}
<li><strong>{{result.0}}</strong>evaluating {{result.1}}</li>
{% endfor %}
{% else %}
<li><strong>Assessor</strong>evaluating Assessee</li>
{% endif %}
As a result, inline javascript onclick methods, and JQuery that I've been able to find on stack overflow doesn't seem to be working for me, is there a way I can generate a confirmation box (browser confirm is fine) on clicking of the list element, which then on a "yes" redirects and follows the url from the list element that the click was made from?
You should be able to use a setup like this:
jQuery:
$(document).ready(function() {
$('.deleter').click(function() {
if(confirm('Are you sure you want to delete this?') == true) {
window.open($(this).attr('goto'));
}
})
})
Template:
<div id="list5">
<ul>
{% if results %}
{% for result in results %}
<li class='deleter' goto='/accounts/delete/{{result.0}}/{{result.1}}'><strong>{{result.0}}</strong>evaluating {{result.1}}</li>
{% endfor %}
{% else %}
<li><strong>Assessor</strong>evaluating Assessee</li>
</ul>
{% endif %}
</div>
I pass some data and process in my django template file. It works just fine. However, when i right click and then select "view page source" on my internet browser, i can see all the values that i passed from my view.py. How to hide the values in the template file.
Child.page
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block extra_js %}
<script>
var secret_data = new Array();
function mybutton(){
{% for data in Mysecret%}
// Here, I wanna make the value of data invisable
secret_data.push({{ data.0 }})
{% endfor %}
}
</script>
{% endblock %}
{% block content %}
<input type="submit" name="submitButton" value="Submit" onclick ="mybutton();"> </input>
{% endblock %}
When i right click and select "view to source" on my internet browser, i can see all the values something like that:
<script>
var secret_data = new Array();
function mybutton(){
secret_data.push("Secret-1")
secret_data.push("Secret-2")
}
</script>
I have tried this:
secret_data.push({% csrf_token %}{{ data.0 }})
The values cannot be seen in case of viewing source code of the page, but at the same time it messes up the data that i pass (cannot access data cause the data turns out a div). How can i make my secret_data list invisible so that if someone tries to view source of my page, she would not be able to see the passed values ("Secret-1" and "Secret-2").