Postingan lainnya
Halaman Modal tidak keluar, tidak jalan
tombol edit tidak jalan saat klik tombol edit, seharusnya muncul pop up modalnya,
saya menggunakan laravel 5.2 saya menjalankan di pc lain jalan, pas coba di pc rumah gak jlan, padaha koding udah copy paste dengan tutorial, update composer, dan menyertakan jQuery didalamnya sudah saya lakukan di pc rumah, tapi tetap tidak jalan. maaf jika kalimat dan sourcecode rancuh. terima kasih
page: index.blade.php
<div class="form-group row add">
<div class="col-md-5">
<input type="text" class="form-control" id="title" name="title"
placeholder="Your title Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
<div class="col-md-5">
<input type="text" class="form-control" id="description" name="description"
placeholder="Your description Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
<div class="col-md-2">
<button class="btn btn-warning" type="submit" id="add">
<span class="glyphicon glyphicon-plus"></span> Add New Data
</button>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table table-borderless" id="table">
<tr>
<th>No.</th>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
{{ csrf_field() }}
<?php $no=1; ?>
@foreach($blogs as $blog)
<tr class="item{{$blog->id}}">
<td>{{$no++}}</td>
<td>{{$blog->title}}</td>
<td>{{$blog->description}}</td>
<td>
<button class="edit-modal btn btn-primary" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
<button class="delete-modal btn btn-danger" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</td>
</tr>
@endforeach
</table>
</div>
</div>
<div id="myModal" class="modal fade" 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"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">ID :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fid" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="t">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="description">Description:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="d">
</div>
</div>
</form>
<div class="deleteContent">
Are you Sure you want to delete <span class="title"></span> ?
<span class="hidden id"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn" data-dismiss="modal">
<span id="footer_action_button" class='glyphicon'> </span>
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
page:app.blade.php
<body>
<div class="container">
@yield('content')
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ asset('/js/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('/js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
// Edit Data (Modal and function edit data)
$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
$('#fid').val($(this).data('id'));
$('#t').val($(this).data('title'));
$('#d').val($(this).data('description'));
$('#myModal').modal('show');
});
$('.modal-footer').on('click', '.edit', function() {
$.ajax({
type: 'post',
url: '/editItem',
data: {
'_token': $('input[name=_token]').val(),
'id': $("#fid").val(),
'title': $('#t').val(),
'description': $('#d').val()
},
success: function(data) {
$('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.description + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
}
});
});
</script>
page:BlogController.php
public function editItem(Request $req) {
$blog = Blog::find ($req->id);
$blog ->title = $req->title;
$blog->description = $req->description;
$blog->save();
return response()->json($blog);
}
page: Routes.php
Route::group(['middleware'=> ['web']], function(){
Route::resource('blog','BlogController');
Route::post ('/editItem','BlogController@editItem');
});
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban