Develop Reference

Django adding eventlistener to a for...loop on template tag

I'm trying to add a event listener to a list of links created by django template tag.
It should take the list of objects with class div.cat-link and add an eventlistener to each one to display the matching id of div.cat-select
html
<div class="cat">
<div class="cat-links">
{% for t in tags %}
<div id="{{t|lower}}" class="cat-link">
<a class="cat" href="{% url 'list_product1' t %}">{{t}}</a>
</div>
{% endfor %}
</div>
</div>
<div class="cat-list">
{% for t in tags %}
<div class="cat-select" id="cat_{{t|lower}}">
{% for p in t.produto_set.all %}
<div class="cat-product">
<!--IMAGES-->
<div class='img'>
<amp-carousel lightbox controls autoplay delay="3000" width="250"
height="250" layout="responsive" type="slides">
{% for pic in p.images.all %}
<amp-img src="{{ pic.image.url }}" width="250" height="150"
layout="responsive" alt="{{ p.nome }}">
</amp-img>
{% endfor %}
</amp-carousel>
</div>
<!-- INFOS -->
<div class='infos-prod'>
<a class='cat-product' href="{% url 'detail_product' p.id %}">
<h3>{{p.nome}} </h3>
</a>
<a class='cat-product' href="{% url 'detail_product' p.id %}">
R$: {{ p.preco }}
</a>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
JavaScript:
<script id="cat-script" type="text/javascript" target="amp-script">
function Showing(one) {
var v1 = document.getElementById(one);
v1.style.display = "flex";
};
function Hiding(one) {
var v1 = document.getElementById(one);
v1.style.display = "none";
};
function Category() {
var v1 = document.getElementsByClassName('cat-link');
for (o in v1) {
var v2 = 'cat_' + v1[o].getAttribute('id')
v1[o].addEventListener('mouseover', function () { Showing(v2) });
v1[o].addEventListener('mouseout', function () { Hiding(v2) });
};
};
Category()
</script>
It should take the list of objects with class div.cat-link and add an eventlistener to each one to display the matching id of div.cat-select
I'm getting the error:
Uncaught TypeError: v1[o].getAttribute is not a function
and nothing is happening.

Looks like you're mixing up Python syntax with JavaScript.
First, try for (let o of v1) instead of for (o in v1).
Then, you're trying to access it by index, but that's not the kind of loop you're using. Try o.getAttribute('id').

How to add external url existing laravel blade file with play button

