admin管理员组文章数量:1346332
I want autoplete feature on bootstrap modal. JQuery autoplete is working fine on simple page, but in case of modal autoplete not working. I am not able to solve this problem. I don't know how to solve this. I am new in jQuery. Any body please help. I attached my code snippet.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=".0.0/css/bootstrap.min.css">
<title>jQuery UI Autoplete - Default functionality</title>
<link rel="stylesheet"
href="//code.jquery/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="jquery-1.12.4.js"></script>
<script src=".12.1/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$.ajax(
{
url:"http://localhost:8080/ITCBillDesk/retrievePaymentPurposeDesc"
}).then(function(data)
{
console.log(data);
$("#tags").autoplete(
{
source: data
});
});
});
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ui-widget">
<label for="tags">Tags: </label> <input id="tags">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src=".0.0/js/bootstrap.min.js"></script>
</body>
</body>
</html>
I want autoplete feature on bootstrap modal. JQuery autoplete is working fine on simple page, but in case of modal autoplete not working. I am not able to solve this problem. I don't know how to solve this. I am new in jQuery. Any body please help. I attached my code snippet.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<title>jQuery UI Autoplete - Default functionality</title>
<link rel="stylesheet"
href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$.ajax(
{
url:"http://localhost:8080/ITCBillDesk/retrievePaymentPurposeDesc"
}).then(function(data)
{
console.log(data);
$("#tags").autoplete(
{
source: data
});
});
});
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ui-widget">
<label for="tags">Tags: </label> <input id="tags">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</body>
</html>
-
What do you see when
console.log(data);is executed? – ZorgoZ Commented Aug 11, 2019 at 18:54 - yes that is executed for modal also that is data is printed on console. – Debasish Ghosh Commented Aug 11, 2019 at 18:55
- Paste the result you see on the console. Autoplete requires either an array of primitives or an array of name-id objects. – ZorgoZ Commented Aug 11, 2019 at 18:56
- [ "BOARDING CHARGE", "FINE", "LATE FEE", "BOARDING\n CHARGE", "EXAM.FEES", "DONATION ", "GOVERMENT FEES", "INSTITUTE FEES", "INSTITUTE\n FEES", "GOVT. FEES", "Inst.Fees ", "Inst.Fees\n ", "Late Fine", "sale proceeds", "TUITION FEE PHYSICS", "Tution Fees", "sale proceeds of wastes food", "Computer Course Fees", "SALE PROCEEDS OF COAL DUST", "GOVERMENT FEES FOR XII", "INSTITUTE FEES FOR XII", "BOARDING CHARGE FOR XII" ] – Debasish Ghosh Commented Aug 11, 2019 at 18:58
- My Autoplete feature is working fine on simple page not working for modal only #zorgoz – Debasish Ghosh Commented Aug 11, 2019 at 19:00
2 Answers
Reset to default 12in modal-body add class ui-front
<div class="modal-body ui-front"></div>
$(document).ready(function()
{
$("#myModal").on('show.bs.modal', function ()
{
$.ajax(
{
url:"http://localhost:8080/ITCBillDesk/retrievePaymentPurposeDesc"
}).then(function(data)
{
console.log(data);
$("#testid").autoplete(
{
source:data
});
});
});
});
本文标签： javascriptjquery Autocomplete not working in Bootstrap modalStack Overflow
版权声明：本文标题：javascript - jquery Autocomplete not working in Bootstrap modal - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743826956a2545815.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论