javascript - 如何在 php laravel 中创建一个 javascript 弹出输入字段?
问题描述
我正在尝试制作一个弹出模块,一旦单击按钮,它就会显示一个弹出窗口,其中包含一些用户可以填写并保存的字段,例如姓名等。但是我试图这样做,但我似乎无法将它连接在一起。我不确定是否有人可以指导我应该将 html css 和 javascript 放在哪里?正如我使用 php laravel 一样。
这是查看页面。
@extends('layouts.adminmaster')
@section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
@csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</div>
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th>
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
@if (Auth::user()->role == "admin")
<th>Action</th>
@endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
@foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>
<td>
@if ($place->status==0)
<span style="color: green">Available</span>
@endif
@if ($place->status==-1)
<span style="color: gray"> Not Available </span>
@endif
@if ($place->status==2)
<span style="color: red"> Booked </span>
@endif
</td>
@if (Auth::user()->role == "admin")
<td> <a href="{{ route('admin.place.edit', $place->place_id) }}">Edit</a> /
@if ($place->status == -1)
<a href="{{ route('admin.place.changestatus', $place->place_id) }}">Activate</a>
@else
<a href="{{ route('admin.place.changestatus', $place->place_id) }}">Deactivate</a>
@endif
</td>
@endif
<td>
@if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END
@endif
@if ($place->status==-1)
<span>Book</span>
@endif
@if ($place->status==2)
<span>Booked</span>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
<script>
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
@endsection
解决方案
你可以这样做
<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (£)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach($orderList as $result)
<tr>
<td>{{$result->id}}</td>
<td>
<a href="#" data-toggle="modal" data-target="#project-details">{{$output[0]}} </br> {{$output[1]}}</a>
</td>
@endforeach
</tbody>
</table>
然后在您的部分结束的任何地方添加模型
<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail
</div>
</div>
</div>
<div class="orderDetail"> Order Detail </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
现在,当您每次单击锚标记时,它都会打开此模型。
推荐阅读
- android - 如何自动将 App Bundle 发布到 Google Play 商店?
- python - 使用数组更改列中的所有熊猫数据框单元格
- php - Readfile 返回一个空文件
- java - JPA:从另一个表中加入特定列
- php - 为 foreach() 提供的参数无效
- angular - Angular - 对多个 HTTP 请求进行排序
- react-native - 小吃栏中的 onDismiss 功能在 react-native-paper 中不起作用
- javascript - 在 mapStateToProps 之前初始化状态?
- merge - Puppet - 深度合并查找 default_value 并返回 hiera 哈希
- flask - 更改airflow.cfg 后导入身份验证后端失败