I have a site with a list of games ( tiled on the index page)
when a user clicks the image the current url is shown on the browser something like http://example.com/game/sweetbanabas?api_exit=
the game currently reside in the /public/games directory.
Now I have the game.blade.php as such:
<div class="grid-item grid-item--height2 grid-item--width2">
<div class="grid__content games">
<div class="games__item">
<div class="games__content">
<img src="{{ $game->name ? '/frontend/Default/ico/' . $game->name . '.jpg' : '' }}" alt="{{ $game->title }}">
#if($game->jackpot)
<span class="label label-d label--left">
{{ number_format($game->jackpot->balance, 2,".","") }} {{ $currency }}
</span>
#endif
#if($game->label)
<span class="label #if($game->label == 'New')label-b #elseif($game->label == 'Hot')label-g #else label-d #endif">{{ mb_strtoupper($game->label) }}</span>
#endif
Play
<span class="game-name">{{ $game->title }}</span>
</div>
</div>
</div>
</div>
I would like to put my /games folder on another server. in what part of the href` would I add the url to the external server?
Thank you for any pointers

You should put new url in anchor tag....
From
Play
To
Play
Hope this will work.

How to loop over an html with javascript?

I have an HTML code which looks like this:-
<article class="media content-section">
<div class="media-body">
<h2><a class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
<div class="article-metadata">
<a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
<div class="float-right">
<small class="text-muted">Category</small>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<div style="float:right;">
<img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">
<p style="float: right; display: inline !important;" id="ViewCount">
.....
</p>
</img>
</div>
</div>
<p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
</div>
</article>
I am trying to add the values of viewcount asynchronously to all the blogs field. With this js/ajax code:-
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
setInterval(function()
{
$.ajax({
type:'GET',
url: "{% url 'getBlogs' %}",
success: function(response){
$("#ViewCount").empty();
for (var key in response.blogs)
{
console.log(response.blogs);
var temp = response.blogs[key].view_count
$("#ViewCount").append(temp);
}
},
error:function(response){
alert("No Data Found");
}
});
},1000);
});
</script>
I have many such blogs, But the values seem to be displayed all at once at only a single field which looks like this:-
But I am trying to display the viewcount of each blogs to its dedicated position. Is there I anyway I can achive it.

One of the easiest way is to use HTML markup to differentiate different viewCount using data attributes.
blogs={
"1":{
"view_count":1
},
"2": {
"view_count":15
}
}
for (var key in blogs)
{
var temp = blogs[key].view_count
$(`[data-key=${key}]`).append(`${temp} views`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-key="1" id="ViewCount">Key:1 :- </p>
<p data-key="2" id="ViewCount">Key:2 :- </p>

VueJS props are undefined in component

I am trying to integrate VueJS with my frontend for my Django applications. I have the following Vue code in a javascript file:
window.onload = function() {
Vue.component('discuss-post', {
props: ['post'],
template: `<div class="card">
<div class="grid-x margin-x">
<div class="cell small-4">
<img class="avatar-img" :src="post.by.profile.img_url">
<p style="font-family: Abel;font-size: 24px">{{ post.by }}</p>
</<div>
</div>
<div class="grid-x margin-x">
<div class="cell small-4">
<p style="font-family: Abel;font-size: 18px">{{ post.content }}</p>
</div>
</div>
</div>`
})
var postDiv = new Vue({
el: "#post-div"
})
}
And the following code in an HTML file:
<div class="card-section">
{% for feed in feeds %}
{% for post in feed %}
<div id="post-div">
<discuss-post post="{{ post }}"></discuss-post>
</div>
{% endfor %}
{% endfor %}
</div>
However, when I load my page I get these errors in my console:
What in my code could be causing these errors to be raised?

For compiling template error remove/fix this tag:</<div>.
Also, you have to pass props to the subcomponent like this:
<discuss-post :post="post"></discuss-post>
For your profile value error, you have to check your JSON structure in data.
See the following example:
Vue.component('discuss-post', {
props: ['post'],
template: `<div class="card">
<div class="grid-x margin-x">
<div class="cell small-4">
<img class="avatar-img" :src="post.by.profile.img_url" />
<p style="font-family: Abel;font-size: 24px">{{ post.by }}</p>
<div>
</div>
<div class="grid-x margin-x">
<div class="cell small-4">
<p style="font-family: Abel;font-size: 18px">{{ post.content }}</p>
</div>
</div>
</div>`
})
var postDiv = new Vue({
el: "#post-div",
data: function() {
return {
post: {
content: "Post Content",
by: {
profile: {
img_url: "http://www.gstatic.com/webp/gallery/1.jpg"
}
}
}
}
}
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div class="card-section">
<div id="post-div">
<discuss-post :post="post"></discuss-post>
</div>
</div>

Isn't the information clear enough? What is </<div> in your code?
On the other hand, use v-bind if you want to pass an object. {{ }} is for text interpolation.

Correct the </<div> with </div> as stated in the answer from #Leo
assuming you have an object "post" in your vue instance
you can bind it like
<discuss-post :post="post"></discuss-post>
your post must be something like
post ={
"by":{
"profile":
{
"img_url":"some url"
}
},
"content":"some content"
};

send string argument to javascript

in google i'm didn't find answer for my question.
I have submit who send arguments from form html to javascript.
Integer arguments i send successful but string and date i cant send ...
How i can do this?
Thanks
HTML :
<div style="width:5%; float:right;">
<div id="b-container">
<div class="photo" data-title="Edit">
<a href="javascript:PopUpShow5({{ item.main_id }}, {{ item.id }}, {{ item.description }}, {{ item.data_date }}, {{ item.end_date }}, {{ item.priority }}, {{ item.status }})">
<input type="image" src="{{ STATIC_URL }}images/edit.png" border="0" width="17" height="17" />
</a>
</div>
</div>
</div>
<div style="width:5%; float:right;">
<div id="b-container">
<div class="photo" data-title="Edit">
<a href="javascript:PopUpShow5({{ item.main_id }}, {{ item.id }}, {{ item.description }}, {{ item.data_date }}, {{ item.end_date }}, {{ item.priority }}, {{ item.status }})">
<input type="image" src="{{ STATIC_URL }}images/edit.png" border="0" width="17" height="17" />
</a>
</div>
</div>
</div>
JAVA_SCRIPT :
$(document).ready(function () {
$("#popup5").hide();
PopUpHide5();
});
function PopUpShow5(main_id, id, description, data_date, end_date, priority, status) {
$("#popup5").show();
document.getElementById('id_get_post_pk').value = main_id;
document.getElementById('id_get_post_id').value = id;
alert(document.getElementById('id_get_post_description').value = description);
alert(document.getElementById('id_get_post_start_date').value = data_date);
alert(document.getElementById('id_get_post_end_date').value = end_date);
document.getElementById('id_get_post_priority').value = priority;
document.getElementById('id_get_post_status').value = status;
$(document).keyup(function (ev) {
if (ev.keyCode == 27) $("#popup5").hide();
});
}
function PopUpHide5() {
$("#popup5").hide();
}

You need to wrap string argument in "
javascript:PopUpShow5("{{ item.main_id }}")
And don't call JavaScript this way ;)