How to pass a django variable from html page to javascript - javascript

My website has a sidebar that is the same on all pages. In order to avoid copying and pasting the html for the sidebar for every page I wrote some javascript as this answer suggested: How can I make my navi-bar the same across my html?
I am happy with these results except for one thing, my sidebar displays things like the users name, which I access with {{ request.user.get_full_name }}, but this does not work when I put that in my sidebar.js. So I thought a good work around would be to set a var user={{request.user.get_full_name}} in the <script> tags in my html file and then use <h3>user</h3> in my js, but I am not sure how to do that.
This is my sidebar.js
document.getElementById("navMenu").innerHTML =
'<div id="circle"><span class="glyphicon glyphicon-user"></span></div><h3>Your Name</h3>'+
'<ul class="nav nav-pills nav-stacked" style="text-align: left;">'+
'<li><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</li>'+
'<li><i class="fa fa-user fa-fw" aria-hidden="true"></i> Profile</li>'+
'<li><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Messages</li>'+
'<li><i class="fa fa-users fa-fw" aria-hidden="true"></i> Boards</li>'+
'<li><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i> Feed</li>'+
'<li><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Notifications</li>'+
'<li><label for="logout" style="font-size: 15px; font-weight: inherit;"><i class="fa fa-lock fa-fw" aria-hidden="true"></i> Logout</label></li>'+
'</ul>';
So in the second line where it has <h3>Your Name</h3> I want that to be the user variable. And this is how I am trying to pass the variable in my HTML page:
<div id="sidebar">
<nav id="navMenu"></nav>
<script src="{% static 'app/js/sidebar.js' %}">var user={{request.user.get_full_name}}</script>
<!-- logout button/form -->
<form action="/" method="post">
{% csrf_token %}
<input class="hidden" id="logout" type="submit" value="Logout"/>
</form>
</div>
I would like to avoid using PHP. The bottom line is can I use django like that inside the <script> tags and if so, how do I then use that variable in my javascript?

I can't find the reference, but I'm skeptical <script src="something.js"> can also have source within it. I've not seen it done that I can recall.
This should work, which is similar to what you are doing:
<script>
var user = '{{request.user.get_full_name}}'; // created by your django html
</script>
<script src="{% static 'app/js/sidebar.js' %}"></script>
And then in your sidebar.js you just need to do:
"....<h3>" + user + "<h3>..."
However, a cleaner way to do this would be to encapsulate your js into a function that takes the username as a parameter:
<script src="{% static 'app/js/sidebar.js' %}"></script>
Where your js is something like,
function sidebar(user) {
document.getElementById("navMenu").innerHTML = "....<h3>" + user + ";<h3>..."
}
Followed by:
<script>
sidebar('{{request.user.get_full_name}}'); // where this is created via your template.
</script>

Related

