当输入框暗示为模态时,HTML ajax标签不显示
HTML ajax label not showing when the input box is insinde a modal
我有一个模态,这个简单的模态:
<div id="mod-quicksend" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<h4>Selecciona un correo electronico: </h4>
<div class="row">
<form id="modal-form-close" method="post">
<input type="text" hidden value="quicksendquote" name="type">
<input type="text" hidden value="{{ $quote->id }}" name="id">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<select class="form-control" name="email[select]">
<option></option>
@foreach($quote->Customer->Contacts as $key)
<option value="{{ $key->email }}">{{$key->email}}</option>
@endforeach
</select>
</div>
</div>
<h2>ó</h2>
<h3>digita un correo electronico:</h3>
<div class="row">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<input type="text" name="email[type]" class="form-control" id="getEmail" autocomplete="off" >
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Cerrar</button>
<button type="button" id="submit" data-dismiss="modal" class="btn btn-success">Aceptar</button>
</div>
</div><!-- /.modal-content-->
</div><!-- /.modal-dialog-->
</div><!-- /.modal-end-->
这是Js代码:
$('#getEmail').autocomplete({
source: function (request, response) {
$.ajax({
url: '{{ URL::to('/ajax') }}',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function (data) {
response($.map(data, function (item) {
var code = item.split("|");
return {
label: "this is a label",
value: code[0],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function (event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});
我的问题是,当开始在输入框中输入时,标签没有显示在模态中,我可以在firebug上看到ajax请求是成功的,如果我把输入框放在模态之外,标签显示得很好,我甚至硬编码"这是标签"来测试,但仍然没有骰子。
有什么想法吗?
更新:
我相信标签显示在模式框下方,请参阅此示例:
https://jsfiddle.net/5qewtgcr/注::::您必须在jsfiddle上单击run,标签才会显示在模态框下方,为什么?我不知道,也许jsfiddle有问题,或者我的只是我的浏览器。
终于找到了答案:
.ui-autocomplete
{
z-index: 99999; //Maximum and top of everything (not absolutely :| )
}
获取自:JQuery UI自动完成引导模式中的内容
jsfiddle:https://jsfiddle.net/5qewtgcr/2/
我已经更新了你的小提琴。这是最新的小提琴,请查收https://jsfiddle.net/5qewtgcr/1/
我在autocomplete
div
标签中添加了html类:这是jQuery代码:
$('#getEmail').autocomplete({
source: function(request, response) {
$.ajax({
url: 'echo',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return $(document).find('.input-group-text').append("this is a label" +item + code[0]);
/*{
label: "this is a labelxysxysyxsyxsyxysxysxysyxsyxysxysyxsyxysxysyxsyxysyxysxysyxsyxysxysyxsyxy",
value: code[0],
data: item
}*/
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function(event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});
相关文章:
- php函数的ajax html$_POST值返回null
- ajax html javascript页面刷新无闪烁问题
- Ajax html document I18n
- "r 〃;在jquery-ajax-html的警报中
- 在ajax html返回中调用ajax会阻止第一个ajax脚本进一步工作
- 使用AJAX html()加载Django模板导致不需要的文本
- PDF 文件上传 AJAX HTML
- Jquery ajax html replace
- AJAX HTML 函数未获取文本区域值
- jquery ajax html 与 Google Chrome 和 Firefox 的问题
- ajax ,html and javascript
- 函数在jQuery ajax html注入后不起作用
- 等待ultil-ajax.html成功加载对象
- 将AJAX HTML响应读取到JavaScript数组中
- ajax HTML内容未在bootstrap pop中呈现
- 将当前页面数据存储在一个变量中,其格式/结构与Ajax html响应相同
- 解析AJAX HTML响应:我可以找到元素,但不能访问它们的innerHTML或值
- 加载页面并淡入或淡出ajax html
- AJAX HTML响应中的链接在被点击后会失去点击
- AJAX/HTML如何存储复杂的数据