模态形式和自举星级问题
在刀片视图中，我在laravel 5.6中使用这些库：
jQuery版本： 3.2.1
bootstrap-star-rating版本： 4.0.2和4.0.6
当我单击任意行上的显示按钮时，将打开模式形式，并且行信息将显示在模式形式内，但是无法设置星级的值
@extends('admin.layout')
<!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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="{{ asset('images/favicon.jpg') }}">
<!-- CSFR token for ajax call -->
<meta name="_token" content="{{ csrf_token() }}"/>
<!-- icheck checkboxes -->
<link rel="stylesheet" href="{{ asset('icheck/square/yellow.css') }}">
<!-- toastr notifications -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">--}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/css/star-rating.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/star-rating.min.js"></script>
</head>
<body>
<div class="container">
@section('content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1> {{ trans('labels.Reviews') }} <small>{{ trans('labels.ListingAllReviews') }}...</small> </h1>
<ol class="breadcrumb">
<li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
<li class="active">{{ trans('labels.Reviews') }}</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">{{ trans('labels.ListingAllReviews') }} </h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="panel panel-default">
<div class="panel-heading">
<ul>
<li><i class="fa fa-commenting-o"></i> All the current Reviews/Comments</li>
<a href="#" class="add-modal"><li>Add a Review/Comment</li></a>
</ul>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover" id="postTable" style="visibility: hidden;">
<thead>
<tr>
<th valign="middle">#</th>
<th>Customer</th>
<th>Rating</th>
<th>Comment</th>
<th>Published?</th>
<th>Last updated</th>
<th>Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
@foreach($posts as $indexKey => $post)
<tr class="item{{$post->id}} @if($post->is_approved) warning @endif">
<td class="col1">{{ $indexKey+1 }}</td>
<td>{{$post->customer_name}}</td>
<td>{{$post->rating}}</td>
<td>{{$post->comment}}</td>
<td class="text-center"><input type="checkbox" class="published" id="" data-id="{{$post->id}}" @if ($post->is_approved) checked @endif></td>
<td>{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $post->updated_at)->diffForHumans() }}</td>
<td>
<button class="show-modal btn btn-success" data-id="{{$post->id}}" data-rating="{{$post->rating}}" data-customer_name="{{$post->customer_name}}" data-comment="{{$post->comment}}">
<span class="glyphicon glyphicon-eye-open"></span> Show</button>
<button class="edit-modal btn btn-info" data-id="{{$post->id}}" data-rating="{{$post->rating}}" data-customer_name="{{$post->customer_name}}" data-comment="{{$post->comment}}">
<span class="glyphicon glyphicon-edit"></span> Edit</button>
<button class="delete-modal btn btn-danger" data-id="{{$post->id}}" data-rating="{{$post->rating}}" data-customer_name="{{$post->customer_name}}" data-comment="{{$post->comment}}">
<span class="glyphicon glyphicon-trash"></span> Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="col-xs-12 text-right">
{{$posts->links('vendor.pagination.default')}}
</div>
</div><!-- /.panel-body -->
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- Modal form to show a post****************************************************************************************************** -->
<div id="showModal" 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="id_show" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="customer_name">Customer:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="customer_name_show" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="rating">Rating:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="rating_show" disabled>
<input type="name" class="form-control rating rating-loading" id="rating_show1" name="rating_show1" data-min="0" data-max="5" data-step="1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Comment:</label>
<div class="col-sm-10">
<textarea class="form-control" id="comment_show" cols="40" rows="5" disabled></textarea>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal form to edit a form****************************************************************************************************** -->
<div id="editModal" 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="id_edit" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="customer_name">Customer:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="customer_name_edit">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="rating">Rating:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="rating_edit" autofocus>
<p class="errorTitle text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Comment:</label>
<div class="col-sm-10">
<textarea class="form-control" id="comment_edit" cols="40" rows="5"></textarea>
<p class="errorContent text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-primary edit" data-dismiss="modal">
<span class='glyphicon glyphicon-check'></span> Edit
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Show a post***********************************************************************
$(document).on('click', '.show-modal', function() {
$('.modal-title').text('Show');
$('#id_show').val($(this).data('id'));
$('#customer_name_show').val($(this).data('customer_name'));
$('#rating_show').val($(this).data('rating'));
$('#rating_show1').val($(this).data('rating'));
$('#rating_show1').rating('update', $(this).data('rating'));
$('#showModal').modal('show');
});
// Edit a post***********************************************************************
$(document).on('click', '.edit-modal', function() {
$('.modal-title').text('Edit');
$('#id_edit').val($(this).data('id'));
$('#customer_name_edit').val($(this).data('customer_name'));
$('#rating_edit').val($(this).data('rating'));
$('#comment_edit').val($(this).data('comment'));
id = $('#id_edit').val();
$('#editModal').modal('show');
});
$('.modal-footer').on('click', '.edit', function() {
$.ajax({
type: 'PUT',
url: 'reviewsx/' + id,
data: {
'_token': $('input[name=_token]').val(),
'id': $("#id_edit").val(),
'customer_name': $('#customer_name_edit').val(),
'rating': $('#rating_edit').val(),
'comment': $('#comment_edit').val()
},
success: function(data) {
$('.errorCustomer').addClass('hidden');
$('.errorRating').addClass('hidden');
$('.errorComment').addClass('hidden');
if ((data.errors)) {
setTimeout(function () {
$('#editModal').modal('show');
toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
}, 500);
if (data.errors.customer_name) {
$('.errorCustomer_name').removeClass('hidden');
$('.errorCustomer_name').text(data.errors.customer_name);
}
if (data.errors.rating) {
$('.errorRating').removeClass('hidden');
$('.errorRating').text(data.errors.rating);
}
if (data.errors.comment) {
$('.errorComment').removeClass('hidden');
$('.errorComment').text(data.errors.comment);
}
} else {
toastr.success('Successfully updated Post!', 'Success Alert', {timeOut: 5000});
// $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td class='col1'>" + data.id + "</td><td> " + data.title + "</td><td>" + data.content + "</td><td class='text-center'><input type='checkbox' class='edit_published' data-id='" + data.id + "'></td><td>Right now</td><td><button class='show-modal btn btn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphicon glyphicon-eye-open'></span> Show</button> <button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
$('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td class='col1'>" + data.id + "</td><td>" + data.customer_name +"</td><td>" + data.rating + "</td><td>" + data.comment + "</td><td class='text-center'><input type='checkbox' class='edit_published' data-id='" + data.id + "'></td><td>Right now</td><td><button class='show-modal btn btn-success' data-id='" + data.id + "' data-customer_name='" + data.customer_name + "' data-rating='" + data.rating + "' data-comment='" + data.comment + "'><span class='glyphicon glyphicon-eye-open'></span> Show</button> <button class='edit-modal btn btn-info' data-id='" + data.id + "' data-customer_name='" + data.customer_name + "' data-rating='" + data.rating + "' data-comment='" + data.comment + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-customer_name='" + data.customer_name + "' data-rating='" + data.rating + "' data-comment='" + data.comment + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
if (data.is_approved) {
$('.edit_published').prop('checked', true);
$('.edit_published').closest('tr').addClass('warning');
}
$('.edit_published').iCheck({
checkboxClass: 'icheckbox_square-yellow',
radioClass: 'iradio_square-yellow',
increaseArea: '20%'
});
$('.edit_published').on('ifToggled', function(event) {
$(this).closest('tr').toggleClass('warning');
});
$('.edit_published').on('ifChanged', function(event){
id = $(this).data('id');
$.ajax({
type: 'POST',
url: "{{ URL::route('changeStatus') }}",
data: {
'_token': $('input[name=_token]').val(),
'id': id
},
success: function(data) {
// empty
},
});
});
$('.col1').each(function (index) {
$(this).html(index+1);
});
}
}
});
});
</script>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
@endsection
</div>
</body>
</html>
当我单击显示按钮时，我想以模态形式显示评级字段值（如星号）
与编辑表单相同
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？