I got some error when im updating the div content in my laravel project. I use the setInterval method. But when i put my route in the load parameter it throws me an error. Can someone know why Im getting this error?
shownews.blade.php
<h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
{{$news->comments()->count()}}
Comments</h4>
<div class="row" >
<div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
width: 400px; " id="commentarea" >
#foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
<img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">
<div class="author-name">
<h4>{{$comment->name}} </h4>
<p class="author-time"> {{ date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
</div>
</div>
<div class="comment-content">
{{$comment->comment}}
</div>
</div>
#endforeach
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$('#commentarea').load('{{ action('NewsController#showNews') }}');
}, 1000);
});
</script>
web.php
Route::group(['middleware'=>['web']], function(){
Route::get('/article/{id}', 'NewsController#showNews')->name('article');
});
//comments
Route::post('comments/{news_id}', ['uses' => 'CommentsController#store', 'as' => 'comments.store']);
Error Message:
Missing required parameters for [Route: article] [URI: article/{id}]. (View: D:\coindeoro_admin\adminPanel\resources\views\coin\shownews.blade.php)
The error is pretty clear no ? Your controller function is expecting an $news_id parameter to work.
Just pass the news ID in your route :
$('#commentarea').load('{{ action('NewsController#showNews', ['news_id' => $news->id]) }}');
Related
Sorry for the next question, Im really new on VUE.
I have a button on my blade, when I do it click I want to retrieve the info of the customer depend of the ID that get on my controller, I get the ID #3 and I click on CUSTOMER INFO Button, I want to see the info of this customer from the database
This is my function on my Controller CustomersController.php
public function showcustomers($idcustomer)
{
$Customers = Customers::find($idcustomer);
return view('showcustomer',
['Customers' => $Customers]);
}
And this is my button on Blade showcustomer.blade.php :
<div id="cita">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6">
<button v-on:click="showinfo = !showinfo" type="button" class="w3-btn w3-blue" style="width:100%">CUSTOMER INFO</button>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="container align-content-between">
<div class="row text-center">
<div class="col-md-12 col-xl-12">
<information v-if="!showinfo"></information>
</div>
</div>
</div>
</div>
My app.js
Vue.component('information', require('./components/information.vue').default);
var app = new Vue({
el: '#cita',
data: {
showinfo: true,
}
});
And finally my information.vue
<template>
<div id="information">
<h4>Information {{ Customers.name }}</h4>
</div>
</template>
<script>
export default {
name: "information"
}
</script>
<style scoped>
</style>
Standard way of doing that is you will be implementing an ajax request where your front-end or Vue will fetch the necessary information from back-end via ajax request.
Another way of achieving that is you will be using properties or attributes in VUE
from your information.vue add a props maybe customerName or orderId or both
<template>
<div id="information">
<h4>Information {{ customerName }}</h4>
<h4>ID {{ orderID }}</h4>
</div>
</template>
<script>
export default {
props:["customerName","orderID"],
name: "information"
}
</script>
<style scoped>
</style>
in you showcustomer.blade.php you can pass the data from php to your vue by adding attributes based on the property name declared on you vue template
<information customer-name="John Mahu" order-id="0099812-ABC" v-if="!showinfo"></information>
or populate from your PHP variable
<information customer-name="{{ $Customers->customer_name }}" order-id="{$Customers->some_order_id}" v-if="!showinfo"></information>
Read more about vue props
https://v2.vuejs.org/v2/guide/components-props.html
i want to add a function using laravel and vuejs and axios but it gives me error Error: "Request aborted".if I delete form validation system and checkForm function it all works well,really i don't know what error sign what,what kind of error.
fonction.blade.php
<section id="main-content">
<section class="wrapper">
<div class="container" id="app">
<div id="login-page">
<div class="form-login">
<div class="login-wrap">
<form #submit="checkForm">
<div v-if="errors.length">
<div class="alert alert-danger" role="alert">
<ul>
<li v-for="error in errors">#{{ error }}</li>
</ul>
</div>
</div>
<input type="text" class="form-control" id="fonction" name="fonction" v-model="fonction.fonction" placeholder="fonction">
<br>
<button class="btn btn-theme" #click="addFonction">AJOUTER FONCTION</button>
</form>
</div>
</div>
</div>
</div>
</section>
</section>
<script src="{{asset('js/vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
vuejs
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
'url' => url('/')
]) !!};
</script>
<script>
var app = new Vue({
el: '#app',
data: {
errors: [],
fonctions:[],
fonction:{
fonction :''
}
},
methods:{
checkForm: function (e) {
if (this.fonction.fonction) {
return true;
}
this.errors = [];
if (!this.fonction.fonction) {
this.errors.push('fonction required.');
}
e.preventDefault();
},
addFonction:function(){
axios.post(window.Laravel.url+'/addfonction/', this.fonction)
.then(response => {
//console.log(response.data);
this.fonctions.unshift(this.fonction);
this.fonction={
fonction:''
}
})
.catch(error=>{
console.log(error);
})
},
},
});
</script>
SalarieController.php
public function addFonction(request $request){
$fonction = new Fonction;
$fonction->fonction = $request->fonction;
$fonction->save();
Response()->json(['etat' => true]);
}
Same question, maybe it connect with <form> tag.
I am solve for myself by replace <form> this tag with <div> tag. Also I replace all submit events with click ones on button.
So I have my car project and I want my cars to be Likeabel. So I installed overtrue likeable with composer require overtrue/laravel-follow, and do everything that is required. I followed tutorial from here.
So this is my code. My CarsController#ajaxRequest:
/**
* Show the application dashboard.
*
* #return \Illuminate\Http\Response
*/
public function ajaxRequest(Request $request){
$car = Car::find($request->id);
$response = auth()->user()->toggleLike($car);
return response()->json(['success'=>$response]);
}
This is my route in web.php : Route::post('ajaxRequest', 'CarsController#ajaxRequest')->name('ajaxRequest');.
This is my cars index.blade.php:
#foreach($cars as $car)
#if($car->placeni_status != 0)
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-id="{{ $car->id }}">
<div class="auto-listing">
<div class="cs-media auto-media-slider">
#foreach (explode('|', $car->fotografije) as $fotografija)<?php $img = explode('|', $car->fotografije); ?>
<figure>
<img src="/slike_oglasa/{{$fotografija}}" alt="#"/>
<figcaption>
<span class="auto-featured">PREMIUM</span>
<i class="icon-play3"></i>
<div class="cs-photo">8 Photos</div>
</figcaption>
</figure>
#endforeach
</div>
<div class="auto-text">
<span class="cs-categories">Timlers Motors</span>
<div class="post-title">
<h4>{{$car->naslov}}</h4>
<h6>{{$car->naslov}}</h6>
<div class="auto-price"><span class="cs-color">{{$car->cijena}} €</span> <em>{{$car->vrsta_cijene}}</em></div>
<img src="assets/extra-images/post-list-img1.jpg" alt=""/>
</div>
<ul class="auto-info-detail">
<li>Godiste<span>{{$car->godiste}}</span></li>
<li>Kilometraza<span>{{$car->kilometraza}}</span></li>
<li>Mjenjac<span>{{$car->mjenjac}}</span></li>
<li>Gorivo<span>{{$car->gorivo}}</span></li>
</ul>
<div class="btn-list">
<div id="list-view" class="collapse">
<ul>
<li><b>Marka:</b> {{$car->marka}}</li>
<li><b>Model:</b> {{$car->model}}</li>
<li><b>Kubikaza:</b> {{$car->kubikaza}}cc</li>
<li><b>Kilovata:</b> {{$car->kilovata}}kW</li>
<li><b>Konjska snaga:</b> {{$car->konjska_snaga}}ks</li>
<li><b>Registrovan do:</b> {{$car->registracija}}</li>
</ul>
</div>
</div>
<div class="cs-checkbox">
<input type="checkbox" name="list" value="check-listn" id="check-list">
<label for="check-list">Uporedi</label>
</div>
<i id="like{{$car->id}}" class="glyphicon glyphicon-thumbs-up {{ auth()->user()->hasLiked($car) ? 'like-post' : '' }}"></i> <div id="like{{$car->id}}-bs3">{{ $car->likers()->get()->count() }}</div>
<label for="check-list1" style="text-transform: uppercase; color:gray;font-size: 11px;padding-left: 10px;"> {{$car->user->city}}</label>
Pogledajte vise<i class=" icon-arrow-long-right"></i>
</div>
</div>
</div>
#else
And this is script for like system:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){
var id = $(this).parents(".panel").data('id');
var c = $('#'+this.id+'-bs3').html();
var cObjId = this.id;
var cObj = $(this);
$.ajax({
type:'POST',
url:'/ajaxRequest',
data:{id:id},
success:function(data){
if(jQuery.isEmptyObject(data.success.attached)){
$('#'+cObjId+'-bs3').html(parseInt(c)-1);
$(cObj).removeClass("like-post");
}else{
$('#'+cObjId+'-bs3').html(parseInt(c)+1);
$(cObj).addClass("like-post");
}
}
});
});
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
});
</script>
But when I press like and inspect it in console it shows me error:
jquery.js:4 POST http://localhost:8000/ajaxRequest 419 (unknown status)
and in preview it shows me this:
{message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…}
message: "CSRF token mismatch."
exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "C:\engineering\xampp\htdocs\autoplac\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php"
line: 208
trace: [{,…},…]
You can add the route to App\Http\Middleware\VerifyCsrfToken ,$except array to disable csrf check for specific route.
Or you can submit your csrf token in your ajax request
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
check the doc
im new to laravel and i dont know how to do this.
i want to insert this #{{comment.user.avatar}}
inside this <img src={{ asset("images/profile/{comment.user.avatar}") }} />
what im getting is this
<img src="http://localhost:89/images/profile/{comment.user.avatar}">
what i want is
<img src="http://localhost:89/images/profile/avatarpicture.jpg">
this is my complete code
<div class="card" v-for="comment in comments">
<div class="card-content">
<div class="media">
<div class="media-left">
<img src={{ asset("images/profile/") }}#{{comment.user.avatar}} style='height:50px; width:50px' />
</div>
<div class="media-content">
<p class="subtitle is-6">#{{comment.user.firstname}} said...</p>
<p>
#{{comment.body}}
</p>
<span style="color: #aaa;" class="is-size-7">on #{{comment.created_at}}</span>
</div>
</div>
</div>
</div>
and this is my javascript
#section('scripts')
<script>
const app = new Vue({
el: '#app',
data: {
comments: {},
commentBox: '',
post: {!! $post->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!}
},
mounted(){
this.getComments();
// this.listen();
},
methods:{
getComments(){
axios.get(`/api/posts/${this.post.id}/comments`)
.then((response) => {
this.comments = response.data
})
.catch(function(error){
console.log(error);
})
},
}
});
</script>
thank you in advance
arnel
Vue interpolation cannot be used inside HTML attributes. You must bind an expression and wrap it in quotes. Note :src is short hand for v-bind:src.
<img :src="'{{ asset("images/profile/") }}' + comment.user.avatar">
By doing this, you're binding the concatenated string:
'http://localhost:89/images/profile/' + comment.user.avatar
I'm trying to implement an infinite scrolling based on this tutorial.
Couldn't be simpler, right? well... It's not working. This is my code here:
In the route file (I didn't put it in a controller because was a simple test)
Route::get('/', function(){
$articles = \App\Article::paginate(1);
return view('home')->with('articles', $articles);
});
In home.blade.php
<div class="infinite-scroll">
#foreach($articles as $article)
<article class="post">
<header>
<div class="title">
<h2>{{ $article->title }}</h2>
</div>
</header>
</article>
#endforeach
</div>
{{ $articles->links() }}
At the bottom of that same file
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
debug: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
There's absolutely nothing in the console. Like nothing is happening.
I'm missing something, but I don't know what. Do you see something wrong? Thanks!
Ps. I also changed contentSelector: '.infinite-scroll' to contentSelector: 'div.infinite-scroll',. But nothing.
Your pagination is outside the infinite-scroll.
Try
<div class="infinite-scroll">
#foreach($articles as $article)
<article class="post">
<header>
<div class="title">
<h2>{{ $article->title }}</h2>
</div>
</header>
</article>
#endforeach
{{ $articles->links() }}
</div>
Try like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('document').ready(function(){
$('.infinite-scroll').jscroll({
autoTrigger: true,
debug: true,
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
});
</script>