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
});
});
});
});