How do I solve the modal update issues in Laravel? - laravel

I have a modal in which I want to update my Question but the modal keeps updating the same question so can someone help me because my modal keeps taking the same $id even if I click on different entries.
This is my QuestionController
public function update($questionId)
{
$this->validate(request(),[
'label' => 'required',
]);
$data = request()->all();
$question = Question::find($questionId);
$question->label = $data['label'];
$question->save();
return redirect('/question');
}
this is my Modal in the blade.php file
<!-- Modal Edit -->
<div class="modal" id="editMcqModal" tabindex="-1" role="dialog"
aria-labelledby="editMcqModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredLabel">Edit Question</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="" action="/question/{{$question->id}}" method="post">
#csrf
#method('PATCH')
<div class="form-group">
<textarea name="label" class="form-control" placeholder="Please Enter Question" cols="5"
row="15">{{$question->label}}</textarea>
</div>
<div class="form-group">
<button type="submit" name="add" class="btn btn-success float-right">Update
Question</button>
</div>
</form>
</div>
</div>
</div>

Related

Call to a member function update() on null in laravel

So i want to make admin can change any user's password. but i got this error
Call to a member function update() on null
I have no idea what to do
this is my controller
public function resetPassword(Request $req, $id)
{
$req->validate([
'new_password' => ['required'],
'new_confirm_password' => ['same:new_password'],
],
[
'new_password.required' => 'Password Baru Harus Diisi !',
'new_confirm_password.same' => 'Password Baru Harus Sama Dengan Confirm Password !',
]);
User::find($id)->update(['password'=> Hash::make($req->new_password)]);
return redirect('/admin/list_user')->with('status', 'Password Berhasil di Ubah !');
}
this my route
Route::put('/admin/{id}/reset/password', 'PageController#resetPassword')->name('resetPassword');
this is my view modal
<div class="modal fade" id="resetModal" tabindex="-1" role="dialog" aria-labelledby="resetModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Reset Password</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/admin/{id}/reset/password" method="POST">
{{csrf_field()}}
{{ method_field('PUT') }}
<div class="form-group">
<label for="password">Password Baru</label>
<input name="new_password" type="password" class="form-control" id="new_password" required>
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input name="new_confirm_password" type="password" class="form-control" id="new_confirm_password" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Buat</button>
</form>
</div>
</div>
</div>
</div>
</div>
<form action="/admin/{id}/reset/password" method="POST">
You're not passing any id. The route picks up '{id}' as the id, then tries to find an User with the id '{id}' and finds none. (->first() returns null).
Just change that opening form tag's action attribute:
<form action="{{ route('resetPassword', ['id' => Auth::id()]) }}" method="POST"> (or instead of Auth::id() the user_id you're trying to update.
You could also use findOrFail($id) instead of find($id) so you'll get a clearer error message if an User is not found.

Laravel store doesn't save anything

I am making an application in Laravel. I've created a form to save a model (Repair). But when I save the form, you see it redirecting, but nothing saves. No error or success message is shown?
The store function in the RepairController.php:
public function store(Request $request)
{
$this->validate($request, [
'customer_id' => 'required',
'defect' => 'required',
'stats_id' => 'required'
]);
Repair::create([
'customer_id' => $request->customer_id,
'serial_number' => $request->serial_number,
'model' => $request->model,
'defect' => $request->defect,
'diagnostics' => $request->diagnostics,
'comments' => $request->comments,
'status_id' => $request->status_id
]);
return redirect()->route('repair.index')->with('success',$msg);
}
Repair.php has a fillable:
protected $fillable = ['customer_id', 'serial_number', 'model', 'defect', 'diagnostics', 'comments', 'status_id'];
The create modal:
<div id="newModal" class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default">Type your modal title</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('repair.store') }}" method="POST" id="editForm">
#csrf
<input type="text" name="customer_id" class="form-control" placeholder="Customer ID"><br>
<input type="text" name="serial_number" class="form-control" placeholder="Serial number"><br>
<input type="text" name="model" class="form-control" placeholder="Model"><br>
<input type="text" name="defect" class="form-control" placeholder="Defect"><br>
<div class="form-group">
<label for="Diagnostics">Diagnostics</label>
<textarea name="diagnostics" class="form-control" id="Diagnostics" rows="3"></textarea>
</div>
<div class="form-group">
<label for="Comments">Comments</label>
<textarea name="comments" class="form-control" id="Comments" rows="3"></textarea>
</div>
<input type="text" name="status_id" class="form-control" placeholder="Status ID"><br>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Create repair</button>
<button type="button" class="btn btn-link ml-auto" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
The route in web.php:
Route::resource('repair', 'RepairController');
There might be some validation fails in your data. Can you add the below code above your form and see what it prints.
#if($errors->any())
<ul>
#foreach($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
#endif

how to show different bootstrap modals on a single page

I am trying to open multiple modals on a single page but their ids are conflicting with each other. I got this code from bootstrap-4 documentation,
Modal 1 is works fine but modal 2 fails to work, I wants that both of them to work separately
code:
modal1
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Add New
</button>
<!-- Modal Add Owner -->
<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">
<h5 class="modal-title" id="exampleModalLabel">Add Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.store') }}">
#csrf
<div class="form-group">
<label for="">Add Owner Name</label>
<input type="text" name="owner_name" class="form-control" id="" placeholder="Owner Name">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
modal2:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Show
</button>
<!-- Modal Show Owner-->
<div class="modal fade" id="exampleModalshow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">View Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.update', $owner->id) }}">
#csrf
#method('PATCH')
<div class="form-group">
<label for="">Owner Name</label>
<input type="text" name="owner_name" class="form-control" value="{{ $owner->owner_name }}">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Change data-target on the second modal button to match the modal id
<button data-target="#exampleModalshow">
... rest of the code
</button>

Form submit using bootstrap modal without jquery and display event in calendar

I have successfully submitted form using bootstrap modal in laravel.Now I want to display the data in the calendar according to date.I have tried but unable to get the event in the calendar days.
event.blade.php
css
<link href="{{asset('admin-panel/assets/libs/fullcalendar/dist/fullcalendar.min.css')}}" rel="stylesheet" />
<link href="{{asset('admin-panel/assets/extra-libs/calendar/calendar.css')}}" rel="stylesheet" />
<link href="{{asset('admin-panel/dist/css/style.min.css')}}" rel="stylesheet">
<script src="{{asset('admin-panel/assets/libs/jquery/dist/jquery.min.js')}}"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
<div class="calendar-events m-b-20" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event</div>
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MODAL -->
<div class="modal none-border" id="my-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add Event</strong></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Category -->
<div class="modal fade none-border" id="add-new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add</strong> Event</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="{{route('event.store')}}" method="post">
#csrf
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label class="control-label">Date</label>
<input class="form-control form-white" name="date" type="date"/>
</div>
<div class="col-md-6">
<label class="control-label">Event Name</label>
<input class="form-control form-white" name="event" placeholder="Enter name" type="text"/>
<br>
</div>
<div class="col-md-12">
<label class="control-label">Description</label>
<input class="form-control form-white" name="description" placeholder="Enter description" type="text"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger waves-effect waves-light save-category">Save</button>
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
javascript
#section('js')
<script src="{{asset('admin-panel/assets/libs/jquery/dist/jquery.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/jquery-ui.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/custom.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/moment/min/moment.min.js')}}"></script>
<script src="{{asset('admin-panel/assets/libs/fullcalendar/dist/fullcalendar.min.js')}}"></script>
<script src="{{asset('admin-panel/dist/js/pages/calendar/cal-init.js')}}"></script>
#endsection
EventController.php
public function event()
{
$events=$this->getEventbyMonth(date('m'));
// dd($events);
return view('admin.calendar.event',compact('events'));
}
public function store(Request $request)
{
// dd($request->all);
$request -> validate([
'date' => 'required',
'event' => 'required',
]);
$event = new Event();
$event -> date = $request -> date;
$event -> event = $request -> event;
$event -> description = $request -> description;
$event ->save();
return redirect()->route('event');
}
private function getEventbyMonth($month)
{
return Event::whereMonth('date',$month)->get();
}
and my route look like this:
Route::get('event', ['as'=>'event', 'uses' => 'EventController#event']);
Route::post('event/store, ', ['as'=>'event.store', 'uses' => 'EventController#store']);
Expected results:
Imgur
Actual results:
Imgur
Database:
Imgur
Event form after clicking add new event
Imgur

Cannot retrieve posted data from vue.js ajax call

I'm giving a try to Vue.js, It's much simpler than Angular and then I stuck on this problem. I'm using CodeIgniter for the backend process. Basically I just want to send data using ajax call via Vue.js then I want to retrieve the data in mmy controller. But I can't retrive the data using $this->input->post().
Here is my view. I'm using form on a modal.
<div class="modal fade modal-primary" id="modalObat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Tambah Obat</h4>
</div>
<form #submit.prevent="onSubmit" class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="nama-obat" class="col-sm-2 control-label">Nama Obat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="namaObat" placeholder="nama obat" v-model="newObat.nama">
</div>
</div>
<div class="form-group">
<label for="harga" class="col-sm-2 control-label">Harga</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="harga" placeholder="harga" v-model="newObat.harga">
</div>
</div>
<div class="form-group">
<label for="Stok" class="col-sm-2 control-label">Stok</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="stok" placeholder="jumlah" v-model="newObat.stok">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
<button type="submit" id="simpen" class="btn btn-outline">Save Changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is how I send the data on vue
Then here is my controller
public function tambahObat()
{
$data = array(
'nama' => $this->input->post('nama'),
'harga' => $this->input->post('harga'),
'stok' => $this->input->post('stok')
);
$data1 = $this->input->post('newObat');
$query = $this->obat_m->save($data, null);
if( $query == true )
{
$message = $this->session->set_flashdata('message', 'berhasil menyimpan');
}
else
{
$message = $this->session->set_flashdata('message', 'berhasil mengupdate');
}
redirect('obat');
}
I succeed to send the data as I check on the console
I think there is a problem with the controller but I dont know why. Could you help me, please??
You are trying to access this from inside the post callback, where this refers to something other than your vue instance. Try this format:
this.$http.post('url/to/post',{},function(){
//because of "bind", 'this' is vue
}.bind(this));

Resources