We Keep Coding

How to make a multiple toggle form with one form id?

I am making a comment form in Django, I added a little javascript functionality to it by showing it when user clicks on the reply button.But the problem I am having is that every comment will be loaded will be having one same id so it doesn't make the toggle functionality available after the comments first.
Here's my html code
{% for comment in comments %}
<ul class="comment-list">
<li>
<div class="single-comment">
<div class="comment-avatar">
<img src="/static/img/others/comment-2.jpg" alt="comment">
</div>
<div class="comment-info">
<div class="comment-meta">
<p class="comment-author">{{ comment.name }} </p>
<span class="comment-date">{{ comment.created }}</span>
<button type="button" class="reply" id="reply">Reply</button>
<i class="fa fa-trash"></i>
</div>
<div class="comment-content">
<p>{{ comment.body|linebreaks }}
</p>
</div>
</div>
</div>
<div class="reply-comment"></div>
<form action="." method="post" id="form1">
{% csrf_token %}
<!-- Hidden input for parent comment.id -->
<input type="hidden" name="parent_id" value="{{ comment.id }}">
<div class="form__group mb--30 mb-sm--20">
<div class="form-row">
<div class="col-md-6 mb-sm--20">
<label class="form__label form__label--3" for="comment_name">Name<span class="required">*</span></label>
{{form.name}}
</div>
<div class="col-md-6 mb-sm--20">
<label class="form__label form__label--3" for="comment_email">Email<span class="required">*</span></label>
{{form.email}}
</div>
</div>
</div>
<div class="form__group mb--30 mb-sm--20">
<div class="form-row">
<div class="col-12">
<label class="form__label form__label--3" for="review">Your Review<span class="required">*</span></label>
{{form.body}}
</div>
</div>
</div>
<div class="form__group">
<div class="form-row">
<div class="col-12">
<input type="submit" value="Reply" class="btn btn-style-1 btn-submit mb-4" style="margin-top: -1rem;">
</div>
</div>
</div>
</form>
<ul class="children">
{% for reply in comment.replies.all %}
<li>
<div class="single-comment">
<div class="comment-avatar">
<img src="/static/img/others/comment-2.jpg" alt="comment">
</div>
<div class="comment-info">
<div class="comment-meta">
<p class="comment-author">Reply to {{comment.name}} by #{{ reply.name }} </p>
<span class="comment-date">{{ reply.created }}</span>
<button id="reply-child" name="reply-child" class="reply">Reply</button>
<i class="fa fa-trash"></i>
</div>
<div class="comment-content">
<p>{{ reply.body }}</p>
</div>
</div>
</div>
</li>
</ul>
<form action="." method="post" id="form2">
{% csrf_token %}
<!-- Hidden input for parent comment.id -->
<input type="hidden" name="parent_id" value="{{ reply.id }}">
<div class="form__group mb--30 mb-sm--20">
<div class="form-row">
<div class="col-md-6 mb-sm--20">
<label class="form__label form__label--3" for="comment_name">Name<span class="required">*</span></label>
{{form.name}}
</div>
<div class="col-md-6 mb-sm--20">
<label class="form__label form__label--3" for="comment_email">Email<span class="required">*</span></label>
{{form.email}}
</div>
</div>
</div>
<div class="form__group mb--30 mb-sm--20">
<div class="form-row">
<div class="col-12">
<label class="form__label form__label--3" for="review">Your Review<span class="required">*</span></label>
{{form.body}}
</div>
</div>
</div>
<div class="form__group">
<div class="form-row">
<div class="col-12">
<input type="submit" value="Reply" class="btn btn-style-1 btn-submit mb-4" style="margin-top: -1rem;">
</div>
</div>
</div>
</form>
{% for c_reply in reply.replies.all %}
<li style="margin-left: 3rem;">
<div class="single-comment">
<div class="comment-avatar">
<img src="/static/img/others/comment-2.jpg" alt="comment">
</div>
<div class="comment-info">
<div class="comment-meta">
<p class="comment-author"><a href="#">
Reply to {{reply.name}} by #{{ c_reply.name }} </a></p>
<span class="comment-date">{{ c_reply.created }}</span>
</div>
<div class="comment-content">
<p>{{ c_reply.body }}</p>
</div>
</div>
</div>
</li>
{% endfor %}
{% endfor %}
</ul>
{% empty %}
<h4>There are no comments yet.</h4>
{% endfor %}
Here's my tiny little JavaScript code
<script>
$(document).ready(function() {
$("#form1").hide();
$("#reply").click(function() {
$("#form1").toggle();
});
});
</script>

