Bootstrap-datetimepicker-动态添加显示在错误的区域 [英] Bootstrap-datetimepicker - dynamically add shows up in wrong area
问题描述
因此，通过ajax写入数据库之后.我的成功职能.构建一个元素并将其附加到表中.然后，将其追加到表后，在该新追加的行上调用datetimepicker.但是，日期时间选择器(日历)显示在一个完全怪异的地方.查看屏幕截图.
So after writing to the DB through ajax. my success function. builds an element and appends it to the table. Then after it appends it to the table it calls a datetimepicker on that new appended row. However the date time picker (calendar) shows up somewhere completely weird. See screen shot.
我应该提到的一件事是，这些注释在选项卡窗格中看起来像
One thing I should mention is that these notes are in a tab-pane it looks like
请参见下面的视图和javascript
Please see below for the view and the javascript
查看:
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<ul class="nav nav-pills">
<li class="active">
<a href="#cdetails" data-toggle="tab">Details</a>
</li>
<li>
<a href="#Quotes" data-toggle="tab">Quotes</a>
</li>
<li>
<a href="#Notes" data-toggle="tab">Notes</a>
</li>
<li>
<a href="#Documents" data-toggle="tab">Documents</a>
</li>
</ul>
<div class="tab-content">
<div id="cdetails" class="tab-pane active">
<table class="table ">
<thead>
</thead>
<tbody>
<tr ><td colspan="4"></td></tr>
<tr><td><b>Code</b></td><td colspan="3">{{$item->code}}</td></tr>
<tr><td><b>Name</b></td><td colspan="3">{{$item->name}}</td></tr>
<tr><td><b>Customer</b></td><td colspan="3">{{$item->customer->company}}</td></tr>
<tr><td><b>Contract Type</b></td><td colspan="3">{{$item->contype}}</td></tr>
<tr><td><b>Contract Amount</b></td><td colspan="3">{{$item->contractAmount}}</td></tr>
<tr><td><b>Hourly Rate</b></td><td colspan="3">{{$item->rate}}</td></tr>
</tbody>
</table>
@if(1 == 2)
<h3>Phases <button class="btn btn-sm btn-primary pull-right" href="#assigntemplate" data-toggle="modal" >Assign a Template</button></h3><hr />
<table class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
@foreach($item->phases as $p)
<tr>
<td>{{$p->name}}</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div><!-- end details tab -->
<div id="Quotes" class="tab-pane">
</div><!-- end of quotes tab -->
<div id="Notes" class="tab-pane">
<table class="table">
<thead>
<tr >
<th class="">Date</th>
<th class="col-md-8">Note</th>
<th class="">Action</th>
</tr>
</thead>
<tbody id="noteListTBody">
<button href="#addNote" data-toggle="modal" class="btn btn-info pull-right" style="color:white; margin:20px 8px 0 0; position:relative; top:-50px; padding:3px; width:30px; height:30x;"><span class="glyphicon glyphicon-plus"></span></button>
@foreach($item->notes as $note)
<tr data-id="{{$note->id}}">
<td><input type="text" class="form-control dpick" name="date" disabled value="{{Carbon\Carbon::parse($note->date)->format('m/d/Y')}}" ></td>
<td><textarea type="text" class="form-control dnote" name="note" disabled>{{$note->note}}</textarea></td>
<td>
<button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
<button class="btn btn-primary pull-right btnEditNote"><span class="glyphicon glyphicon-pencil"></span></button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div><!-- end of notes tab -->
</div>
JAVASCRIPT
JAVASCRIPT
$.ajax({
type: 'POST',
url: "/api/notes",
data: {
'_token' : ajaxtoken,
'item_id' : itemID,
'item_type' : itemType,
'user_id' : userID,
'date' : dateValue,
'note' : noteValue
},
success: function(result) {
console.log(result);
// noteListTBody
var noteRow = `
<tr data-id="`+result.item_id+`">
<td><input type="text" class="form-control dpick" name="date" disabled value="`+dateObject+`" ></td>
<td><textarea type="text" class="form-control" name="note" disabled>`+noteValue+`</textarea></td>
<td>
<button class="btn btn-danger pull-right btnDeleteNote" href="#noteDelete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button>
<button class="btn btn-primary pull-right btnEditNote" ><span class="glyphicon glyphicon-pencil"></span></button>
</td>
</tr>
`;
$('#noteListTBody').append(noteRow);
$('.btnCloseModal').click();
$('#noteListTBody tr[data-id="'+result.item_id+'"]').find('.dpick').datetimepicker({format: 'MM/DD/YYYY'});
}
});
推荐答案
所以我不知道确切的事实.这可能是两个可能的原因之一.
So I do not know the exact fact. It could be one of the 2 possible reasons.
- datetimepicker-需要div包装器来定位目标相对位置
- datetimepicker-需要输入组div包装器用于目标相对定位
无论哪种方式.我在他们的网站上使用了以下代码.
Either way. I used the following code from their site.
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
一旦我这样做了.并将datepicker从直接定位输入定位到定位在其相对位置完美工作的周围的组(div).
Once I did this. And moved the datepicker from targeting the input directly to targeting the group around it (the div) it worked in it's relative positioning perfectly.
这篇关于Bootstrap-datetimepicker-动态添加显示在错误的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
