Closed aprilmintacpineda closed 7 years ago
$(document).on('click','#commentForm',function(){
var id = $(this).find('#commentable_id').val();
$('#id').val(id);
});
ayan boss kaya may ganyan dyan kukunin nya yung value ng #commentable_id kapag naclick ng user yung comment input
aa edi ano pang silbi nung <input type="hidden" id="id">
?
dyan nya iistore yung value ng article wait paliwanag ko ahaha
kapag naclick ng user yung textarea kukunin ng ajax ko yung yung value ng #commentable_id tapos iistore nya yung nakuha nyang value sa #id tapos isusubmit na nya
yan yung nakukuha niyang input sa backend ibigsabihin yan lang yung ibinibigay ng ajax mo. yan ay dahil sa ang value ng commentable_id mo ay undefined
kasi ang kinukuha niyang value ay yung laman ng <input type="hidden" id="id">
kaya ko natanong sayo, so pagka click ng user ng submit, wala pang value
yang input na yan: var commentable_id = $('#id').val();
dito yan sa part na to:
var body = $('#body').val();
var commentable_id = $('#id').val();
var user_id = $('#user_id').val();
// var data = $(this).serialize();
// var post = $(this).attr('method');
$.ajax({
url:'/comments',
type: 'POST',
data:{'commentable_id':commentable_id,'user_id':user_id,'body':body},
success:function(data){
$('#comments').load(location.href + ' #comments');
console.log(data);
$('input[type="text"],textarea').val('');
}
});
});
ang ginawa ko: ang kinuha ko ay yung value
ng <input type="hidden" name="commentable_id" value="{{ $article->id }}" id="commentable_id">
kasi yun yung may laman na $article->id
ee kung san ko gustong mag comment diba, after that eto na yung nakukuha nung resource route mo sa UserCommentController::store
after fixed: nag comment ako sa articles/1
success
nag comment din ako sa articles/10
success
fixed na boss.
Ahhh Ganun nag karoon pla ng error dyan nung nilagay ko yung id na walang value. eh boss try mo mag comment sa article dun sa may feed
eto na yung laman ng DB after nun, nag matched na yung commentable_id
Ahhh Ganun nag karoon pla ng error dyan nung nilagay ko yung id na walang value. eh boss try mo mag comment sa article dun sa may feed
anong feed?
walang laman boss eh ahahahha
paano yan boss? XD
oo nga nuh boss walang value yung commentable id dito saklap ahahaha
anong file yung nag ha handle ng news feed
na yan boss?
index.blade.php rin yan boss eh
tinanggal ko na yung sabi mo boss aha salamat
nag kakaron ng pagkakaiba diyan boss sa paghahandle sa javascript, kasi madami ka ng forms ee, tapos yung mga forms na yun hindi na yun alam ng javascript mo, ang alam lang niya isang form lang, so nung nag submit ka kahit anong submit button pa man ang i-click mo ang kukunin niya lagi ay yung mga values ng pinaka unang form mo. nung nag comment ako sa ibang article sa news feed, dun nag appear sa unang form tapos naging BLANK yung comment ko, so hindi niya na picked up yung actual comment ko sa ibang form:
mas complicated na yung pag ha handle pagka madaming form, kasi dapat ma-identify mo sila isa isa, imagine mo sila as an array something like this sa PHP
$forms = [
'form_1' => [
'body' => ''
'commentable_id' => ''
],
'form_2' => [
'body' => ''
'commentable_id' => ''
],
'form_3' => [
'body' => ''
'commentable_id' => ''
]
]
ganyan mo din sila iha-handle sa javascript mo, like an array... tapos di na uubra yung mga ID pagka ganyan kasi ang nangyayari every loop nagkakaron ng identical fields na may identical ID gaya nung id="commentable_id"
so pagka nagkaron na ng madaming ganyan ang gagawin ni javascript yung pinaka unang field na makikita niya (which is yung nasa unahan) yun yung kukunin niya. Sa madaling salita hindi na applicable yung ginagawa mo pagka madaming forms sa iisang page.
Ahhhh Ganun ba boss takte hirap pala nyan AHAHAHA ibahin ko nlang kaya style ko kapag gusto nya mag comment mapupunta nlang sa mismong article id yung parang sa readmore ahahaha so ganto ba yan boss sa isang page example may 5 articles ako kada isang page, edi dapat 5 na array rin ilalagay ko sa javascript ko?
suggest ko sayo boss, yung mga forms mo lagyan mo ng ganto class="comment-forms"
tapos sa javascript mo something like this:
$(document).ready(function() {
$('.comment-forms').each(function(index, comment_form) {
$(comment_form).on('submit', function(submitEvent) {
submitEvent.preventDefault();
console.log('form', index, 'was submitted');
});
});
});
this way magagawa mo yung sinabi ko sayo, nasa array na yung mga forms mo at pwede mo na silang ma identify ngayon, madali lang naman to sa JQUERY kaysa sa Vanilla Javascript ee...
sa app.blade.php
mo ipalit mo to sa pinaka last sa script
mo:
<script type="text/javascript">
$(document).ready(function() {
$('.comment-forms').each(function(index, comment_form) {
$(comment_form).children();
$(comment_form).on('submit', function(submitEvent) {
submitEvent.preventDefault();
console.log('form', index, 'was submitted');
});
});
});
// $(document).ready(function(){
// $.ajaxSetup({
// headers: {
// 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
// }
// });
// function readURL(input){
// if(input.files && input.files[0]){
// var reader = new FileReader();
// reader.onload = function(e){
// $('#showImage').attr('src', e.target.result);
// }
// reader.readAsDataURL(input.files[0]);
// }
// }
// $('#inputImage').change(function(){
// readURL(this);
// });
// // $(document).on('click','#submit',function(event){
// // var body = $('#body').val();
// // var commentable_id = $('#commentable_id').val();
// // var user_id = $('#user_id').val();
// // $.post('comments',{'body':body,'commentable_id':commentable_id,'user_id':user_id,'_token':$('input[name=_token]').val()},function(data){
// // location.reload();
// // });
// // });
// $(document).on('click','#commentForm',function(){
// var id = $(this).find('#commentable_id').val();
// $('#id').val(id);
// });
// $(document).on('click','#submit',function(e){
// e.preventDefault(); // Prevent Default Submission
// var body = $('#body').val();
// var commentable_id = $('#commentable_id').val();
// var user_id = $('#user_id').val();
// // var data = $(this).serialize();
// // var post = $(this).attr('method');
// $.ajax({
// url:'/comments',
// type: 'POST',
// data:{'commentable_id':commentable_id,'user_id':user_id,'body':body},
// success:function(data){
// $('#comments').load(location.href + ' #comments');
// $('input[type="text"],textarea').val('');
// }
// });
// });
// });
</script>
tapos punta ka sa news feed mo at mag click ka ng mga submit, makikita mo gagana yan
sige boss ganto diba?
yan diyan mo ilagay yung mahabang script tag burahin mo muna saglit (pwede mo naman i-undo) tapos i-copy paste mo yung nakalagay dun sa taas, ginagawa ko na tong gusto mo XDXDXD
eto boss gumagana na, pwede ka na mag comment sa news feed kaso yung comment di ko niloload unless na ire-load mo yung page hindi mo yun makikita. Burahin mo muna yung lumang laman ng app.blade.php mo boss ito ipalit mo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
<link href="/css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
<style type="text/css">
.time{
font-size:10px;
margin:0 8px;
}
.name{
display:inline-block;
font-weight:bold;
}
.comment-container{
background-color:#ddd;
padding:15px;
}
.body{
margin:0 35px;
display:block;
}
.ajax-load{
background: #e1e1e1;
padding: 10px 0px;
width: 100%;
}
.replies{
padding:0px 45px;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
<i class="fa fa-code"></i>
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<img src="/uploads/avatars/{{ Auth::user()->avatar }}" style="height:30px;width:32px;border-radius:100%;position:absolute;top:10px;left:-33px;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }}<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="{{ url('/prof') }}"><i class="fa fa fa-user-circle"></i> My Profile</a>
</li>
<li><a href="{{ url('/myArticles') }}"><i class="fa fa fa-book"></i> My Articles</a>
</li>
<li>
<a href="/settings/{{ Auth::user()->id }}/edit"><i class="fa fa-cog"></i> Settings</a>
</li>
<hr>
<li><a href="/articles/create"><i class="fa fa-plus-circle"></i> Create New Article</a></li>
<li><a href="/articles"><i class="fa fa-feed"></i> Feed</a></li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-power-off"></i>
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
</body>
<!-- Scripts -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.comment-forms').each(function(index, comment_form) {
// header for csrf token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// when this form is submitted
$(comment_form).on('submit', function(submitEvent) {
// don't load the page
submitEvent.preventDefault();
// the form fields
var form_fields = $($(comment_form).children()[1]).children();
// the comment container of this form
var comment_container = $($($(comment_form).parent()[0]).children()[2]);
// article id where the comment would be inserted
var commentable_id = form_fields[1].value;
// the user id of commenter
var user_id = form_fields[2].value;
// comment body
var body = form_fields[3].value;
$.post('/comments', {
'commentable_id': commentable_id,
'user_id': user_id,
'body': body
}).then(function() {
alert('comment has been added, reload the page');
});
});
});
});
// $(document).ready(function(){
// $.ajaxSetup({
// headers: {
// 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
// }
// });
// function readURL(input){
// if(input.files && input.files[0]){
// var reader = new FileReader();
// reader.onload = function(e){
// $('#showImage').attr('src', e.target.result);
// }
// reader.readAsDataURL(input.files[0]);
// }
// }
// $('#inputImage').change(function(){
// readURL(this);
// });
// // $(document).on('click','#submit',function(event){
// // var body = $('#body').val();
// // var commentable_id = $('#commentable_id').val();
// // var user_id = $('#user_id').val();
// // $.post('comments',{'body':body,'commentable_id':commentable_id,'user_id':user_id,'_token':$('input[name=_token]').val()},function(data){
// // location.reload();
// // });
// // });
// $(document).on('click','#commentForm',function(){
// var id = $(this).find('#commentable_id').val();
// $('#id').val(id);
// });
// $(document).on('click','#submit',function(e){
// e.preventDefault(); // Prevent Default Submission
// var body = $('#body').val();
// var commentable_id = $('#commentable_id').val();
// var user_id = $('#user_id').val();
// // var data = $(this).serialize();
// // var post = $(this).attr('method');
// $.ajax({
// url:'/comments',
// type: 'POST',
// data:{'commentable_id':commentable_id,'user_id':user_id,'body':body},
// success:function(data){
// $('#comments').load(location.href + ' #comments');
// $('input[type="text"],textarea').val('');
// }
// });
// });
// });
</script>
</html>
ahahaha cocomment na sana ako eh XD sige haba nito boss ang tindi ng logic ditooooooo ahhaha aaralan ko na nga tong jquery na to isasabay ko sa laravel XD
gagana din yan sa show.blade.php
as long as parehas sila ng HTML structure, kaso nakita ko na hindi sila parehas ng HTML structure....
nag rereload whole page ko bos ahaha XD wait tingnan mo index page ko tama ba to boss?
ahahahaha ayos lang boss gagawan ko ng paraan yun mamaya XD
ayy oo nga pala, yung index.blade.php
dinagdagan ko lang ng class
yung form mo, eto boss
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-md-6 col-md-offset-3">
@if(Session::has('success'))
<div class="alert alert-success">
<strong>Success! </strong>{{ Session::get('success') }}
</div>
@endif
</div>
@forelse($articles as $article)
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary " style="border-left:none;border-right:none;">
<div class="panel-heading">
<img src="/uploads/avatars/{{ $article->user->avatar }}" style="height:32px;width:32px;border-radius:100%;">
<span>{{ $article->user->name }}</span>
<span class="pull-right">
{{ $article->created_at->diffForHumans() }}
</span>
</div>
<div class="panel-body">
<!-- start at 0 and end at 100 -->
@if(strlen($article->ShortContent) > 60)
{{ $article->ShortContent }}...
<a href="/articles/{{ $article->id }}">Read more</a>
@else
{{ $article->ShortContent }}
<br>
<a href="/articles/{{ $article->id }}">View</a>
@endif
</div>
<div class="panel-footer clearfix">
@if( $article->user_id == Auth::user()->id )
<form class="pull-right" style="margin-left:25px" action="/articles/{{ $article->id }}" method="POST" id="myForm">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button class="btn btn-danger btn-sm" id="delete"><i class="fa fa-trash"></i> Delete</button>
</form>
@endif
<i class="fa fa-heart pull-right"></i>
</div>
</div>
<small style="border-bottom:1px solid cornflowerblue;display:block;"><strong>Comments</strong></small>
<!--=============================================== 'comments'====================================================-->
<div class="comment-container" id="comments">
@foreach($article->comments as $comment)
<div class="comment">
<img src="/uploads/avatars/{{ $comment->user->avatar }}" style="height:32px;width:32px;border-radius:100%;display:inline-block;">
<div class="actions pull-right">
@if($comment->user_id == Auth::user()->id)
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:90px">
<li>
<form method="POST" action="/comments/{{ $comment->id }}" style="text-align:center">
<a class="btn btn-primary btn-sm" href="/comments/{{ $comment->id }}/edit"><i class="fa fa-pencil"></i></a>
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
</form>
</li>
</ul>
</div>
@endif
</div>
<p class="name">{{ $comment->user->name }}<span class="time"><i class="fa fa-clock-o"></i> {{ $comment->created_at->diffForHumans() }}</span><p>
</div>
<p class="body">{{ $comment->body }}</p>
<!--=============================================== 'replies'====================================================-->
<small style="font-weight:bold;" class="replies">Replies <i class="caret"></i></small><br>
@foreach($comment->replies as $reply)
<div class="replies">
<img src="/uploads/avatars/{{ $reply->user->avatar }}" style="height:22px;width:22px;border-radius:100%;display:inline-block;">
<div class="actions pull-right">
@if($reply->user_id == Auth::user()->id)
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:90px">
<li>
<form method="POST" action="/reply/{{ $reply->id }}" style="text-align:center">
<a class="btn btn-primary btn-sm" href="/reply/{{ $reply->id }}/edit"><i class="fa fa-pencil"></i></a>
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
</form>
</li>
</ul>
</div>
@endif
</div>
<small class="replyer">{{ $reply->user->name }} <br><small style="padding:0px 15px"><i class="fa fa-clock-o"></i> {{ $reply->created_at->diffForHumans() }}</small></small>
<p style="padding:0px 15px">{{ $reply->reply }}</p>
</div>
@endforeach
<form method="POST" class="clearfix" id="replyForm" action="/reply">
{{ csrf_field() }}
<div class="form-group">
<input type="hidden" name="parent_id" value="{{ $comment->id }}" id="parent_id">
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}" id="user_id">
<div class="input-group">
<input type="text" class="reply form-control" placeholder="Comment.." name="reply" id="reply">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm pull-right" style="margin:5px"><i class="fa fa-comments-o"></i> Reply</button>
</span>
</div>
</div>
</form>
<!--=============================================== 'end of replies'====================================================-->
@endforeach
</div>
<form class="clearfix comment-forms" id="commentForm">
{{ csrf_field() }}
<div class="form-group">
<input type="hidden" id="id">
<input type="hidden" name="commentable_id" value="{{ $article->id }}" id="commentable_id">
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}" id="user_id">
<textarea type="text" class="form-control" placeholder="Comment.." style="height:50px" name="body" id="body"></textarea>
<button class="btn btn-primary btn-sm pull-right" style="margin:5px" id="submit"><i class="fa fa-comments-o"></i> Comment</button>
</div>
</form>
<!--====================================== end of comment ====================================================================-->
</div>
@empty
<h1 style="text-align:center;">Create your first Article</h1>
@endforelse
</div>
<!-- pagination -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
{{ $articles->links() }}
</div>
</div>
@endsection
<!-- http://way2php.com/crud-operations-using-jquery-ajax-laravel-5-3/ -->
yung show.blade.php
ganun din, kaso di ko na binago yung html structure XDXD
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<span>
Article by Axel Mhar
@if(Auth::user()->id == $article->user_id)
<a href="/articles/{{ $article->id }}/edit" class="btn btn-success btn-sm"><i class="fa fa-pencil"></i> Edit</a>
@endif
</span>
<span class="pull-right">
{{ $article->created_at->diffForHumans() }}
</span>
</div>
<div class="panel-body">
{{ $article->content }}
</div>
<div class="comment-container" id="comments">
@foreach($article->comments as $comment)
<div class="comment">
<img src="/uploads/avatars/{{ $comment->user->avatar }}" style="height:32px;width:32px;border-radius:100%;display:inline-block;">
<div class="actions pull-right">
@if($comment->user_id == Auth::user()->id)
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:90px">
<li>
<form method="POST" action="/comments/{{ $comment->id }}" style="text-align:center">
<a class="btn btn-primary btn-sm" href="/comments/{{ $comment->id }}/edit"><i class="fa fa-pencil"></i></a>
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
</form>
</li>
</ul>
</div>
@endif
</div>
<p class="name">{{ $comment->user->name }}<span class="time"><i class="fa fa-clock-o"></i> {{ $comment->created_at->diffForHumans() }}</span><p>
</div>
<p class="body">{{ $comment->body }}</p>
@endforeach
</div>
<form action="/comments" method="POST" class="clearfix comment-forms">
{{ csrf_field() }}
<div class="form-group">
<input type="hidden" id="id">
<input type="hidden" name="commentable_id" value="{{ $article->id }}" id="commentable_id">
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}" id="user_id">
<textarea class="form-control" placeholder="Comment.." style="height:50px" name="body" id="body"></textarea>
<button type="submit" class="btn btn-primary btn-sm pull-right" style="margin:5px" id="submit"><i class="fa fa-comments-o"></i> Comment</button>
</div>
</form>
</div>
</div>
</div>
@endsection
pinagana ko na din yan, parehas na sila ng structure. testing mo na boss tapos sabihin mo sakin kung gumagana. pagka hindi mas maganda mag PR ako para hindi ka na mahirapan mag copy paste XDXD
ahgahahahahaha Okay na boss gumana na XD ako na hello bahala mag reload xD lakas mo boss salamat! ahahahaha
LAKAS TALAGA ! AHAHAHA
NOTICE: Yung
<input type="hidden" id="id">
walang value? kung ito yung naglalaman ng ID ng article dapat it would look something like this<input type="hidden" id="id" name="article_id" value="{{ $article->id }}">
nasa loob naman ngforelse
yun so makukuha mo yang$article