You can use Class Selector ('.class') to attach event handler with reply element and then use various DOM traversal methods i.e. .closest(), .next() to target the desired <FORM> element
//Hide All Forms
$("form").hide();
//Use Class selector to attach event handler
$(".reply").click(function() {
$(this) //Current element which invoked the event handler
.closest('li') // First Ancestor LI element
.children('form') //Immediate Child of LI element
.toggle();
});

With vanilla javascript:
const forms = [...document.querySelectorAll('form')];
forms.forEach(el => el.classList.toggle('hide'));
/**
Given your html the nextSibling of a .single-comment is always a form.
*/
const toggleNextForm = replyEl => {
replyEl.closest('.single-comment').nextSibling.classList.toggle('hide');
};
const replies = [...document.querySelectorAll('.reply')];
replies.forEach(el => el.onclick = toggleNextForm);
Please switch the hide class for whatever CSS class is used in your implementation.

JavaScript does not work in HTML email templates

I need to send an email using PHP, which could be easily done using SMTP, but the challenge is to embed a web service in the HTML mail, which is why I used JavaScript in the body of the message to access the Web service when a button click is triggered.

<div class="container">
<div class="row">
<div class="col-lg-5 " >
<div class="shadow bg-white stick-to-content mb-4">
<div class="bg-dark dark p-4"><h5 class="mb-0">Votre commande</h5></div>
<div id="mainDiv">
<div class="bg-dark dark p-4 hide"><h5 class="mb-0">Son commande</h5></div>
<table class="table-cart" id="table-cart">
<!-- Contenu du cart list (liste de meal) -->
<!-- content code jquery -->
</table>
<div class="cart-summary">
<div class="row">
<div class="col-7 text-right text-muted">Order total:</div>
<div class="col-5"><strong class="orderTotal"></strong></div>
</div>
<div class="row devlieryHide">
<div class="col-7 text-right text-muted">Devliery:</div>
<div class="col-5"><strong class="devliery"></strong></div>
</div>
<hr class="hr-sm">
<div class="row text-lg">
<div class="col-7 text-right text-muted">Total:</div>
<div class="col-5"><strong class="total"></strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 ">
<form action="{{route('sendCHeckOutToMail')}}" method="post">
#csrf
<div class="bg-white p-4 p-md-5 mb-4">
<h4 class="border-bottom pb-4"><i class="ti ti-user mr-3 text-primary"></i>Informations de base</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Nom:</label>
<input type="text" name="nom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Prénom:</label>
<input type="text" name="prenom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Ville:</label>
<input type="text" name="ville" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Rue et numéro:</label>
<input type="text" name="zip_code" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Téléphone:</label>
<input type="text" name="phone" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>E-mail:</label>
<input type="email" name="mail" class="form-control">
</div>
</div>
<h4 class="border-bottom pb-4"><i class="ti ti-package mr-3 text-primary"></i>Livraison</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Heure de livraison:</label>
<div class="select-container">
<select name="date_livraison" class="form-control">
<option>Aussi vite comme possible</option>
<option>Dans une heure</option>
<option>Dans deux heures</option>
</select>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg"><span>Commandez maintenant!</span></button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Fonctions du cart Shopping -->
<script src="{{ asset('frontEnd/assets/js/js/cartShopping.js') }}"></script>
<!-- Evenements du carnet d'adresses -->
<script src="{{ asset('frontEnd/assets/js/js/events.js') }}"></script>

Vue js 2- Failed to mount component: template or render function not defined

I have a component:
<player-info :data="player"></player-info>
I would like to use the vue-mask-input plugin as a child component:
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date">
This is the whole component:
<template>
<div id="info" class="player-info-card-content section-card">
<div class="row">
<div class="col-12">
<h5 class="section-title"><i class="ion-ios-list-outline title-icon"></i> Overview</h5>
<button #click="edit = !edit" class="button edit-button-wrapper">
<i v-if="!edit" class="ion-edit edit-button"></i>
<i v-if="edit" class="ion-close edit-button"></i>
</button>
<hr class="info-title-hr">
</div>
</div>
<div class="row info-content">
<div class="col-12">
<div class="row">
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Born</span>
<p v-if="!edit">{{ player.birthday }}</p>
<!--
<input v-if="edit" type="text" v-mask="'999.999.999-99'">
<input class="info-data-input" v-if="edit" name="birthday" v-model="player.birthday" value="{{ player.birthday }}">
-->
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Club</span>
<p v-if="!edit">{{ player.club }}</p>
<input class="info-data-input" v-if="edit" name="club" v-model="player.club" value="{{ player.club }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Position</span>
<p v-if="!edit">{{ player.position }}</p>
<input class="info-data-input" v-if="edit" name="position" v-model="player.position" value="{{ player.position }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Height</span>
<p v-if="!edit">{{ player.height }} <span v-if="player.height != ''"></span></p>
<input class="info-data-input" v-if="edit" name="height" v-model="player.height" value="{{ player.height }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Weight</span>
<p v-if="!edit">{{ player.weight }} <span v-if="player.weight != ''">kg</span></p>
<input class="info-data-input" v-if="edit" name="weight" v-model="player.weight" value="{{ player.weight }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Foot</span>
<p v-if="!edit">{{ player.foot }}</p>
<input class="info-data-input" v-if="edit" name="foot" v-model="player.foot" value="{{ player.foot }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Agent</span>
<p v-if="!edit">{{ player.agent }}</p>
<input class="info-data-input" v-if="edit" name="agent" v-model="player.agent" value="{{ player.agent }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row sub-section">
<div class="col-12">
<h5 class="title-margin section-title">
<i class="ion-ios-stopwatch-outline title-icon"></i>
Athletic performance
</h5>
<hr class="info-title-hr">
</div>
</div>
<div class="row info-content">
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">40m time</span>
<p class="lg-strong-font">4.3<span>s</span></p>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">100m time</span>
<p class="lg-strong-font">11.1<span>s</span></p>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Vertical jump</span>
<p class="lg-strong-font">65<span>cm</span></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import MaskedInput from 'vue-masked-input';
export default {
props: ['data'],
data () {
return {
player: this.data.data,
edit: false,
date: '',
}
},
computed: {
link() {
return `/player/info/edit/${this.player.id}`;
}
},
components: {
MaskedInput
}
}
</script>
Before updating to Vue v.2.4.4 I kept getting warning that it is a fragment instance:
[Vue warn]: Attributes "v-model", "mask", "placeholder" are ignored on
component because the component is a fragment instance:
After updating the Vue to v.2.4.4 that warning was gone, but I got a new error:
[Vue warn]: Failed to mount component: template or render function not
defined.
found in
---> <MaskedInput>
<PlayerInfo>
<Player>
<Root>
And this is the parent component on my page:
<div><player :player="{{ $player }}" :videos="{{ $videos }}"></player></div>
This parent component consists of this child components:
<template>
<div class="row">
<div class="col-md-3">
<div>
<player-card :data="player"></player-card>
</div>
</div>
<div class="col-md-9">
<div>
<player-info :data="player"></player-info>
</div>
<div>
<player-videos :data="videos"></player-videos>
</div>
<div>
<player-stats :player="player.data.seasons"></player-stats>
</div>
</div>
</div>
</template>
I am importing the Vue like so:
import Vue from 'vue/dist/vue';
window.Vue = Vue;
And this is how I create Vue instance:
const app = new Vue({
el: 'body',
data: window.videoApp
});
What am I doing wrong, how can I fix this?

You can not select body tag as the main element you need to create a div for your vue instance. You need to create vue instance like this;
const app = new Vue({
el: '#app',
data: {
// Some data...
},
methods: {
// Your methods...
}
})
And your html file should look like this;
...
<body>
<div id="app">
<!-- Vue instance selects and creates components in this div -->
</div>
</body>

Ref: vue-masked-input, shows closing with />
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /></div>
but you don't have the self-close slash, or a closing tag...
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>

