Why my Autocomplate not work in Dialog?
I have dialog that contain autocomplate.
- <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
label, input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 10px 10px 10px 10px;
border: 2;
border-style: solid #fff;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 100%;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td, div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
#dialog-form {
display: none;
}
</style>
</head>
<body>
<!-- dialog -->
<div id="dialog-form" title="Tambah Petugas">
<form>
<fieldset>
<label for="cari">Cari :</label>
<input type="text" name="cari" id="cari" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<button id="create-user">Tambah Petugas</button>
</div>
<!-- js -->
<script type="text/javascript">
$(function () {
<!-- new dialog -->
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
var config = {
autoOpen: true,
height: 500,
width: 700,
modal: true,
buttons: {
"Add": save_data,
"Cancel": function () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
dlg.dialog(config);
function save_data() {
$( "#users tbody" ).load( "load.php?");
dlg.dialog("close");
}
};
$( "#cari" ).autocomplete({
source: [ "one", "two", "three" , "four" , "five", "six"]
});
<!-- button click create-user -->
$("#create-user").button().click(new_dialog);
});
</script>
</body>
</html>
what is my mistake? what should i do ?
thanks a lot for your help.