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);
})
}
})
Related
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
Python Django. I have a model:
class text(models.Model):
text = models.TextField('Текст' ,blank = False)
time = models.CharField('Время',max_length = 200,blank = False)
And I output them all in html:
{% for object in text %}
<div class="row">
<div class="col-xl-3 block_messeage">
<span class="span_block_messeage"> ,{{object.time}}</span>
<br>
{{object.text}}
</div>
</div>
{% endfor %}
everything is displayed successfully, but the class text is increasing every second and I need to show these changes without refreshing the page. How can this be implemented using ajax?
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
I have a list made using for-loop in jija2 in HTML. I want to have a "sort" button where a user can click to sort, toggling ascending/descending order. Similar question to this problem found in stackoverflow:
Sort list of objects with Jinja2 and Flask depending the field pressed
The answer contained how I should setup, but I still am struggling how to implement.
I have the list setup as:
<!-- This is for "default" -->
{% set sort_on = 'lastName' %}
{% set order_rev = True %}
<!-- This is the "sort" function I want to call -->
<input type="button" value="Sort by Name" style='display:inline' onclick="sorter();"/>
<!-- Below is the list -->
{% for profile in profileList|sort(attribute=sort_on, reverse=order_rev) %}
<div class="row" id="table">
<div class="col-md-2" id="name">
<strong>{{profile["lastName"]}}, {{profile["firstName"]}}</strong>
</div>
<div class="col-md-1" id="score">
{{profile["score"]}}
</div>
</div>
And I want to toggle the below in a javascript (or any other suggestion?):
<script>
function Sorter(){
if(toggler==1){
{% set sort_on = 'lastName' %}
{% set order_rev = True %}
toggler = 0
}else{
{% set sort_on = 'lastName' %}
{% set order_rev = False %}
toggler = 1
}
}
</script>
I tried above code, but I do not know how to call the function and perform the sort without refreshing the page, and once refreshed, no settings are saved so goes back to default.
If you have a better solution (and not what I explained above), please suggest!
Please advise. Your input will be greatly appreciated!
I don't even know what title use to this question. I'm starting with web programming and I don't even know what technology should I use to do this.
I have a database with doctrine in symfony2. This database has galleries and each gallery has images (two tables OneToMany relation).
I'm passing an array of galleries to a twig template where I show them in a select, so I can choose one and add more images to the gallery, add new galleries or delete them using the submit buttons.
That is working now with this template:
<select class="listGalleries" id="listGalleries" name='id' size="10">
{% for gallery in galleries %}
<option value="{{gallery.id}}" >{{gallery.name}}</option>
{% endfor %}
</select>
That goes inside the form.
Now, what I want to do is everytime I do click in one item of the select, show, in the same webpage, all the images of the gallery selected.
I don't know which technology should I use. Can I do it with twig? Do I have to learn ajax? I guess I have to go to the database to read the data of the pictures that belongs to that gallery, but I don't know how to do it or if symfony2 offers me a better solution.
Every advice will be appreciated.
"Dynamically" can't be done in twig, since after its rendering there is no way to change the output.
You can do in two ways in my opinion:
Use twig to loop within galleries and output them, then use some javascript like bootstrap tabs to display each gallery when changing option. in bootstrap you would do this way (assuming the gallery->images relations is in $gallery->images):
<div class="tab-content">
{% for gallery in galleries %}
<div class="tab-pane active" id="gallery{{ gallery.id }}">
{% for image in gallery.images %}
<img src="{{ image.url }}" class="img-polaroid">
{% endfor %}
</div>
{% endfor %}
</div>
now using javascript like
$("select#listGalleries").change(function () {
$("select option:selected").each(function () {
$("#gallery" + $(this).attr('value')).tab('show');
});
})
Otherwise you can use ajax to return the gallery images after having selected a gallery from the and render the gallery images somewhere on the page. This could be done in two ways, render the html within symfony and just place the output in the page with javascript or return just a json (using something like this) and create the html within javascript (I personally use a lot pure).