I am currently learning ajax and have some problems with it. Whenever I reload the page I get over the data attributes of the modal no more data. Do I give the data wrong to the modal? Or do I have to reload something else?
The second problem is, the data in the modal or the input fields are displayed to me, but when I pass them to the controller and save there are no data available.
View
@foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-update-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-destroy-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li><a href="#" class="opt panel_colapse" data-placement="bottom"></a></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll min-height-30 max-height-100">
{{ $list->description }}
</div>
</div>
</div>
@endforeach
Modal
<div class="modal fade todolist-update-modal" tabindex="-1" role="dialog">
<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">Bearbeite diese Liste</h4>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id" id="id" value="">
<div class="form-group">
<label for="" class="control-label">Titelname</label>
<div class="fancy-form">
<i class="fa fa-header"></i>
<input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Beschreibung</label>
<div class="fancy-form">
<textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>
<i class="fa fa-comments"><!-- icon --></i>
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Privatsphäre</label>
<div class="fancy-form fancy-form-select">
<select id="privacy" name="privacy" class="form-control">
<option value="0">Öffentlich</option>
<option value="1">Privat</option>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="update-todo-list">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Function:
$('.todolist-update-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var title = button.data('title');
var description = button.data('description');
var id = button.data('id');
var modal = $(this);
modal.find('.modal-body input').val(title);
modal.find('.modal-body textarea').val(description);
modal.find('.modal-body #id').val(id);
});
$(document).on('click','#update-todo-list', function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val();
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
var id = $("input[name='id']").val();
$.ajax({
url:'/admin/tasks/update/'+id,
type: 'Put',
data: {_token:_token, title:title, description:description, privacy:privacy, id:id, _method:'put'},
dataType: 'json',
success: function (data) {
if (data.error) {
_toastr((data.error),"top-full-width","error",false);
console.log(data);
}
else{
$('.todolist-update-modal').modal('hide');
$("#wrapper").load(location.href+" #wrapper>*","");
_toastr((data),"top-full-width","success",false);
console.log(data);
}
}
});
});
