I am working on vue.js rendering dynamic list, When user clicks on a button then the link in corresponding input field renders, then again I am pasting a link in input field and clicking add it adds the value to the second index which I don't want I know I have o use queue concept but here on ui I don't how to implement it
What I have done
new Vue({
el: '#app',
data() {
return {
anchorTags: [{
url: '',
value: ''
}]
}
},
methods: {
validateYouTubeUrl() {
var url = document.getElementById('youtubeUrl').value
this.anchorTags.push({
url: url,
value: url
});
}
}
})
.as-console-wrapper { max-height: 3em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" id="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorTags" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
So What I am trying to do is
To do it like quee like FIFO, when I enter some thing it is on top the again I enter something the latest one should be on top
I allowed myself to make some extra changes, moreover, to give you an answer (I used the v-model):
new Vue({
el: "#app",
data() {
return {
youtubeUrl: null,
anchorTags: []
};
},
methods: {
validateYouTubeUrl() {
this.anchorTags.push({
url: this.youtubeUrl,
value: this.youtubeUrl
});
}
},
computed: {
anchorList() {
return this.anchorTags.slice().reverse();
}
}
});
.as-console-wrapper {
max-height: 3em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=app>
<div class="container-fluid row">
<div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
<div class="input-group">
<input type="text" class="form-control" v-model="youtubeUrl" placeholder="Paste link here...">
<div class="input-group-append">
<button class="btn btn-primary" type="button" #click="validateYouTubeUrl">Add</button>
</div>
</div>
<hr>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
<h3 class="form-control">Playlist</h3>
<hr>
<ul class="list-group">
<li v-for="(anchorTag, k) in anchorList" :key="k" class="list-group-item">
<a :href="anchorTag.url" #click.prevent="playVideo($event)">{{anchorTag.value}}</a>
<span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
</li>
</ul>
</div>
</div>
</div>
If that's not what you meant, edit your question and try to describe it in a more pathological way.
Related
I'm creating a script that retrieves data from api. everything was successful, but when I wanted to enter another film title it didn't want to refresh the existing data but added new data to the previous data.
function loadContent() {
let $ = jQuery;
let id = $('#titless').val();
var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=" + id + "&page=1&include_adult=false";
fetch(url)
.then(res => res.json())
.then(data => {
$.each(data.results, function(i, item) {
$('#atas').each(function() {
$('<div />', {
'class': 'col-md-2 my-2 mx-2 align-center',
'id': 'yaa',
'style': 'border: solid;',
// 'html' : ``,
'html': [
`<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
<h3 class="title">${data.results[i].title}</h3>
<h1 class="title">${data.results[i].id}</h1>
`
],
appendTo: this
})
});
});
});
}
this is my html script
<div class="container">
<h1 class="mt-4">Punten</h1>
<div class="row">
<div class="col bg-dark">
<div class="row">
<div class="col my-4 d-flex justify-content-container">
<input type="text" class="form-control" id="titless">
<button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
</div>
</div>
<div class="col mb-5">
<div class="card">
<div id="atas" class="card-body row">
</div>
</div>
</div>
</div>
</div>
</div>
You just need to clear the previous content with empty
Also, you don't need the each method over #atas since it's a unique element, just append your new elements like this: $('#atas').append(newElement);
function loadContent() {
let $ = jQuery;
let id = $('#titless').val();
var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=" + id + "&page=1&include_adult=false";
fetch(url)
.then(res => res.json())
.then(data => {
/* SOLUTION */
$('#atas').empty();
$.each(data.results, function(i, item) {
$('#atas').append(
$('<div />', {
'class': 'col-md-2 my-2 mx-2 align-center',
'id': 'yaa',
'style': 'border: solid;',
// 'html' : ``,
'html': [
`<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
<h3 class="title">${data.results[i].title}</h3>
<h1 class="title">${data.results[i].id}</h1>
`
]
})
);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1 class="mt-4">Punten</h1>
<div class="row">
<div class="col bg-dark">
<div class="row">
<div class="col my-4 d-flex justify-content-container">
<input type="text" class="form-control" id="titless">
<button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
</div>
</div>
<div class="col mb-5">
<div class="card">
<div id="atas" class="card-body row">
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to figure out what I am missing here. I am trying to pre-fill some data for a user profile page. That pre-fill data is coming from a Firestore DB collection. I have been able to prefill existing fields when editing requests, however, I am stumped at the user profile portion. I've included a link to a video showing what I am seeing. Also here is an error I am getting:
vue-firestore.js?73c3:1 Uncaught (in promise) Error: This document (profile) is not exist or permission denied.
at Object.eval [as next] (vue-firestore.js?73c3:1)
at next (index.cjs.js?e89a:21048)
at eval (index.cjs.js?e89a:19341)
Video of my issue
I believe I am experiencing a problem with one of the following files. I can supply more info if needed.
Login.vue
<template>
<div class="login">
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Signup</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<h5 class="text-center">Login Please</h5>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" #keyup.enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="login">Login</button>
</div>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
<h5 class="text-center">Create New Account</h5>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" v-model="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="register">Signup</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {fb, db} from '../firebase'
export default {
name: "Login",
props: {
msg: String
},
data(){
return {
name: null,
email: null,
password: null
}
},
methods:{
login(){
fb.auth().signInWithEmailAndPassword(this.email, this.password)
.then(() => {
$('#login').modal('hide')
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
},
register(){
fb.auth().createUserWithEmailAndPassword(this.email, this.password)
.then((user) => {
$('#login').modal('hide')
// Add a new document in collection "profiles"
db.collection("profiles").doc("user.user.uid").set({
name: this.name,
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is the Profile.vue
<template>
<div class="profile">
<div class="container">
<div class="intro h-100">
<div class="row h-100 align-items-center">
<div class="col-md-6 ml-3">
<h3>Profile settings</h3>
<p>
Change your profile settings here
</p>
</div>
<div class="col-md-5">
<img src="/img/svg/profile.svg" width="300" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="profile-content">
<ul class="nav nav-pills ml-3" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false">Account settings</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="profile.phone" placeholder="Phone" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" v-model="profile.address" placeholder="Address" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" #click="updateProfile" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="container">
<div class="row">
<div class="col-md-">
<div class="alert alert-info">
Please use the Reset password email button for reseting the password. The form doens't work currently
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.name" placeholder="User name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.email" placeholder="Email address" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.password" placeholder="New password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="file" #change="uploadImage" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="button" #click="resetPassword" value="Reset password email" class="btn btn-success w-100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { fb, db } from '../firebase';
export default {
name: "Profile",
components: {
},
props: {
msg: String
},
data(){
return {
profile: {
name:null,
phone:null,
address:null,
postcode:null
},
account:{
name:null,
email:null,
photoUrl:null,
emailVerified:null,
password:null,
confirmPassword:null,
uid:null
}
}
},
firestore(){
const user = fb.auth().currentUser;
return {
profile: db.collection('profiles').doc(user.uid),
}
},
methods:{
resetPassword(){
const auth = fb.auth();
auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
Toast.fire({
type: 'success',
title: 'Email sent'
})
}).catch((error) => {
console.log(error);
});
},
updateProfile(){
this.$firestore.profile.update(this.profile);
},
uploadImage(){
}
},
created(){
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import jQuery from "jquery";
import { fb } from "./firebase";
import VueFirestore from "vue-firestore";
import Swal from "sweetalert2";
Vue.use(VueFirestore, {
key: "id",
enumerable: true
});
window.Swal = Swal;
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
window.$ = window.jQuery = jQuery;
Vue.use(VueFirestore);
import "popper.js";
import "bootstrap";
import "./assets/app.scss";
Vue.component("Navbar", require("./components/Navbar.vue").default);
Vue.component("NavAdmin", require("./views/NavAdmin.vue").default);
Vue.component("Requests", require("./views/Requests.vue").default);
Vue.component(
"ViewBulkRequest",
require("./views/ViewBulkRequest.vue").default
);
Vue.config.productionTip = false;
let app = "";
fb.auth().onAuthStateChanged(function(user) {
if (!app) {
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});
This was not resolved, we simply switched over to some new code. Thank you.
I'd like to hide correctly the panel and the navbar only in the login page. After login I'd like to show them. I achieve this task partially, because my code has a bad side effect. When I open the app I saw my login page but for few second the navbar appears and then disappears. I'd like to access on login page without this effect. I'd like to see immediatly the login page without them.
How can I solve it?
I declared them in my index.html
<div id="app">
<div class="panel panel-left panel-cover">
<div class="navbar color-theme-green ">
<div class="navbar-inner sliding">
<div class="title">Menu</div>
</div>
</div>
<div class="block">
<div class="list links-list">
<ul>
<li>
<a href="/home/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">graph_square</i>
<i class="material-icons md-only">dashboard</i>
</div>
<div class="item-inner">
<div class="item-title">Home</div>
</div>
</div>
</a>
</li>
<li id="company" style="display:none;">
<a href="/company/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Top Navbar -->
<div class="navbar color-theme-green">
<div class="navbar-inner sliding">
<div class="left">
<a class="link panel-open">
<i class="f7-icons ios-only">menu</i>
<i class="material-icons md-only">menu</i>
<!--<span class="ios-only">Back</span>-->
</a>
<a class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">My app</div>
</div>
</div>
<div class="view view-main"></div>
This is my config file app.js where I show and hide the elements on pageInitEvent
var $$ = Dom7;
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'myApp',
// App id
id: 'it.myapp.myApp',
theme: 'auto',
version: '0.0.1',
cacheDuration: 0,
cache: false,
stackPages: true,
preloadPreviousPage: true,
panel: {
swipe: 'right',
swipeNoFollow: true
},
/**
* Routes
*/
routes: [
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
page.router.clearPreviousHistory();
}
},
},
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
}
},
}
}
And finally this is my login.html page where I put no-navbar in orderd to hide it.
<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
<!-- Login form -->
<form id="form-login">
<div class="row justify-content-center">
<div class="col-100 tablet-80 desktop-50">
<div class="card head-card-forest">
<div class="card-header">
<span></span><h2>Login</h2><span></span>
</div>
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="row">
<a class="col button button-fill" id="button-login" onclick="getLogin()"> Accedi </a>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div><!--.row-->
</form>
</div> <!-- ./ page-content -->
Best thing is hide navbar before init or while its mounted
You can try these two
1:Beforeinit
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageBeforeIn: function(){
app.navbar.hide('.navbar');
}
},
}
2:When its injected to DOM an
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageMounted: function(){
app.navbar.hide('.navbar');
}
},
}
pageInit will be triggered once required components and navbar is loaded
you can hide the panel in the login page using pageInit event
pageInit : function (e,p) { p.app.panel.left.hide() }
I have the following code:
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="(result,i) in results" :key="i" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc" ></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" #click="getData(i)" >Details</a>
</div>
</div>
</div>
</div>
</div>
And I want to parse these col-sm-6 divs generated by a v-for loop (Vue.js).The goal is to make them visible 5 by 5.First they have to be all invisible -> event handler -> 5 visible -> event handler -> 10 visible and so on...
And I think I need to parse them.The {{result.title}} and result.prevDesc are perfectly working,no worries about that.
You could keep your results array and create another one called shownResults that doesn't contain initially any result, but when you click showMore button you will have 5 results pushed to that array and shown, if you click again you'll have 10 results shown and so on,
new Vue({
el: '#app',
data() {
return {
bound:0,
results:[
{
title:"title1",
prevDesc:"desc1"
},
{
title:"title2",
prevDesc:"desc2"
},
{
title:"title3",
prevDesc:"desc3"
},
{
title:"title4",
prevDesc:"desc4"
},
{
title:"title5",
prevDesc:"desc5"
},
{
title:"title7",
prevDesc:"desc7"
},
{
title:"title8",
prevDesc:"desc8"
}
],
shownResults:[]
}
},
methods:{
showMore(){
this.bound+=5;
this.shownResults=this.results.slice(0,this.bound);
},
getData(i){
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<div class="container-fluid" id="networdapp" >
<div class="row" >
<div v-for="(result,i) in shownResults" :key="i" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc" ></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" #click="getData(i)" >Details</a>
</div>
</div>
</div>
<a class="btn btn-info" style="height:40px" #click="showMore" >Show more</a>
</div>
</div>
</div>
hi guys I have a blog post page and comment and reply system. Everything works fine except one thing:
When I try to add a reply to a comment, I am always replying to the first comment. I think my fault is I can't reach the specific comment id when I click. Here is my html and ajax code:
HTML CODE
<div class="card" style=" margin-bottom:30px;">
<div class="card-header">
<a class="h3">#Model.Header</a>
<br />
<br />
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<p style="font-size:small">
<b>Kategori: </b> #Model.Category.CategoryName ,<b>Makale Sayısı :</b> #Model.Category.Articles.Count()
<b>Yorum Sayısı :</b> #Model.Comments.Count() <br />
<b>Yayımlanma Tarihi: </b> #String.Format("{0: d MMMM yyyy}", Model.Date) ,<b>Etiketler:</b><i class="fa fa-tags"></i> #Model.Tags.Count()
</p>
<p style="font-size:small;">
<img class="rounded-circle img-fluid" style="width:100px;height:100px;" src="#Model.User.Photo" alt="#Model.User.FullName" />
Posted by:
#Model.User.UserName
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<img id="articlephoto" style="width:100%; height:350px" class="rounded float-left" src="#Model.Photo" alt="Card image cap">
</div>
</div>
<div class="row" style="margin-top:20px">
<div class="col-md-12 col-xs-12 col-xl-12">
<p>#Html.Raw(Model.Paragraph)</p>
<p style="font-size:small">
<b>Etiketler:</b>
#foreach (var item in Model.Tags)
{
<span class="tag">#item.TagName,</span>
}
</p>
</div>
</div>
</div>
</div>
<h4>Comments</h4>
<hr />
#foreach (var item in Model.Comments.ToList())
{
<!-- Single Comment -->
<div class="media mb-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body" style="width:400px;">
<h5 class="mt-0">#item.User.UserName</h5>
<p style="word-break:break-all">
#item.Paragraph
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteComment/#item.CommentId">
Delete
</a>
<a class="btn btn-warning replybutton" href="#replyform">
Reply
</a>
}
</p>
<p style="font-size:small"><b>Yorum Tarihi:</b>#String.Format("{0: d MMMM yyyy}", item.Date)</p>
<span id="astar" class=""> #item.CommentId</span>
#foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
{
<div class="media mt-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body">
<h5 class="mt-0">#reply.User.UserName</h5>
<p>#reply.Paragraph</p>
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteReply/#reply.ReplyCommentId">
Sil
</a>
}
</div>
</div>
}
</div>
</div>
<hr />
}
#if (Session["UserId"] != null)
{
<!-- Comments Form -->
<div id="commentform" class="card my-4">
<h5 class="card-header">Yorum Yap:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea id="comment" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary">Yorum Yap</button>
</form>
</div>
</div>
<div id="replyform" class="card my-4 d-none">
<h5 class="card-header">Cevap Yaz:</h5>
<div class="card-body">
<div class="form-group">
<textarea id="replytext" name="replytext" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="reply" name="reply" class="btn btn-primary">Cevap Yaz</button>
</div>
</div>
}
else
{
<div class="row" style="margin-bottom:30px;">
<div class="col-md-6">
<h3 class="alert- alert-heading">Yorum Yapabilmek İçin Üye Girişi Yapmalısınız.</h3>
</div>
</div>
}
AND my javascript ajax code
<script type="text/javascript">
$(document).ready(function () {
$("#reply").click(function (e) {
var r_comment = $("#replytext").val();
var r_commentid = parseInt($("#astar").html());
$.ajax({
url: '/Home/ReplyComment/',
data: { replycomment: r_comment, articleid:#Model.ArticleId, commentid: r_commentid },
type: 'POST',
dataType: 'json',
success: function (data) {
alert("Cevap gönderildi");
window.location.reload();
}
});
});
})
</script>
My problem is that I can't catch the specific comment id when I click the reply button. I am getting the comment id from <span id="astar" class=""> #item.CommentId</span>
"When I try to add a reply to a comment, I am always replying to the first comment. " - it's because all your comments have the same ID and jQuery selects the first matching element.
All comments need to have a unique ID. I don't know what language that loop is in but you need to increment the ID. So astar-1, astar-2, astar-3 etc...
Example;
$(document).ready(function(){
var valueBox = document.getElementById('value-box');
$('.reply').on('click', function(){
var comment = $(this).prev().attr('id');
valueBox.innerHTML += '<br />Reply to comment: ' + comment;
console.log(comment);
});
});
.comment::after {
display: table;
content: ' ';
clear: both;
}
span {
display: block;
float: left;
width: 45%;
}
.reply {
display: block;
float: right;
width: 45%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment">
<span id="comment-1">Yorum 1</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-2">Yorum 2</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-3">Yorum 3</span>
<div class="reply">Cevapla</div>
</div>
<div id="value-box">
</div>