I try to add like and unlike feature in my facebook clone project. Whenever I click on the like button using ajax only first post working perfectly both like and unlike post. But after second post button will not work neither like nor unlike until reload the whole page. How can I solve that please help me.
This is my web.php
Route::post('/like', [LikeController::class, 'likePost'])->name('likePost');
Route::post('/unlike', [LikeController::class, 'likePost'])->name('unlikePodt');
This is my LikeController.php
public function likePost(Request $request){
$user = Auth::user();
$post_id = $request-> liked;
$post = Post::where('id', $request->liked)->first();
$isLikedAlready = Like::where('user_id', $user->id)->where('post_id', $post_id)->where('liked', true)->first();
if(!$isLikedAlready || $user->id !== $isLikedAlready-> user_id){
Like::create([
'user_id' => $user->id,
'post_id' => $post_id,
'liked' => true,
]);
return response(["message"=>"liked", "likes" => $post->likes->count()]);
}
else{
$isLikedAlready->delete();
return response(["message" => "unliked", "likes" => $post-> likes-> count()]);
}
}
}
ajax code:
<script>
$(".like").on('submit',function(e){
e.preventDefault();
var liked = $('.liked').val();
document.getElementById('likesCounts').innerHTML = "";
$.ajax({
type:'POST',
url:"{{ route('likePost') }}",
data:{
"_token": "{{ csrf_token() }}",
liked: liked,
},
success:function(data){
console.log(data);
$('#likesCounts').html(data.likes);
}
});
});
</script>
facebook.blade.php
<div >
<p id="likesCounts"> {{$post->likes->count() ?: 0 }} </p>
</div>
<form action="{{route('likePost')}}" method="POST" class="like" id="likePostForm">
#csrf
<div class="post-options">
<div class="post-option">
{{-- #if($post->likes && $post->likes->user_id == auth()->user->id) --}}
{{-- <span class="material-icons" style="margin-top: -15px;"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 329.523 291.435"><path d="M320.059 159.554c16.697-16.622 11.538-50.242-17.372-50.242l-76.067.055c2.876-16.12 7.061-42.817 6.891-45.342-1.59-23.875-16.832-52.937-17.475-54.132-2.77-5.166-16.793-12.182-30.9-9.166-18.252 3.903-20.115 15.529-20.038 18.736 0 0 .8 31.829.876 40.309-8.712 19.155-38.781 69.482-47.911 73.36a13.894 13.894 0 0 0-7.217-2.025H14.725C6.592 131.107 0 137.698 0 145.83l.012 132.824c.569 7.166 6.648 12.781 13.842 12.781h86.296c7.652 0 13.88-6.226 13.88-13.877v-4.407s3.21-.22 4.658.698c5.55 3.525 12.417 7.961 21.358 7.961h128.832c48.137 0 42.972-42.74 38.583-48.586 8.132-8.867 13.166-24.48 6.296-36.832 5.319-5.582 14.613-20.941 6.302-36.838z" fill="#37393d"/><path d="M300.508 123.249H209.68c3.506-13.917 9.975-58.275 9.975-58.275-1.467-21.533-15.869-48.553-15.869-48.553-17.117-7.204-24.811 2.678-24.811 2.678s.889 34.219.889 42.125c0 7.907-39.113 71.123-48.669 79.266-5.064 4.317-14.156 10.25-21.56 14.86v102.023l5.932.006c6.829 0 15.219 10.551 24.48 10.551l131.024-.057c26.333 0 30.526-29.662 13.148-32.51l.775-3.275c16.662-1.793 26.797-28.141 5.527-33.546l.781-3.286c15.902-1.674 27.714-27.246 5.521-33.552l.781-3.281c20.892-3.297 25.15-35.17 2.904-35.174z" fill="#0000FF"/><path d="M296.824 161.704l.781-3.281c20.891-3.296 25.149-35.169 2.903-35.174h-43.877c22.251.004 17.992 31.878-2.899 35.174l-.337 1.948c22.194 6.305 9.934 33.211-5.968 34.885l-.337 1.954c21.273 5.404 10.689 33.085-5.971 34.878l-.329 1.941c17.381 2.847 12.737 33.844-13.597 33.844l-87.411.036c.089.003.178.021.264.021l131.024-.057c26.333 0 30.526-29.662 13.148-32.51l.775-3.275c16.662-1.793 26.797-28.141 5.527-33.546l.781-3.286c15.905-1.674 27.716-27.247 5.523-33.552z" fill="#0000FF"/><path fill="#0000FF" d="M13.854 144.989h86.497v132.563H13.854z"/><path d="M13.854 144.989v132.563h86.497V144.989H13.854zM94.78 271.99H19.421V162.125L94.78 162v109.99z" fill="#0000FF"/><path d="M122.701 260.007V146.846c-.192.133-12.115 7.913-13.066 8.503v102.023l5.932.006c2.221 0 4.604 1.125 7.134 2.629z" opacity=".5" fill="#0000FF"/><path d="M191.609 13.794h-.006c.062.248 10.69 39.638 10.69 45.301 0 5.667-32.253 53.75-27.936 59.836 5.882 8.286 35.322 4.317 35.322 4.317 3.506-13.917 9.975-58.275 9.975-58.275-1.467-21.533-15.869-48.553-15.869-48.553-.573-.242-5.495-2.63-12.176-2.626z" fill="#0000FF"/></svg></span> --}}
{{-- #else --}}
<span class="material-icons" style="margin-top: -15px;"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 329.523 291.435"><path d="M320.059 159.554c16.697-16.622 11.538-50.242-17.372-50.242l-76.067.055c2.876-16.12 7.061-42.817 6.891-45.342-1.59-23.875-16.832-52.937-17.475-54.132-2.77-5.166-16.793-12.182-30.9-9.166-18.252 3.903-20.115 15.529-20.038 18.736 0 0 .8 31.829.876 40.309-8.712 19.155-38.781 69.482-47.911 73.36a13.894 13.894 0 0 0-7.217-2.025H14.725C6.592 131.107 0 137.698 0 145.83l.012 132.824c.569 7.166 6.648 12.781 13.842 12.781h86.296c7.652 0 13.88-6.226 13.88-13.877v-4.407s3.21-.22 4.658.698c5.55 3.525 12.417 7.961 21.358 7.961h128.832c48.137 0 42.972-42.74 38.583-48.586 8.132-8.867 13.166-24.48 6.296-36.832 5.319-5.582 14.613-20.941 6.302-36.838z" fill="#37393d"/><path d="M300.508 123.249H209.68c3.506-13.917 9.975-58.275 9.975-58.275-1.467-21.533-15.869-48.553-15.869-48.553-17.117-7.204-24.811 2.678-24.811 2.678s.889 34.219.889 42.125c0 7.907-39.113 71.123-48.669 79.266-5.064 4.317-14.156 10.25-21.56 14.86v102.023l5.932.006c6.829 0 15.219 10.551 24.48 10.551l131.024-.057c26.333 0 30.526-29.662 13.148-32.51l.775-3.275c16.662-1.793 26.797-28.141 5.527-33.546l.781-3.286c15.902-1.674 27.714-27.246 5.521-33.552l.781-3.281c20.892-3.297 25.15-35.17 2.904-35.174z" fill="#fff"/><path d="M296.824 161.704l.781-3.281c20.891-3.296 25.149-35.169 2.903-35.174h-43.877c22.251.004 17.992 31.878-2.899 35.174l-.337 1.948c22.194 6.305 9.934 33.211-5.968 34.885l-.337 1.954c21.273 5.404 10.689 33.085-5.971 34.878l-.329 1.941c17.381 2.847 12.737 33.844-13.597 33.844l-87.411.036c.089.003.178.021.264.021l131.024-.057c26.333 0 30.526-29.662 13.148-32.51l.775-3.275c16.662-1.793 26.797-28.141 5.527-33.546l.781-3.286c15.905-1.674 27.716-27.247 5.523-33.552z" fill="#eaebf5"/><path fill="#7082ad" d="M13.854 144.989h86.497v132.563H13.854z"/><path d="M13.854 144.989v132.563h86.497V144.989H13.854zM94.78 271.99H19.421V162.125L94.78 162v109.99z" fill="#7c8cb0"/><path d="M122.701 260.007V146.846c-.192.133-12.115 7.913-13.066 8.503v102.023l5.932.006c2.221 0 4.604 1.125 7.134 2.629z" opacity=".5" fill="#d0d1d0"/><path d="M191.609 13.794h-.006c.062.248 10.69 39.638 10.69 45.301 0 5.667-32.253 53.75-27.936 59.836 5.882 8.286 35.322 4.317 35.322 4.317 3.506-13.917 9.975-58.275 9.975-58.275-1.467-21.533-15.869-48.553-15.869-48.553-.573-.242-5.495-2.63-12.176-2.626z" fill="#eaebf5"/></svg></span>
{{-- #endif --}}
<input type="hidden" class="liked" id="liked" name="liked" value="{{$post->id}}"/>
<button id="reloader" type="submit" style="border: none; background-color:transparent; color:#737373;"><p>Like</p></button>
{{-- <button type="submit" style="border: none; background-color:transparent;"><p class="{{$post->isLikedBy(current_user()) ? 'text-primary'}}">Like</p></button> --}}
</div>
<div class="post-option">
<span class="material-icons"><i data-visualcompletion="css-img" class="hu5pjgll m6k467ps" style="background-image: url("https://static.xx.fbcdn.net/rsrc.php/v3/y4/r/zz_vrFBDgEM.png"); background-position: 0px -259px; background-size: auto; width: 18px; height: 18px; background-repeat: no-repeat; display: inline-block;"></i></i></span>
<p class="">Comment</p>
</div>
<div class="post-option">
<span class="material-icons"><i data-visualcompletion="css-img" class="hu5pjgll m6k467ps" style="background-image: url("https://static.xx.fbcdn.net/rsrc.php/v3/y4/r/zz_vrFBDgEM.png"); background-position: 0px -316px; background-size: auto; width: 18px; height: 18px; background-repeat: no-repeat; display: inline-block;"></i></span>
<p>Share</p>
</div>
</div>
</form>
And I also want to change the color of like icon, if user liked the post then button will be blue colored and if unlike the post change into default color.
Please help me to solve this problem.
Related
i had implement the click event for the chart and it can filter the data in the table. But now i face the problem of the data does not return all the data in the table when click outside the chart are.How can make it return all the data when click outside the area chart? Thank you. Any help will be appreciated.
<script>
import VueApexCharts from "vue-apexcharts";
import faker from "faker";
export default {
components: {
VueApexCharts,
},
data() {
return {
Lists: [],
selectedData:{},
search1:'',
clicked:'',
clicked1:'',
isLoading1:true,
currentPage: 1,
series: [300, 200, 49, 100,290, 228, 119, 55],
chartOptions: {
colors: ['#7961F9', '#FF9F43', '#196EB0', '#2EAB56','#df87f2','#057FF2', '#14DA6E','#FF5500'],
legend: {
fontSize: "14px",
position: "top",
},
dataLabels: {
enabled: true,
minAngleToShowLabel: 0,
distributed: false,
style: {
colors: ['#111'],
},
background: {
enabled: true,
foreColor: '#fff',
borderWidth: 0,
}
},
chart: {
width: 500,
type: 'pie',
events: {
legendClick: (chartContext, seriesIndex,w, config) => {
this.clicked = w.config.labels[seriesIndex];
console.log(this.clicked);
console.log(seriesIndex);
},
dataPointSelection: (event,chartContext,config) => {
this.clicked1 = config.w.config.labels[config.dataPointIndex];
console.log(this.clicked1);
},
},
},
labels: ['Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'],
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
fontSize: "12px",
},
},
},
],
},
}
},
created() {
this.getData();
this.getData1();
},
computed:{
filterLists(){
let list = this.Lists;
if(this.search1 !=''){
list = list.filter((tr)=>{
return tr.agency.toUpperCase().includes(this.search1.toUpperCase())
});
}
if (this.clicked !=''&& this.clicked){
list = list.filter((tr)=>{
return tr.projectCategory.toUpperCase().includes(this.clicked.toUpperCase())
});
}
if (this.clicked1 !=''&& this.clicked1){
list = list.filter((tr)=>{
return tr.projectCategory.toUpperCase().includes(this.clicked1.toUpperCase())
});
}
return list;
},
},
methods: {
next(page) {},
getData1() {
this.isLoading1 = true;
for (let i = 0; i < this.randInt(8, 4); i++) {
let index = Math.floor(Math.random() * 2);
let projectCategory = this.rotate([
'Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'
]);
this.Lists.push({
projectCategory:projectCategory,
project_name: faker.company.catchPhrase(),
agency: faker.company.companyName(),
logo: faker.image.abstract(),
});
}
this.maxPage = 2;
this.isLoading1 = false;
},
next1(page) {
if (page == -2) {
this.currentPage = 1;
} else if (page == -3) {
this.currentPage = this.maxPage;
} else {
if (
this.currentPage + page < 1 ||
this.currentPage + page > this.maxPage
) {
return;
}
this.currentPage += page;
}
this.showLoader("#card-list");
this.Lists = [];
this.isLoading1 = true;
setTimeout(() => {
this.closeLoader("#card-list");
this.getData1();
}, 1500);
},
},
};
</script>
<style>
#card > header{
padding: 1.5rem 2rem;
background-color: #2E3839;
}
#card{
--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}
.con-img.vs-avatar--con-img img {
object-fit: cover !important;
}
.apexcharts-toolbar {
position:absolute;
margin-right:12px;
}
vs-button.btn:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;
}
</style>
<template>
<div class="mb-base">
<div class="vx-row mb-base">
<div class="vx-col 2/3 w-full mb-base">
<vs-card
id="card"
class="vs-con-loading__container h-full"
>
<template slot="header">
<div class="flex">
<div>
<img
src=""
alt="Info"
class="h-12 inline-block mr-4 object-scale-down"
/>
</div>
<div class="flex flex-col justify-center w-full text-start">
<h3 class="text-white">Source of Fund</h3>
<span class="text-sm text-white">Based on Total Billed (Yearly)</span>
</div>
<div>
</div>
</div>
</template>
<div class="flex flex-wrap mt-2">
<div class="lg:w-1/3 w-full">
<vue-apex-charts
type="donut"
:options="chartOptions"
:series="series"
width="100%"
class="items-center justify-center flex mt-16 content-center"
/>
</div>
<div class="lg:w-2/3 w-full lg:pl-6 pl-0 mt-6">
<div class="flex justify-end items-end">
<vx-input-group class="mb-base lg:w-1/2 w-full">
<template slot="append">
<div class="append-text btn-addon">
<vs-button color="#A9A9A9"><i class="fas fa-search"></i></vs-button>
</div>
</template>
<vs-input
v-model="search1"
placeholder="Project Code or name"
/>
</vx-input-group>
</div>
<div id="card-list">
<vs-list v-if="!isLoading1">
<vs-list-item
v-for="(tr, index) in filtertLists"
:key="index"
class="hover:shadow cursor-pointer text-base mb-4"
>
<template slot="title">
<div
class="flex flex-col ml-2 cursor-pointer"
>
<div class="font-bold">{{ tr.project_name }}</div>
<div>{{ tr.agency }}</div>
</div>
</template>
<template slot="avatar">
<vs-avatar :src="tr.logo"></vs-avatar>
</template>
{{ tr.projectCategory }}
</vs-list-item>
<div v-if="!filterLists.length" class="flex">
<div class="items-center justify-center text-lg font-bold">No record...</div>
</div>
</vs-list>
<div v-else class="flex">
<div class="items-center justify-center">Fetching data...</div>
</div>
</div>
<div class="flex justify-end gap-4">
<div class="flex items-center justify-center text-sm">
Page {{ currentPage }} of
{{ maxPage }}
</div>
<div>
<vs-button
type="filled"
color=" rgba(243, 244, 246)"
class="w-10 mr-2 rounded-md bg-gray-400 text-black btn hover:text-black"
#click="next1(-1)"
>
<i class="fas fa-chevron-left"></i>
</vs-button>
<vs-button
type="filled"
color=" rgba(243, 244, 246)"
class="w-10 mr-2 rounded-md bg-gray-400 text-black btn"
#click="next1(1)"
>
<i class="fas fa-chevron-right"></i>
</vs-button>
</div>
</div>
</div>
</div>
</vs-card>
</div>
</div>
</div>
</template>
I am working with laravel vue pie chart. is there any way to filter the data in the table when click the element of pie chart. For example, when clicked the section pie chart, the table will be filter and display the the data in the table under that section..Any help will be appreciated
It is not possible to point directly to a solution as you have given so little detail. I will still try to explain the logic. For this process, you will get an input from the screen working with Vue.js and you will manipulate a data displayed on Vue.js.
So first; you need to know which part of your pie chart clicked on. I assume the pie chart you are using on your project have some events which triggered when you interact with charts. You will listen that event and catch the value of clicked item.
Now you have the value of clicked item and you need to filter your results by that.
To accomplish that you can use Vue.js Computed Properties and Watchers :https://v2.vuejs.org/v2/guide/computed.html
Lets say you have your data on your Vue.js application:
data () {
return {
clickedItem: null,
itemsOnTable: [ ... ]
}
}
You have all your table content in itemsOnTable and selected item's data in clickedItem
You can use computed to filter your data:
data () {
return {
clickedItem: null,
itemsOnTable: [ ... ]
}
},
computed: {
// filter itemsOnTable if clickedItem have any value
filteredItems: function () {
if(this.clickedItem==null) return this.itemsOnTable;
return this.itemsOnTable.filter(item => item.column = this.clickedItem);
}
}
Now in your Vue.js component you can directly use filteredItems for your table elements v-for
<table>
<tr v-for="items in filteredItems">
<td>{{ item.column }}</td>
<!-- other columns -->
</tr>
</table>
This examples explains basics of interactions and computed properties and aims to help you to understand basics.
Pagination links working fine as normal pages when I refresh the whole page but when i reload just data with ajax pagination does not loading next pages
$.ajax({
url: '{{route('apply.filters')}}',
type:'get',
data: {cities:cities,
category:category
},
success: function (data) {
// $(".contentlist").load(location.href + " .contentlist");
$('.contentlist').html(data);
},
error: function(xhr, status, errorThrown) {
console.log(xhr.responseText);
}
});
this is my controller function
public function filter(Request $request)
{
try {
set_time_limit(390);
$country=null;
if(Auth::check() && $country==null){
$country=Auth::user()->lat->country??'';
}if(Session::has('country') && $country==null){
$country=Session::get('country.0');
}
if(isset($request->cities)){
$data =[
'products' => Product::where([['category',$request->category],['country',$country??'']])->whereIn('city',$request->cities)->where('status',1)->Orderby('id','desc')->paginate(8),
];
}
if(isset($data)){
return response()->json(view('front.home.ajaxindex',$data)->render());
}else{
return redirect()->route('home');
}
} catch(\Exception $e) {
return back()->with('error',$e->getMessage());
}
}
this is my jsscroll function working normally fine but not loading data comes with ajax
$('ul.pagination').hide();
$(function() {
$('.contentlist').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="{{asset('front_assets/images/Spinner-1s-200px.gif')}}" width="100" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.contentlist',
loadOnScroll: false,
callback: function() {
$('ul.pagination').remove();
$('.elements').each(function(){
var thisH = $(this).height();
if (thisH > maxHeight) {
maxHeight = thisH;
}
$(this).height(maxHeight);
});
}
});
});
this is my ajaxindex page this is new page only created for making html which is appended in the main page if data exists
#foreach($products as $product)
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 item-cell">
<div class="listingscontent elements">
#if(\Illuminate\Support\Facades\Auth::guard('admin')->check())
<i id="{{$imgs->id??''}}" onclick="deletes('{{$product->id}}',this)" class="fa fa-close fa-lg pull-right" style="margin-left: -20px; mix-blend-mode: hard-light; color: rgb(0, 255, 255); "></i>
<a style=" position: absolute;" class="pull-left" href="{{route('edit.add',['id' => preg_replace('/-{2,}/','-',str_replace([" ", "'", "/","(",")","#","#"], '-',$product->title??'')).'-'.$product->id??''])}}"> <i class="fa fa-pencil-square-o fa-lg" style="mix-blend-mode: hard-light; color: rgb(0, 255, 255); "></i></a>
#endif
<a style="color: #ea1b25" href="{{route('details',['id' => preg_replace('/-{2,}/','-',str_replace([" ", "'", "/","(",")","#","#"], '-',$product->title??'')).'-'.$product->id??''])}}">
#if(isset($product->atachedImage))
<img class="listings" src="{{asset($product->atachedImage->path.$product->atachedImage->name??'noimage.jpg')}}" title="{{$product->title??''}}_image" alt="">
#else
<img class="listings" src="{{asset('images/noimage.jpg')}}" title="{{$product->title??''}}_image">
#endif
<h5 class="text-capitalize title" title="{{$product->title??''}}">{{str_limit($product->title??'',19)}}</h5></a>
</div>
</div>
#endforeach
{{$products->appends(request()->except('page'))->links()??''}}
I'm actually working on profile picture for users.
I now want to put this profil picture next to their name in my chat which is working with pusher and vuejs.
My img is like this :
<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">
I can not just past it in the file it's not working and it would be for every user, but I want it to be for the auth user. I'm kinda new to vue.js any help would be thankful.
This is my chatMessage.vue :
<template>
<ul class="chat messages" >
<li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
classForUser: (message.user.id === currentuserid),
classForNotUser: (message.user.id !== currentuserid)}" >
<div class="chat-body clearfix" >
<div class="header">
<strong class="primary-font"
v-bind:class="{
classForAuthorSameAsUser: (message.user.id === currentuserid),
classForAuthorDiffThanUser: (message.user.id !== currentuserid)
}">
{{ message.user.firstName }}
{{ message.user.lastName}}
:
</strong>
{{ message.human_readable_time}}
</div>
<p>{{ message.message }}</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages','currentuserid']
};
</script>
<style scoped>
.classForAuthorSameAsUser {
color: lightseagreen ;
}
.classForAuthorDiffThanUser {
color: black;
}
.classForUser{
width: 70%;
left: 30%;
}
.classForNotUser{
width: 70%;
}
</style>
And this is the html of my chat :
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="col-md-12 col-md-offset-2">
<div class="panel-body panel-content" id="mess_cont" :userid="{{Auth::user()->id}}">
<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
</div>
<div class="panel-footer">A
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}">
</chat-form>
</div>
</div>
</div>
</div>
I think I have to use again the thing that help me to get the user id, but I don't really know how it works with vue.js.
Thanks for your time
And now I have this :
<template>
<ul class="chat messages" >
<li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
classForUser: (message.user.id === currentuserid),
classForNotUser: (message.user.id !== currentuserid)}" >
<div class="chat-body clearfix" >
<div class="header">
<strong class="primary-font"
v-bind:class="{
classForAuthorSameAsUser: (message.user.id === currentuserid),
classForAuthorDiffThanUser: (message.user.id !== currentuserid)
}">
<img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>
{{ message.user.firstName }}
{{ message.user.lastName}}
:
</strong>
{{ message.human_readable_time}}
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages','currentuserid'],
data() {
return {
user: null,
}
},
methods: {
this:$http.get('/api/get-auth')
.then((response) => {
this.user = response.data.auth
})
.catch((error) => {
// handle error
}),
}
};
</script>
<style scoped>
.classForAuthorSameAsUser {
color: lightseagreen ;
}
.classForAuthorDiffThanUser {
color: black;
}
.classForUser{
width: 70%;
left: 30%;
}
.classForNotUser{
width: 70%;
}
</style>
And it's not working
As I see, what you want to achieve is to take this img tag (with blade's logic):
<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">
And put it inside your chatMessage.vue component. If that's it, you can do so like this:
1. Create a function inside a controller in order to return the authenticated user information:
public function getAuth()
{
return response()->json([
'auth' => auth()->user(),
], 200);
}
2. Create a new route in order to get that information inside your api.php file:
Route::get('/get-auth', 'YourController#getAuth');
3. Create a new param inside the data() returned object in the chatMessage.vue component:
data() {
return {
user: null,
}
},
4. Create a method inside your chatMessage.vue component with the necessary code to fetch that data:
fetchAuth() {
this.$http.get('/api/get-auth')
.then((response) => {
this.user = response.data.auth
})
.catch((error) => {
// handle error
});
}
5. Call that method inside your created() life cycle method:
created() {
this.fetchAuth();
}
6. Create the img tag like this:
<img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>
I have a Kendo Datepicker that worked perfectly on a div while I was beginning development of a page.
After I got everything all set and working the way it was supposed, I moved the datepicker to a Durandal Modal as was the requirement. The modal works fine, and other databinding is working on the modal, but not the datepicker.
I have tried loading the datepicker at various times in the Durandal lifecycle such as activate, compositionComplete and attached, as well as changing the Z Index to 20000. I am not quite user what I might be missing.
Here is the latest pertinent code:
define([
'durandal/app',
'plugins/router',
'plugins/dialog',
'services/datacontext',
'services/dialogs',
'viewmodels/helpers/vc',
'services/logger',
'services/settings'
],
function (app, router, dialog, datacontext, dialogs, vc, logger, settings) {
var featureSetToEdit;
var startFeaturesDatePicker = null;
var endFeaturesDatePicker = null;
var today = new Date();
var featList = ko.observableArray(['']);
var saving = ko.observable(false);
var isUserInReadOnlyRole = ko.observable(true);
function attached() {
loadDatePickers();
};
function compositionComplete() {
isUserInReadOnlyRole(vc.isUserReadOnly(datacontext.userRole));
};
function loadDatePickers() {
startFeaturesDatePicker = $("#startDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setStartDate,
}).data('kendoDatePicker');
endFeaturesDatePicker = $("#endDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setEndDate,
}).data('kendoDatePicker');
};
var setStartDate = function () {
startFeaturesDatePicker.value($("#startDateFeatureSet").val());
};
var setEndDate = function () {
endFeaturesDatePicker.value($("#endDateFeatureSet").val());
};
function checkboxDivId(featuresKey) {
return 'checkboxDivId' + featuresKey;
};
function edit(featureSetToEdit, fList) {
self = this;
self.featList(fList);
return dialog.show(self);
};
function save() {
};
function cancel() {
dialogs.confirmYesNo('Discard changes to this feature Set?', 'Confirm cancel',
function () {
dialog.close(self, false);
},
function () {
return;
}
);
};
// Definition of viewmodel (list of exposed properties and methods)
var vm = {
featList: featList,
edit: edit,
save: save,
saving: saving,
cancel: cancel,
isUserInReadOnlyRole: isUserInReadOnlyRole,
checkboxDivId: checkboxDivId
};
return vm;
});
HTML
<div class="messageBox autoclose" style="min-height: 330px" >
<div class="modal-header">
<h3>Edit Feature Set</h3>
</div>
<div class="modal-body" style="padding: 2px 5px 2px 5px; background-color: #ddd; min-height: 250px; width: 400px; border: 1px solid silver;">
<table class="k-grid">
<tr class="dataRow" style="padding: 2px;">
<td><span>Start Date</span></td>
<td><input id="startDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>End Date</span></td>
<td><input id="endDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>Features</span></td>
<td id="featuresCheckbox" style="font-size: 10pt; text-align: left" data-bind="foreach: featList">
<input data-bind="attr: { id: $parent.checkboxDivId($data.keyChar), value: $data.keyChar }" type="checkbox" style="margin-bottom:6px;" /> <span data-bind="text: $data.name" style="margin-top:6px;"></span> <br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<div style="float: right">
<span class="icon-spin icon-spinner waiting" data-bind="visible: saving"> </span>
<button class="btn btn-primary" data-bind="click: save, enable: !saving() && !isUserInReadOnlyRole()">Save</button>
<button class="btn btn-default" data-bind="click: cancel, enable: !saving()">Cancel</button>
</div>
</div>
</div>
Can you please take a look and let me know what I might be missing?
So after finding I still needed to load it through the usual Kendo initialization, I searched more until I found that to load it properly I needed the following code in the modal js page:
self = this;
self.compositionComplete = function () {
loadDatePickers();
};
return dialog.show(self);
Now it works exactly the same as a datepicker on a non-modal page.
I hope this helps others to!
I created multiple file uploader dynamically using javascript within the div FileUploadContainer.while i put btnSubmit outside the form tag i get Request.Files.Count as zero.I need to call the PopUp() through Json .If i put btnSubmit inside the form tag
it does not call the Save() on javascript and will call PopUp() method on form submit.
I need to call the PopUp() through Json and need to get the Request.Files.Count .Pls help.
#using (Html.BeginForm("PopUp", "EnergyCatagory", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="FixedHeightContainer">
<div id="FileUploadContainer">
</div>
<input type="button" id="btnAddAttachment" name="btnAddAttachment" class="ZWidgetTitle"
value="Add More Attachments" onclick="AddFileUpload()" />
</div>
<div id="NewAttachment">
<div style="background-color: #DADADA;">
<center>
<label style="font-family: Verdana; font-size: 13px; font-weight: bold; color: black;
height: 30px; width: 100%; padding-top: 20px;" id="lblMessage">
</label>
</center>
</div>
</div>
<div class="horizSep">
</div>
<div id="buttons">
</div>
} <button id="btnSubmit" class="buttons" onclick="Save()">
Attach</button>
function Save()
{$.ajax({
url: '/EnergyCatagory/PopUp',
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
success: function (result) {
alert("success");
}
});
}controller-----
public ActionResult PopUp()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase PostedFile = Request.Files[i];
if (PostedFile.ContentLength > 0)
{
string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
var path1 = Path.Combine(Server.MapPath("~/Files/"), FileName);
//PostedFile.SaveAs(Server.MapPath("Files\\") + FileName);
PostedFile.SaveAs(path1);
return Json(
new
{
CustomMessage = "My message",
});
}
}
If the form is getting submitted and don't calling the function onclick is because the input type is a button, you can change it to html a link tag.
also calling a inline javascript (onclick) is not good practice, i notice you use jquery so why don't do it with jquery?
function Save(){
$.ajax({
url: '/EnergyCatagory/PopUp',
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
success: function (result) {
alert("success");
}
});
$("#btnSubmit").click(function(){
Save();
});
#using (Html.BeginForm("PopUp", "EnergyCatagory", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="FixedHeightContainer">
<div id="FileUploadContainer">
</div>
<input type="button" id="btnAddAttachment" name="btnAddAttachment" class="ZWidgetTitle"
value="Add More Attachments" onclick="AddFileUpload()" />
</div>
<div id="NewAttachment">
<div style="background-color: #DADADA;">
<center>
<label style="font-family: Verdana; font-size: 13px; font-weight: bold; color: black;
height: 30px; width: 100%; padding-top: 20px;" id="lblMessage">
</label>
</center>
</div>
</div>
<div class="horizSep">
</div>
<div id="buttons">
</div>
<a id="btnSubmit" class="buttons">Attach</a>
}
i think you are getting Request.Files.Count equals zero is because you don't have any input type file? do you?