[英]pass value through <a href=“#myModel” ></a> tag (pass data value value using link in html)?
I use a href to call same page dialog box id. 我使用href来调用同一页面的对话框ID。
this is my part of code 这是我的代码部分
<tbody>
@foreach ($basl_officers as $basl_officer)
<tr >
<td><a href="#myModal" data-toggle="modal" data-target="#myModal"> {{ $basl_officer->code }} </a></td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['basl_officers_page.destroy',$basl_officer->id]]) !!}
<a href="{{route('basl_officers_page.edit',$basl_officer->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
//Model dialogue box code //模型对话框代码
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
<h4 class="modal-title">BASL Officers Details {{ $basl_officer }} </h4>
</div>
<!-- text input -->
<div class="modal-body">
{!! Form::label('o_code', 'Officers Code: '); !!}
{!! Form::text('officers_code', null, ['class' => 'form-control', 'id' => 'officers_code','disabled' => 'disabled']); !!}
{!! Form::label('o_name', 'Officers Name: '); !!}
{!! Form::text('officers_name', null, ['class' => 'form-control', 'id' => 'officers_name','disabled' => 'disabled']); !!}
</div>
</div>
</div>
</div>
I want to pass select table row , $basl_officer object to this #myModal dialogue.is there any way to do this? 我想将选择表行$ basl_leg对象传递给此#myModal对话。有什么办法吗? please expect some expert help as soon as possible.
请尽快寻求专家的帮助。 since one week I try to do this different way .I use Laravel 5 framework.
从一个星期开始,我尝试以不同的方式进行操作。我使用Laravel 5框架。
///////////////////full code/////////////////////////////////////////////// //////////////////完整代码////////////////////////////// //////////////////
@extends('layouts.app')
@section('slide_bar')
@include('layouts.master_entry_slide_bar')
@endsection
@section('content')
<section class="content-header">
<h1>BASL Officers <small>page </small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content fluid">
<div class="row">
<div class="box">
<div class="gap">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>BASL Officers Code</th>
<th>BASL Officers Name</th>
<th><p id='buttons'> <a href="{{ route('basl_officers_page.create')}}" class="btn btn-success"> <strong> Add New Officers   </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
</tr>
</thead>
<tbody>
@foreach ($basl_officers as $basl_officer)
<tr >
<td><a href="#myModal" data-toggle="modal" data-target="#myModal"> {{ $basl_officer->code }} </a></td>
<td><a href="#" >{{ $basl_officer->officerName }} </a></td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['basl_officers_page.destroy',$basl_officer->id]]) !!}
<a href="{{route('basl_officers_page.edit',$basl_officer->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>BASL Officers Code</th>
<th>BASL Officers Name</th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
<h4 class="modal-title">BASL Officers Details {{ $basl_officer }} </h4>
</div>
<!-- text input -->
<div class="modal-body">
<p>One fine body…</p>
{!! Form::label('o_code', 'Officers Code: '); !!}
{!! Form::text('officers_code', null, ['class' => 'form-control', 'id' => 'officers_code','disabled' => 'disabled']); !!}
{!! Form::label('o_name', 'Officers Name: '); !!}
{!! Form::text('officers_name', null, ['class' => 'form-control', 'id' => 'officers_name','disabled' => 'disabled']); !!}
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("bd_menu");
document.getElementById("bd_menu").className = "active";
var slide_bar_element = document.getElementById("bd_submenu1");
document.getElementById("bd_submenu1").className = "active";
</script>
<script>
$('#myModal').on('shown.bs.modal', function (e) {
$('.modal-body').text($(e.relatedTarget).text());
}
</script>
@endsection
I want to show selected table row data value in this dialog box 我想在此对话框中显示选定的表行数据值
You can make use of bootstrap-modal
's shown.bs.modal
event and capture the related target
which triggered the modal
as below: 您可以使用
bootstrap-modal
的shown.bs.modal
事件并捕获触发该modal
的related target
,如下所示:
$('#myModal').on('shown.bs.modal', function (e) {
alert($(e.relatedTarget).text());
})
Update 更新资料
By seeing your code structure, I can give you one possible solution which is as below: 通过查看您的代码结构,我可以为您提供以下一种可能的解决方案:
<script type="text/javascript">
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("bd_menu");
document.getElementById("bd_menu").className = "active";
var slide_bar_element = document.getElementById("bd_submenu1");
document.getElementById("bd_submenu1").className = "active";
//modal part
$('#myModal').on('shown.bs.modal', function (e) {
$('.modal-body #officers_code').val($(e.relatedTarget).text());
//assign officers code to officers_code textbox
$('.modal-body #officers_name').val($(e.relatedTarget).closest('td').next().find('a').text())
//get the relatedTarget elements next anchor element and assign its text to officers_name textbox
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.