This can also occur when there is a component, which exists, imported and referenced in the components but not used in the template
...
</template>
<script>
import UnusedComponent from '#/Shared/UnusedComponent .vue'
export default {
components: {
UnusedComponent ,
},
removing the unused component import and reference will fix it

I want to traverse across the DOM , I am not able to access the data

Here is my html code in which I'm trying to traverse through DOM, basically wahen I click edit link I want to be able to traverse back to {{ $post->body }} to access content it has.
<div class="well imagess">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-md-offset-0 col-sm-offset-0 col-lg-offset-0 col-xs-offset-0 ">
<img src="images/female.png" style="height: 70px; width: 70px;">
</div>
<div class="col-md-10 col-sm-10 col-xs-10 col-lg-10 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-offset-1" style="margin-top: -15px;">
<h5>{{ $post->title }}</h5>
<br>
<p style="margin-top: -15px;">Posted by - <b>{{ $post->user->first_name }} {{ $post->user->last_name }}</b> from <b>{{ $post->user->city }}, {{ $post->user->country }}</b></p>{{ $post->created_at }}
</div>
</div>
<hr>
<div class="row first">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" id="second">
<p style="font-size: 15px;" id="post-body-edit">{{ $post->body }} </p>
</div>
</div>
<div class="well wellcolor1">
<div class="col-xs-2 col-sm-2">
<span style="color: blue;" class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
<span style="color: blue;" class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
</div>
#if(Auth::user() == $post->user)
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3 edit-class">
<a style="margin-right: 70px;" id="edit" href="#" title="Edit"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</div>
#endif
<br>
<div class="3">
Comments
</div>
</div>
and then javascript code
$('.wellcolor1').find('.edit-class').find('#edit').on('click', function(event){
event.preventDefault();
var postBody = event.target.parentNode.parentNode.previousSibling.firstChild.childNodes[1].textContent;
$('#post-body').val(postBody);
$('#edit-modal').modal();
});
I want to get {{ $post->body }} content into the modal, my main concern is to get how we traverse across the dom...

I'm going to go out on a limb here and guess you mean traverse up the DOM. In which case, use: https://api.jquery.com/closest/

selector not working after append inside the .on() click event [duplicate]

This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
class selectors that are produced on the fly with my jquery functions are not working.
here is my jquery:
$(".add-category").on("click",function () {
// var id = $('#row-panel #col-panel').length.toString();
var id2 = ($('#parent-row #child-row').length + 1).toString();
$('#parent-row').append('<div class="row p-10" id="child-row">\
<div class="col-lg-12">\
<div class="panel panel-default panel-grey">\
<div class="panel-body">\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category Name</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
<div class="row p-10">\
<div class="col-lg-4" >\
<label>Category URL</label>\
</div>\
<div class="col-lg-8">\
<input type="text" class="form-control" id="website-url">\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
');
});
$(".remove-category").on("click",function () {
if ($('#parent-row #child-row').length == 1) {
alert("You cannot remove the last form!");
return false;
}
$("#parent-row #child-row:last-child").remove();
});
and here is the mark-up
<div class="panel-body" id="parent-row">
<div class="row p-10">
<div class="col-lg-4">
<label>1 Category</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-lg-offset-6 col-lg-4">
<label>Add Sub Panel</label>
</div>
<div class="col-lg-2">
<a href="#" id="add-category" class="add-category">
<i class="fa fa-plus"></i>
</a>
<a href="#" id="remove-category" class="remove-category">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="row p-10" id="child-row">
<div class="col-lg-12">
<div class="panel panel-default panel-grey">
<div class="panel-body">
<div class="row p-10">
<div class="col-lg-4" >
<label>Category Name</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
<div class="row p-10">
<div class="col-lg-4" >
<label>Category URL</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" id="website-url">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the div that has an id parent-row is inside a dynamic div that is produced on the fly.
here is the jsfiddle: http://jsfiddle.net/fn51hrgv/2/
EDIT:
here is the latest code now and its working perfectly based on the behavior that i want it to be. http://jsfiddle.net/fn51hrgv/4/

try something like this:
$(".panel-body").on("click", ".remove-category",function () {