How to make an icon slideshow with jQuery

Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.
<body>
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle" id="not-active"></i>
<i class="fa fa-plane" id="not-active"></i>
<i class="fa fa-ship" id="not-active"></i>
<i class="fa fa-fighter-jet" id="not-active"></i>
<i class="fa fa-space-shuttle" id="not-active"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
</div>
</body>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
let currentImg = $('#active');
let nextImg = currentImg.next();
if(currentImg.length){
currentImg.removeAttr('#active').css('z-inex', -10)
nextImg.attr('#active').css('z-index', 10);
}
});
});
First of all, I recommend using class instead of id. Even if you are going to use id, it is not recommended to use this way. The id value must be uniq. In your case, your ID's are not uniq. And also this is better to use like this ID selector.
id="notActive"
You can just try with each function to get current div. I tried with your code but did not work, with each yes.
$('.fa').each(function(){
if( $(this).hasClass('active') ){
currentImg = $(this);
}
})
And bonus : You can also use current div index value, then you dont have to use prev, next. You can increase or decrease index the value one by one. Just a suggestion.
You are using the id attribute incorrectly, as every id must be unique.
Also, setting the z-index on elements has no effect.
Finally, jQuery is not helping and can be eliminated.
Here's a more standard way to make something active/inactive, using a class named `active':
// control buttons
const right = document.querySelector('.right-arrow');
// handle right click
right.onclick = function() {
const activeImg = document.querySelector('i.active');
const nextImg = activeImg.nextElementSibling;
if (activeImg && nextImg) {
activeImg.classList.remove('active');
nextImg.classList.add('active');
}
};
i {
font-size: 32px;
z-index: -10; /* this has no effect */
}
.active {
z-index: 10;
background-color: yellow;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
right-arrow
</div>
</div>
</div>

How to find the count of a particular class with a particular style is repeated in a HTML Page

I have a html page, where I have two div classes :
<i class="fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="fas fa-info-circle float-left resultsInfo" ></i>
On Page load, I need to get the count of how many times these each Div has been repeated. The only differentiating factor between these two div is the style. So I wanted to know how many times the first div oocured and how many times the second one. Please help me to find this out. I am new to HTML and js
I think the easiest way is this:
<html>
<body>
<p id="demo"></p>
<ul>
<i class="count fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="count fas fa-info-circle float-left resultsInfo" ></i>
</ul>
</body>
</html>
and js is lookin like
document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.count').length;
here is the example: https://jsfiddle.net/f7tsLcrd/
This snippet returns the number of elements that have a "count" class and red color
$(".count").filter(function() {
return ($(this).prop('style').color == 'red');
}).length

angularJS : disable link based on variable value, and display message box

I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.
To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>

Calling initialization function inside ng-repeat

I am trying to call ng-init function inside ng-repeat and it only works only on the first element:
<li ng-repeat="comment in ad.comments|limitTo:quantity | orderBy : sortComment : true">
<div id="starsDiv" ng-init="orderComment(comment.stars)"></div>
Comment: {{comment.text}}
<cite class="clearfix"> on {{comment.posted | date}}</cite>
</li>
The orderComment inside ng-repeat function needs to init the starDiv:
$scope.orderComment= function(numOfStars){
var html = '<i class="fa fa-star-o" style="color:gold;"></i>';
for(var i =0 ; i<numOfStars-1;i++)
{
html += '<i class="fa fa-star-o" style="color:gold;"></i>';
}
document.getElementById("starsDiv").innerHTML = html;
};
Injecting HTML to the starsDiv by the value of comment.stars.
For instance if comment equals 4 there will be 4 HTML elements of :
'<i class="fa fa-star-o" style="color:gold;"></i>'
inside it.
In general, Angular discourages making changes in the DOM on your own, and in this case it's not necessary.
A simple solution might be to put in the maximum amount of possible stars and using ng-show to show only the amount we need. Assuming there are 5 stars:
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 0"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 1"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 2"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 3"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 4"></i>
If you need a general solution, you can always use ng-repeat. You simply need a function that will take a number and return an array of that size. You can use the array like this.
<i class="fa fa-star-o" style="color:gold;" ng-repeat="x in array(comment.stars)"></i>
An even more general solution would be to create a custom directive that renders these stars. I recommend reading about custom directives: https://docs.angularjs.org/guide/directive

meteor-accounts-ui-bootstrap-3: Change {{ > loginbuttons }} to icon

I'm using meteor-accounts-ui-bootstrap-3 in my meteor app to let the users register and login. This as working well.
But now I want to change, what is displayed by {{ > loginButtons }}. Right now I see 'Login / Register'. But I want to replace this by the font awesome icon <i class="fa fa-user"></i>. Just an icon, no text.
But I can't find the right place to make this changes.
I tried to do:
accountsUIBootstrap3.map('en', {
loginButtonsLoggedOutDropdown: {
signIn: '<i class="fa fa-user"></i>',
up: "Register"
}
})
But this HTML won't be rendered. Also I can't remove the / which still will be shown in front of 'Register'.
The / is hardcoded here. You might be able to achieve what you want by replacing the _loginButtonsLoggedOutDropdown template with a modified version, by doing something like this:
Some html file:
<template name="my_loginButtonsLoggedOutDropdown">
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <b class="caret"></b></a>
<div class="dropdown-menu">
{{> _loginButtonsLoggedOutAllServices}}
</div>
</li>
</template>
Some client-side js code:
Template._loginButtonsLoggedOutDropdown = Template.my_loginButtonsLoggedOutDropdown;

Categories