Get data from clicked elements Django - javascript

I have a page where User can select people to add in his team.
One side of the page is the list of the people to select.
When user click Add to the team, it goes to the right side where we have the list of the selected people.
I don't understand how I can get the data on the selected side from the view in django..
For example on the left:
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" style="float: right;">Add to the team</span>
</li>
{% endfor %}
and on the right:
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
</ul>
</div>
The click is handled by a little js click event like this:
var selected = document.querySelector('#selected-list ul');
var team = document.querySelector('#team-list ul');
function clickHandlerTeam(e){
if(e.target.classList.contains('move')){
if (e.target.textContent == 'Add to the team'){
console.log('changing add');
e.target.textContent ='Remove from the team';
selected.appendChild(e.target.parentNode);
} else {
console.log('changing remove');
e.target.textContent = 'Add to the team';
team.appendChild(e.target.parentNode);
}
console.log('****************');
}
return;
}
Thanks for your help

{{ selected_techs=[] }}
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>
</li>
{% endfor %}
</ul>
</p>
</div>
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
{% for tech in selected_techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
</li>
{% endfor %}
</ul>
</div>
I think this should solve your problem.
Just remember to add
Edit 1:
Try this
{% with selected_techs=[] %}
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>
</li>
{% endfor %}
</ul>
</p>
</div>
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
{% for tech in selected_techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
</li>
{% endfor %}
</ul>
</div>
{% endwith %}

I found out my solution. I added a form tag for each of my elements in my template, and removed the ul, replaced it by a hidden input with a value of tech.id, and replaced the spans tags where the user used to click by buttons. Then handled it with the views.py by getting the ids.

Related

Clicking the copy button, JavaScript id just copy the first data from database and I'm unable to copy others data

I'm working on a self project where I have to retrieve my database data (e.g. names which are unique) and in the website, these names are listed. What I'm trying to do is if user click the name there appear popup with the user info and there is click button. After clicking the click button user can copy the info. But what problem is after clicking the copy button JavaScript id just copy the first data from database and I'm unable to copy others data. These data are taken from the database using forloop.
{% for twenty in twenty %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ twenty.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="copy">
<div class="row">
<div class="col-md-8">
<input type="text" value="{{ twenty.detail }}" id="myInput1">
</div>
<div class="col-md-4">
<button onclick="myFunction1()">Copy</button>
</div>
</div>
</div>
</div>
</li>
{% endfor %}
<h3>View All</h3>
{% block script %}
<script>
function myFunction1() {
var copyText = document.getElementById("myInput1");
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
{% endblock script %}
Try this. So the id is different each time. You might have an id, or you might need to introduce a counter. It's been a while since I did what I think is twig/php
{% for twenty in twenty %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ twenty.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="copy">
<div class="row">
<div class="col-md-8">
<input type="text" value="{{ twenty.detail }}" id="myInput{{ twenty.id }}">
</div>
<div class="col-md-4">
<button onclick="myFunction1('myInput{{ twenty.id }}')">Copy</button>
</div>
</div>
</div>
</div>
</li>
{% endfor %}
{% block script %}
<script>
function myFunction1(id) {
var copyText = document.getElementById(id);
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
{% endblock script %}

How do I pass a variable to a form from a link

I am trying to pass the sets ID to a form when a user clicks on the link. Semantic is being used for the frontend.
When the user is viewing a Class, they see a button that says 'New Survey' as below:
This is the HTML:
<a href="/form/create?set_dropdown={{set.id}}">
<button class="ui labeled icon button green">
<i class="inverted plus icon"></i>
New Survey
</button>
</a>
This is the field that is being targeted:
<div class="ui selection dropdown" id="set_dropdown">
<input type="hidden" id='class_dropdown' name="set">
<i class="dropdown icon"></i>
<div class="default text">Class</div>
<div class="menu">
{% for set in sets %}
<div class="item" data-value="{{ set.id }}">{{ set.name }}</div>
{% endfor %}
</div>
</input>
</div>
Its a dropdown that is dynamically rendered in with Jinja2.
Any help would be appreciated
You can use request.args to retrieve parameter from the url
{{ request.args.get('set_dropdown') }}
use this and set a unique id for the selection drop down:
<div class="ui selection dropdown" id="set_dropdown_{{ request.args.get('set_dropdown') }}">
<input type="hidden" id='class_dropdown' name="set">
<i class="dropdown icon"></i>
<div class="default text">Class</div>
<div class="menu">
{% for set in sets %}
<div class="item" data-value="{{ set.id }}">{{ set.name }}</div>
{% endfor %}
</div>
</input>
</div>

Django - place differently every second item in for loop

Inside my well i have a list that splits to left and right. I want to place users in that list. I want to order them like: Firs one in the left list, second one in the right, third one in the left list, forth in the right... So every second user would be placed in the right list. Here is the html of the well:
<div class="well">
<h4>Users</h4>
<div class="row">
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User1
</li>
<li>User3
</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User2
</li>
<li>User4
</li>
</ul>
</div>
</div>
</div>
Now i cant do it just with classic for loop, because if i do as the below code shows, it would load the whole second list many times:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
<li> {{ user }}
</li>
</ul>
</div>
{% if forloop.counter|divisibleby:2 %}
<div class="col-xs-6">
<ul class="list-unstyled">
<li>{{ user }}
</li>
</ul>
</div>
{% endfor %}
</div>
I would probably have to use forloop.counter|divisibleby:3 but i dont know how to load just users in the second unordered list , without the whole list being copied for every user. Maybe soulution would use javascript too?
I hope you understand my problem :D
Other thing you can do to avoid sending 2 additional arrays is to use divisibleby in this manner.
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if not forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
EDIT: I figured it out, after two days of trying it just came to me. If anybody is dealing with the same problem; I handled it in views:
def index(request):
users = User.objects.all()
odd_users = users[::2]
even_users = users[1::2]
return render(request, 'index.html', {'users': users, 'odd_users': odd_users, 'even_users': even_users})
And then i just loaded it in template:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in odd_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in even_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
Cheers!

Jquery Load is Duplicating Behaviour in django template

I am trying to populate a page using jquery.load() method. The loading is working fine but a form inside the newly loaded part is duplicating its behaviour on submit event.
Relevant jquery part :
$('#settings').on('click',function(event){
var tax_submit_url = "{% url 'clinic_tax_submit' %}";
$('.right_col:visible').load(tax_submit_url);
return false;
});
HTML Part(inside dashboard.html)
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li><i class="fa fa-home"></i> Home </li>
<li><a><i class="fa fa-edit"></i> Appointments <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li id="doctors"><a>Doctors<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
{% for membership in memberships %}
<li class="sub_menu membership_button" id="membership_{{membership.id}}" data="{% url 'clinic_doctor_scheduler' membership.doctor.slug %}">
<a>
<span><h6 style="margin:0">{{ membership.doctor }}</h6></span>
<span style ="color:#1abb9c;"><small>{{ membership.doctor.doctorSpecial }}</small></span>
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</li>
<li><a><i class="fa fa-desktop"></i> Billing & Invoicing <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li id="invoicing_summary"><a> Invoicing Summary </a></li>
<li id="settings"><a> Settings </a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<div class="right_col" role="main">
</div>
Form inside template
<div class="col-xs-4" style="float:right;">
<h3>Add Another Tax</h3>
<br>
<form class="taxes_form" method="POST" action="">
{{ taxes_form.as_p }}
<button class="primaryAction btn-success" type="submit" style="width:100%;">Submit</button><br/>
</form>
<div class="alert alert-success" role="alert" style="display:none !important;">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> You have added a tax successfully!
</div>
</div>
View to render taxes.html which will be loaded in dashboard.html
def clinic_tax_submit(request):
print "inside clinic tax submit"
if request.user.is_authenticated():
invoice_taxes = Invoice_taxes.objects.filter(clinic_id=request.user.clinic.id)
context = {
'invoice_taxes': invoice_taxes,
'taxes_form': TaxesForm,
}
return render(request,'clinic/taxes.html',context)
else:
raise Http404()
Although this is a hacky way to do things, if you don't find anything else, use event.stopImmediatePropagation() on the click event that is giving duplicate behaviour..!!

Link to specific tab Bootstrap

I'm developing a site with Django Framework and I'm trying to create a way for when a user access a link like http://www.example.com/site/#users_rating it opens a specific tab in the page.
I tried the following code that I found on the Internet (I'm new in JavaScript/JQuery), it isn't working:
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
My template uses BootStrap 3, here is the HTML code (with some Django tags):
<div class="col-md-12" style="margin: 0 auto;">
<section class="panel">
<header class="panel-heading tab-bg-dark-navy-blue">
<ul class="nav nav-tabs nav-justified ">
<li class="active">
<a data-toggle="tab" href="#overview">
{% trans "Overview" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#timeline">
{% trans "Timeline" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#users_rating">
{% trans "Users Ratings" %} ({{ ptc.userrating.count }})
</a>
</li>
<li class="">
<a data-toggle="tab" href="#rating">
{% trans "Our Rating" %}
</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content tasi-tab">
<!-- Overview Tab-Pane -->
<div id="overview" class="tab-pane active">
{% include 'overview.html' %}
</div>
<!-- Timeline Tab-Pane -->
<div id="timeline" class="tab-pane">
{% include 'timeline.html' %}
</div>
<!-- User Rating Tab-Pane -->
<div id="users_rating" class="tab-pane">
{% include 'users_rating.html' %}
</div>
<!-- Our Rating Tab-Pane -->
<div id="rating" class="tab-pane">
{% include 'rating.html' %}
</div>
</div>
</div>
</section>
</div>
How can I open an specific tab according to an URL in my site?
Following code works for me
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-md-12" style="margin: 0 auto;">
<section class="panel">
<header class="panel-heading tab-bg-dark-navy-blue">
<ul class="nav nav-tabs nav-justified ">
<li class="active">
<a data-toggle="tab" href="#overview">
{% trans "Overview" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#timeline">
{% trans "Timeline" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#users_rating">
{% trans "Users Ratings" %} ({{ ptc.userrating.count }})
</a>
</li>
<li class="">
<a data-toggle="tab" href="#rating">
{% trans "Our Rating" %}
</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content tasi-tab">
<!-- Overview Tab-Pane -->
<div id="overview" class="tab-pane active">
{% include 'overview.html' %}
</div>
<!-- Timeline Tab-Pane -->
<div id="timeline" class="tab-pane">
{% include 'timeline.html' %}
</div>
<!-- User Rating Tab-Pane -->
<div id="users_rating" class="tab-pane">
{% include 'users_rating.html' %}
</div>
<!-- Our Rating Tab-Pane -->
<div id="rating" class="tab-pane">
{% include 'rating.html' %}
</div>
</div>
</div>
</section>
</div>
</body>
</html>
JS
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
Thanks a bunch. With newer versions of JQuery (mine=3.3.1) you need to make a little alteration:
<script>
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href=\\'+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
Hope this saves someone the hour I lost

Categories