I have a script when I display all what is in collection, I use foreach. One of all collection you can delete clicking specific button, but the problem is you can click collection with ID 17 and it will delete first existing collection, even with id = 1. I do not know what to do because i think that everything looks ok. When I dump controller I see first existing collection id. I mean that moment -> ReviewAnswerController#destroy in code
Can you help me?
#foreach($data->reviewAnswers as $answer)
<div class="row">
<div class="col-md-12" style="position: inherit; display: flow-root; float: right; background: #94969f; margin-top: 15px; margin-right: 15px; padding: 5px; border-radius: 5px; width: 80%; color: white; padding-bottom: 3px;">
<div class="col-md-1">
<?php $avAnswer = App\Models\UserData::where('user_id', $data->sender_id)->first() ?>
#if(empty($avAnswer->avatar))
<img src="{{ asset('img/lock_thumb.jpg')}}" style="width: 50px; height: 50px; border: 2px solid white;border-radius: 50%;">
#else
<img src="{{ asset('/storage/uploads/avatars/'. $av->avatar) }}" style="width: 50px; height: 50px; border: 2px solid white;border-radius: 50%;">
#endif
</div>
<div class="col-md-5">
<div style="float: left;">
{{$answer->id}}
<b>{{$answer->sender_name}} {{$answer->sender_surname}}</b> |
#if($answer->sender_role_specific)
{{$answer->sender_club_role}} ({{$answer->sender_role_specific}})
#else
{{$answer->sender_club_role}}
#endif
</div>
</div>
<div class="col-md-5"></div>
<div class="col-md-1">
#if(Auth::user()->role == 'admin')
<form id="reviewAnswerForm" action="{{ action('ReviewAnswerController#destroy', $answer->id) }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button class="btn" style="background-color:transparent; float: right;">
<img src="{{ asset('img/review-icons/delete.png')}}" style="float: right;"/>
</button>
</form>
#endif
</div>
<div class="col-md-11" style="border-top: 1px solid; padding-bottom: 5px;">
<p>{{$answer->answer}}</p>
<button class="btn" style="background-color:transparent; float: right;" data-toggle="modal" data-target="#modalreportanswer">
<img src="{{ asset('img/review-icons/report.png')}}" style="width: 15px; height: 15px; float: right; margin-top: 10px;">
</button>
<div class="modal fade" id="modalreportanswer" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#lang('main.report')</h4>
</div>
<div class="modal-body">
<form action="{{ action('ReviewAnswerReportController#store') }}" method="POST" class="">
{{ csrf_field() }}
<div class="form-group">
<label for="comment">#lang('main.reason'):</label>
<textarea id="text" class="form-control noresize" rows="5" name="reason"></textarea>
<h6 class="pull-right" id="count_message"></h6>
</div>
<div class="form-group">
<input type="hidden" class="form-control" value="{{ $answer->id }}" name="reviewAnswerId">
</div>
<button class="btn btn-primary" type="submit">#lang('main.report')!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
In your code you have 2 method, POST and DELETE in the same Form
<form id="reviewAnswerForm" action="{{ action('ReviewAnswerController#destroy', $answer->id) }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
Try with this , I use Laravel Collective , it is very clear.
Route::delete('answer/{id}', ['as' => 'reviewAnswer.destroy', 'uses' => 'ReviewAnswerController#destroy'] );
#if(Auth::user()->role == 'admin')
{!! Form::open(['method' => 'DELETE','route' => ['reviewAnswer.destroy',
$answer->id, ] ]) !!}
#endif
Related
I am using laravel framework to develop web application i have one simple form i have one table which is coming from API based on that i am loading all the values into the table everything works fine but when i click on remove button it's taking first record id (i.e.. first item id of the array for all items )only instead of taking that particular record id,could you please help me where did i mistake..?
#include('header')
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.left-btn {
float: left;
}
.right-btn {
float: right;
}
.table-bordered {
margin-top: 3%;
}
#new-form {
border: 3px solid black;
width: 600px;
display: flex;
align-items: center;
justify-content: center;
}
table {
font-family: "Times New Roman";
font-size: 20px;
}
span.circle {
background: #ADD8E6;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #6e6e6e;
display: inline-block;
font-weight: bold;
line-height: 40px;
margin-right: 5px;
text-align: center;
width: 40px;
}
.buttons {
width: 200px;
margin: 0 auto;
display: inline;
}
.action_btn {
width: 200px;
margin: 0 auto;
display: inline;
}
.confirm_buttons {
width: 60px;
}
.popup {
font-size: 15px;
}
.file:focus,
.file:active {
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: none !important;
}
.glyphicon-remove {
font-size: 20px;;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h4 class="" style="font-size:20px;font-weight:80px;">User Records</h4>
</div>
<div class="col-6 text-right">
<button type="button" style="font-size:20px;font-weight:28px;" class="btn btn-primary"
data-toggle="modal" data-target="#exampleModal">
Add New Employee
</button>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body popup">
<form action="<?php echo url('postemployee'); ?>" method="POST" enctype="multipart/form-data">
#csrf
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="modal-body">
<div class="form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email"
aria-describedby="emailHelp" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="email1">Full Name</label>
<input type="text" class="form-control" id="fname"
aria-describedby="emailHelp" name="fname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email1">Date Of Joining</label>
<input type="date" class="form-control" name="doj" id="doj"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="password1">Date Of Leaving</label>
<input type="date" class="form-control" id="password1" name="dol">
</div>
<div class="form-check form-inline">
<label class="form-check-label" for="defaultCheck1">
Still working
</label>
<input class="form-check-input" type="checkbox" name="current_date"
id="defaultCheck1">
</div>
<div class="form-group form-inline">
<label for="email1">Upload Image</label>
<input type="file" class="file" class="form-control" id="email"
name="image" aria-describedby="emailHelp">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<table class="table table-bordered" id="table">
<tr>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Experience</th>
<th>Action</th>
</tr>
#foreach ($employees as $employee)
<tr>
<td>
#if (isset($employee['image_path']))
<img style="border-radius: 50%;height:40px;width:40px;"
src={{ URL::asset("/images/{$employee['image_path']}") }} alt="Avatar">
#else
<span class="circle">{{ ucfirst(mb_substr($employee['name'], 0, 1)) }}</span>
#endif
</td>
<td>{{ ucfirst($employee['name']) }}</td>
<td>{{ $employee['email'] }}</td>
<td>
#if ($employee['joining_date'] == '0 Days')
<span data-toggle="tooltip" data-placement="top" title="Fresher"
style="color:green;font-weight:500;">Joined Today</span>
#else
{{ $employee['joining_date'] }}
#endif
</td>
<td>
<button type="submit" class="btn" data-toggle="modal" data-target="#exampleModalCenter"
value="{{ $employee['id'] }}">
<span style="margin-top:10px;" onclick="getId()" id="mt"
class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
Are you sure you want to delete ?
<br><br>
<form action="<?php echo url('delete'); ?>" method="POST">
#csrf
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-primary confirm_buttons"
data-toggle="modal" name="delete_id" value="{{ $employee['id'] }}"
data-target="#exampleModalCenter">Yes</button>
<button type="submit" class="btn btn-secondary confirm_buttons"
data-toggle="modal" data-target="#exampleModalCenter">No</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</table>
</div>
<div class="right-btn">
</div>
<script type="text/javascript">
</script>
</body>
</html>
you can use onclick functionality for passing value ,try the following approach it will work
<button type="submit" class="btn" data-toggle="modal" data-target="#exampleModalCenter" data-backdrop="static" data-keyboard="false" value="{{ $employee['id'] }}" onclick="id(this.value)">
<span style="margin-top:10px;" id="rmr" class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<!--refactor the following line in modal target -->
<button type="submit" class="btn btn-primary confirm_buttons" data-toggle="modal" name="delete_id" id="del_id" data-target="#exampleModalCenter">Yes</button>
<script type="text/javascrpt">
function id(objButton) {
document.getElementById('del_id').value = objButton;
}
</script>
I made a delete multiple function, but I have some troubles with. When I select 2 checkboxes, and submit it but after that I'm redirected to url/article/delete/559 with null message at dd($article_id).
Here is my controller function:
public function deleteArticles (requ $request){
$article_id = $request['news_id'];
dd($article_id);
DB::table('contacts')
->whereIn('id', $article_id)
->delete();
return back();
}
public function delete($id)
{
$careerSolution = \App\Contact::find($id);
$careerSolution->delete();
return redirect(URL::previous());
}
Here is my routes
Route::get('article/delete/{id?}', 'ContactController#delete');
Route::post('noticeboard/{page?}', array('as' => 'noticeboard', 'uses' => 'ContactController#deleteArticles'));
Here is my view
<div id="my_contacts_grid" class="profile-edit tab-pane fade in active" style="background: none repeat scroll 0 0;">
<dl class="dl-horizontal">
<?php $count_user = 0; ?>
#foreach($users as $user)
#if($count_user == 0)
<div class="row margin-bottom-20">
#endif
<?php $count_user++; ?>
<form method="POST" action="{{ action ('ContactController#deleteArticles')}}">
{{csrf_field()}}
<div class="col-sm-6 sm-margin-bottom-20">
<div class="profile-blog" style="padding: 0px">
<img class=" noticeboard-profile-picture" src="{{ asset('thumbnail') }}/{{ $user->profile_picture }}" alt="" style="margin-left: 20px;margin-top: 15px;">
<div style="top: 35px;position: relative;right: 85px;margin-bottom:30px" class="name-location">
<ul class="list-unstyled col-xs-12" >
<li>
<strong style="display: inline-table !important">
<h3>#if($user->role[0]->slug == "individuals")
<i style="font-size: 13px;left: 60px;position: relative;top: 2px;" class="icon-user"></i>
#elseif($user->role[0]->slug =='organizations')
<i style="font-size: 13px;left: 60px;position: relative;top: 2px" class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"></i>
#endif<a style="font-size: 16px;left: 60px;position: relative;top: 2px" href="{{ url('') }}/{{ $user->username }}"> {{ $user->username }}</a></h3></strong>
<p style="right: 10px;position: relative;width: 110%">
<i style="padding: 5px" class="icon-real-estate-020 u-line-icon-pro"></i><strong style="display: inline-table !important;font-size: 13px">Location : </strong> {{ $user->country->country }} <span class="{{$user->country->flag}}"></span><br>
<i style="padding: 5px" class="icon-notebook fa-"></i><strong style="display: inline-table !important;font-size: 13px">Industry : </strong> {{ $user->industry->industry }}<br>
#if($user->role[0]->slug == "individuals")
#foreach($user->career_path as $career_path)
<i style="padding: 5px" class="icon-speedometer"></i><strong style="display: inline-table !important;font-size: 13px">Function : </strong> {{ $career_path->functions->function }}
#break;
#endforeach
#elseif($user->role[0]->slug =='organizations')
<i style="padding: 5px" class="icon-frame fa-"></i><strong style="display: inline-table !important;font-size: 13px">Organization : </strong> {{ $user->organization_type->organization_type }}<br>
#endif
</p>
</li>
</ul>
</div>
<hr>
<ul class="social-icons social-icons-color" style="display:none;">
<div class="social-cu" id="social-cu">
<li class="facebook_share" link="{{ url('') }}/{{ $user->username }}" style="left: 5px;position: relative">
<img id="social-im" class="img-responsive social_whatsapp" src="{{ asset('/assets/img/icons/social/facebook-test.png') }}" alt="" style="height: 22px !important">
</li>
<li class="twitter_share" link="{{ url('') }}/{{ $user->username }}" name="{{ $user->username }} Workstickers Profile" style="left: 15px; position: relative">
<img id="social-im" class="img-responsive social_whatsapp" src="{{ asset('/assets/img/icons/social/twitter-test.png') }}" alt="" style="height: 22px !important">
</li>
<li class="whatapp_share" link="{{ url('') }}/{{ $user->username }}" name="{{ $user->username }} Workstickers Profile" style="left: 25px;position: relative">
<a href="whatsapp://send?text={{ url('') }}/{{ $user->username }}" style="top: 5px; position: relative">
<img id="social-w" class="img-responsive social_whatsapp" src="{{ asset('/assets/img/icons/social/Whatsapp.png') }}" style="height: 25px !important" alt="">
</a>
</li>
</div>
</ul>
<ul class="list-inline share-list" style="text-align: center;padding-bottom:10px">
<li>
<input name="news_id[]" type="checkbox" class="checkbox_news" value="{{$user->id}}"/>
</li>
<li>
<i class="fa fa-times"></i> Remove
</li>
<li class="send-contact-message " data-toggle="modal" data-target="#ssend_message_touser_{{ $user->id }}">
<i class="fa fa-paper-plane"></i>Send message
</li>
<li class="share-link">
<i class="fa fa-share-alt"></i> Share
</li>
</ul>
{!! Form::close() !!}
</div>
</div>
#if($count_user == 2)
</div>
<?php $count_user = 0; ?>
#endif
<!-- Modal -->
<div class="modal fade" id="ssend_message_touser_{{ $user->id }}" role="dialog" style="margin-top:40px;">
<div class="modal-dialog">
<!-- Modal email-->
<div class="modal-content" style="border-radius: 0px;top: 200px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="mt-5">Send message to {{ $user->username }}</h4>
</div>
<div class="modal-body">
{!! Form::open(['class' => 'form-horizontal sky-form sky-changes-3','url' => 'message-send']) !!}
<div class="form-group" >
<label class="col-lg-2 control-label" style="display: none">To</label>
<div class="col-lg-10">
<input style="display: none" class="form-control" type="email" name="username" value="{{ $user->username }}" readonly>
<input class="form-control" type="hidden" name="contact_user_id" value="{{ $user->id }}">
<input class="form-control" type="hidden" name="url" value="{{ url('') }}/{{ $user->username }}">
</div>
</div>
<fieldset>
<section>
<label class="label">Subject</label>
<label class="input">
<i class="icon-append fa fa-tag"></i>
<input type="text" name="subject" id="subject">
</label>
</section>
<section>
<label class="label">Message</label>
<label class="textarea">
<i class="icon-append fa fa-comment"></i>
<textarea rows="4" name="message" id="message" ></textarea>
</label>
</section>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" style="bottom: 2px;position: relative">Close</button>
<button type="submit" class="btn-u btn-u-primary">Send message</button>
</div>
</div>
{!! Form::close() !!}
</div>
</div>
<!-- end email Modal -->
#endforeach
<a href="{{ url('article/delete/'.$user->id) }}" role="button" class="btn btn-xs btn-danger" onclick="return confirm('Are you sure you want to delete this article?');">
<i class="fa fa-trash"></i>
</a>
</form>
{!! $users->render() !!}
</dl>
</div>
<style>
#social-cu{
width: 120px !important;
left: 200px;
top: -25px !important;
}
#social-im{
float: left;
width: 22px;
margin-right: 0px;
}
#social-w{
float: left;
width: 25px;
margin-right: 0px;
position: relative;
bottom: 3px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
App.initScrollBar();
RegForm.initRegForm();
Datepicker.initDatepicker();
CheckoutForm.initCheckoutForm();
StyleSwitcher.initStyleSwitcher();
$(".send-contact-message").live('click', function(){
var user_id = $(this).attr('data-user-id');
$('#ssend_message_touser_'+user_id).modal('show');
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
// StyleSwitcher.initStyleSwitcher();
$("#select_all").click(function () {
$(".checkbox_news").prop('checked',true);
});
$("#deselect_all").click(function () {
$(".checkbox_news").prop('checked',false);
});
});
</script>
So, when I check a checkbox or multiple, I should be able to have a multiple delete.
$careerSolution = \App\Contact::find($id);
When it's return null then you get error Call to a member function delete().
Use this One:
\App\Contact::where('id', $id)->delete();
I have a user profile screen which shows a user's information along with a profile picture. There I have a link called "Change Photo" which triggers a file input to upload a new image. Then I have a JS code to submit the form soon after the file input takes the image. But once the form is submitted, at my controller, when I dump my request, the filebag is empty.
This is my .twig file
{% extends('base.html.twig') %}
{% block title %}Welcome- Open Rpoad Tolling!{% endblock %}
{% block stylesheets %}
<style>
body{
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.emp-profile{
padding: 3%;
margin-top: 3%;
margin-bottom: 3%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.profile-img .file {
position: relative;
overflow: hidden;
margin-top: -20%;
width: 70%;
border: none;
border-radius: 0;
font-size: 15px;
background: #212529b8;
}
.profile-img .file input {
position: absolute;
opacity: 0;
right: 0;
top: 0;
}
.profile-head h5{
color: #333;
}
.profile-head h6{
color: #0062cc;
}
.profile-edit-btn{
border: none;
border-radius: 1.5rem;
width: 70%;
padding: 2%;
font-weight: 600;
color: #6c757d;
cursor: pointer;
}
.profile-edit-btn:hover{
color: #FFF;
background: rgb(240, 173, 78, 0.75);
/*border: 2px solid rgba(240, 173, 78, 0.75);*/
}
.proile-rating{
font-size: 12px;
color: #818182;
margin-top: 5%;
}
.proile-rating span{
color: #495057;
font-size: 15px;
font-weight: 600;
}
.profile-head .nav-tabs{
margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
font-weight:600;
border: none;
}
.profile-head .nav-tabs .nav-link.active{
border: none;
border-bottom:2px solid #0062cc;
}
.profile-work{
padding: 14%;
margin-top: -15%;
}
.profile-work p{
font-size: 12px;
color: #818182;
font-weight: 600;
margin-top: 10%;
}
.profile-work a{
text-decoration: none;
color: #495057;
font-weight: 600;
font-size: 14px;
}
.profile-work ul{
list-style: none;
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: #0062cc;
}
</style>
{% endblock %}
{% block body %}
<div class="container emp-profile">
<form action="{{ path('changeImage') }}" name="changeProfilePhoto" id="changeImageForm" method="post" enctype="multipart/form-data" >
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="{{ photoSrc }}" alt=""/>
<div class="file btn btn-lg btn-primary" id="fileUploadButton">
Change Photo
</div>
</div>
</div>
<div class="col-md-6">
<div class="profile-head">
<h5>
{{ user.firstName }} {{ user.lastName }}
</h5>
<h6>
Web Developer and Designer
</h6>
<p class="proile-rating">RANKINGS : <span>8/10</span></p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Timeline</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<button type="button" onclick="window.location.href = '{{ editProfile }}';" class="profile-edit-btn" name="btnAddMore" >Edit Profile</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="profile-work">
<p>WORK LINK</p>
Website Link<br/>
Bootsnipp Profile<br/>
Bootply Profile
<p>SKILLS</p>
Web Designer<br/>
Web Developer<br/>
WordPress<br/>
WooCommerce<br/>
PHP, .Net<br/>
</div>
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-md-6">
<label>User Id</label>
</div>
<div class="col-md-6">
<p>Kshiti123</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Name</label>
</div>
<div class="col-md-6">
<p>Kshiti Ghelani</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Email</label>
</div>
<div class="col-md-6">
<p>kshitighelani#gmail.com</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Phone</label>
</div>
<div class="col-md-6">
<p>123 456 7890</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Profession</label>
</div>
<div class="col-md-6">
<p>Web Developer and Designer</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-6">
<label>Experience</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Hourly Rate</label>
</div>
<div class="col-md-6">
<p>10$/hr</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Total Projects</label>
</div>
<div class="col-md-6">
<p>230</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>English Level</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Availability</label>
</div>
<div class="col-md-6">
<p>6 months</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Your Bio</label><br/>
<p>Your detail description</p>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="file" id="changeImageButton" name="file"/>
</form>
</div>
<script>
const changeImgButton = document.getElementById('changeImageButton');
const fileUploadButton = document.getElementById('fileUploadButton');
const formHome = document.getElementById('changeImageForm');
changeImgButton.addEventListener("change",function () {
formHome.submit();
});fileUploadButton.addEventListener("click",function () {
changeImgButton.click();
});
</script>
{% endblock %}
// This is my controller
/**
* #Route("/changeImage", name="changeImage")
* #param Request $request
*/
public function changeImage(Request $request){
$file = $request->files->get('file');
dump($request);die;
if($file){
$fileName = md5(uniqid()).'.'.$file->guessExtension();
$file->move(
$this->getParameter('uploads_dir'), $fileName
);
}
}
I have 1 main form. I also have a sub form inside that main form.
I can't seem to prevent the main form to stop submitting since the button type submit will submit the main form automatically.
Form UI
When I click on delete the modal slide up with 2 options
When I click on DELETE, I only one to submit to delete image that's it.
edit.blade.php
#extends('layouts.be.master')
#section('content')
<script type="text/javascript" src="/js/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="http://d.biossusa.com/css/root/hover-master/hover.css">
<style type="text/css">
.portfolio-images {
border: solid 1px silver;
}
._hover{
padding: 0px;
position: relative;
overflow: hidden;
border: 1px solid #D8D8D8;
/*border-radius: 10px;*/
}
._hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
._hover img{
z-index: 4;
}
._hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
._hover .blur{
background-color: rgba(0,0,0,0.8);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
._hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
</style>
<?php $tags = explode(",", $portfolio->tag ); ?>
<div class="card-body card-padding">
<div class="row">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'portfolio/'. $portfolio->id .'/update','files' => true)) !!}
<div class="col-sm-12">
{{-- Name --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" value="{{ $portfolio->name }}" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Type --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select name="type" class="form-control">
#foreach($portfolioTypes as $item)
<option value="{{ $item }}">{{ $item }}</option>
#endforeach
</select>
</div>
</div>
{{-- Tags --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
</div>
<input id="tags" name="tag">
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input name="url" type="text" value="{{ $portfolio->url }}" class="form-control" placeholder="URL">
</div>
</div>
{{-- Images --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Images</label>
#foreach($images as $image)
<?php
$crop_img = str_replace('full.jpg','crop.jpg',$image->img_path);
?>
<div class="col-sm-2">
<div class="_hover " style="background: transparent;">
<p style="text-align:center;">
<img class="img-responsive" src="{{ $image->image_path }}" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6 class="title lighter" style="padding:5px;border-radius: 10px;">
{{ $image->id }}
</h6>
<p>
<span>
<a data-toggle="modal" data-target="#delete_image_{{ $image->id or '' }}">
delete
</a>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete_image_{{ $image->id }}">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-4 ">
{!! Form::model($image, array( 'url' => '/portfolio/image/'.$image->id.'/destroy','method' => 'DELETE')) !!}
<button type="submit" class="btn btn-danger btn-lg btn-block">Delete ({{ $image->id }})</button>
<a class="btn btn-primary btn-lg btn-block" data-dismiss="modal" > Cancel </a>
{!! Form::hidden('$id', $image->id)!!}
{!! Form::close()!!}
</div>
</div>
</div>
#endforeach
<br><br>
<input id="images" name="images[]" type="file" multiple>
</div>
{{-- Description --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="20" cols="80" id="description">
{{ base64_decode($portfolio->description) }}
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<a class="btn btn-default" href="/portfolio"> Cancel </a>
<button type="submit" class="btn btn-info">Done</button>
</div>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
#stop
#section('custom-scripts')
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>
<script type="text/javascript">
$( "select[name*='type']" ).val("{{ $portfolio->type }}");
function readLogo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#portfolio-icon').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$( "input[name*='logo_path']" ).change(function(){
readLogo(this);
});
$('#tags').tagEditor({
autocomplete: {
delay: 0,
position: { collision: 'flip' },
source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
},
forceLowercase: false,
delimiter: ',', /* space and comma */
placeholder: 'Enter tags ...',
initialTags: [<?php echo '"'.implode('","', $tags).'"' ?>]
});
</script>
#stop
How would one go about debugging this further?
My goal is to stay with HTML, blade and Laravel as much as possible to solve this problem.
May be Use to someone
$('#formId').submit(function (event) {
event.preventDefault();
});
It is invalid html to have a form inside a form.
I'd try to place the modal outside the main form.
I would make hidden form outside of the original form and then send it with button that has form attribute. That "form" is valid html5 attribute.
<button type="submit" form="id_of_form_to_submit" value="Submit">Submit</button>
Here you can find more information:
https://www.w3schools.com/Tags/att_button_form.asp
The problem here is that red marked news ARE THE SAME. And what I want to do here is to make sure that the new posts wont repeat themselves. Because now as you can see the same posts shows up two times before another is posted.
This is the code:
#extends('app')
#section('content')
<div class="row">
<div class="col-xs-12 col-sm-9">
#if(count($latest))
<div class="col-md-12">
<a href="/post/{{$latest->slug}}/{{$latest->id}}">
<img class="img-responsive" src="{!! url($latest->image) !!}" alt="" style="padding: 0px; height: 400px; width: 720px"></a>
<h2 class="post" style="margin-top: 0; color: #666">
#foreach($latest->category as $cat)
<a style="color: red; text-transform: uppercase; font-size: 13px" href="/categories/{{$cat->name}}">{{$cat->name}}</a>
#endforeach
<br>{!! strip_tags(link_to_action('PostsController#show', $latest->title, [$latest->slug, $latest->id])) !!}</h2>
<span style="color: #b8b8b8">Paskeblta {{$latest->created_at}}</span>
<hr>
</div>
#else
<p>Nėra naujienų</p>
#endif
<div class="row">
#foreach($posts as $post)
<div class="col-xs-6 col-lg-6">
<a href="/post/{{$post->slug}}/{{$post->id}}">
<img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a>
<h3 class="post" style="font-size: 1.4em; margin-top: 0; color: #666"><small style="color: red; text-transform: uppercase; font-size: 11px">
#foreach($post->category as $cat)
{{$cat->name}}
#endforeach
</small><br>{{strip_tags($post->title)}}</h3>
<span style="color: #b8b8b8">Paskelbta {{$post->created_at}}</span>
<br><br>
</div><!--/.col-xs-6.col-lg-4-->
#endforeach
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
#include('comp.sidebar')
</div><!--/row-->
<hr>
#stop
You could add a check in the loop: if the current post is the same as the featured one, ignore it.
#foreach($posts as $post)
#unless ($post == $latest)
// rest of html goes here
#endunless
#endforeach
If the objects aren't actually the same objects, just change the check accordingly - e.g. #unless ($post->id == $latest->id) or similar.