[英]HTML ajax label not showing when the input box is insinde a modal
I have a modal this simple 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-->
and this is the Js code: 这是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]);
}
});
My problem is that when start typing in the input box the label doesnt show inside the modal, I can see on firebug that the ajax request is successful and if I place the input box outside the modal the label displays fine, I even hard-coded "this is label" to test and still no dice. 我的问题是,当开始在输入框中键入内容时,标签不会显示在模式中,我可以在Firebug上看到ajax请求成功,如果将输入框放在模式之外,则标签会显示正常,甚至会进行硬编码“这是标签”进行测试,仍然没有骰子。
Any ideas? 有任何想法吗?
UPDATE: 更新:
I believe the label is showing below the modal box, see this example: 我相信标签会显示在模式框下方,请参见以下示例:
https://jsfiddle.net/5qewtgcr/ NOTE::::: You have to click run on jsfiddle for the label to show below the modal box, why? https://jsfiddle.net/5qewtgcr/注意::::::您必须单击在jsfiddle上运行以使标签显示在模式框下方,为什么? I dont know, maybe jsfiddle is having problems or my its just my browser.
我不知道,也许jsfiddle遇到了问题,或者只是我的浏览器。
Finally found the answer: 终于找到了答案:
.ui-autocomplete
{
z-index: 99999; //Maximum and top of everything (not absolutely :| )
}
Got it from: JQuery UI autocomplete for content in bootstrap modal 从以下来源获得: 用于引导模式的内容的JQuery UI自动完成
jsfiddle: https://jsfiddle.net/5qewtgcr/2/ jsfiddle: https ://jsfiddle.net/5qewtgcr/2/
I have update your fiddle. 我已经更新了你的小提琴。 Here is the updated fiddle , please check it https://jsfiddle.net/5qewtgcr/1/
这是更新的小提琴,请检查它https://jsfiddle.net/5qewtgcr/1/
I have add html class in autocomplete
div
tag : Here is jQuery code : 我在
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]);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.