JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.emposha.com/demo/fcbkcomplete_2/jquery.fcbkcomplete.min.js"></script>
<link rel="stylesheet" href="http://www.emposha.com/demo/fcbkcomplete_2/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<body>
<div id="dialogOne">
<h1>FCBKcomplete Demo</h1>
<form action="submit.php" method="POST" accept-charset="utf-8">
<select id="selectOne" name="selectOne">
<option value="test1 title="aaaaa">sleep</option>
<option value="test3">sport</option>
<option value="test3">freestyle</option>
<option value="2">Терешкова Валентина</option>
</select>
<br/>
<br/>
<input type="submit" value="Send">
</form>
</div>
<input type="button" id="triggerOne" value="Open Dialog One" /><br/><br/>
<input type="button" id="loadTwo" value="Load Dialog Two" /><br/><br/>
<input type="button" id="loadThree" value="Load Dialog Three" />
</body>
JavaScript
// EXAMPLE ONE: (working)
$("#dialogOne").dialog({
autoOpen: false,
width: 550,
modal: true,
title: "FCBKcomplete Trial"
});
$("#selectOne").fcbkcomplete({
json_url: "/echo/json/",
addontab: true,
cache: true,
height: 2
});
$("#triggerOne").click(function() {
$("#dialogOne").dialog('open');
}).button();
// ABOVE SHOULD WORK CORRECTLY: its static DOM items, there is a little clue for later......
// EXAMPLE TWO: (broken)
// Replicate loading data - as though it had been returned from ajax:
$("#loadTwo").click(function() {
// Add the data to the end of the page:
$("body").append(''
+'<div id="dialogTwo"> '
+' <h1>FCBKcomplete Demo Two</h1> '
+' <form action="submit.php" method="POST" accept-charset="utf-8"> '
+' <select id="selectTwo" name="selectTwo"> '
+' <option value="test1">sleep</option> '
+' <option value="test3">sport</option> '
+' <option value="test3">freestyle</option> '
+' <option value="2">Терешкова Валентина</option> '
+' </select> '
+' <br/> '
+' <br/> '
+' <input type="submit" value="Send"> '
+' </form> '
+' </div>'
+' <input type="button" id="triggerTwo" value="Open Dialog Two" /><br/><br/');
}).button();
// Just as before setup the dialog (buuuut, the div isn't there yet ;) ):
$("#dialogTwo").dialog({
autoOpen: false,
width: 550,
modal: true,
title: "FCBKcomplete Trial"
});
// Initiate the FCBKcomplete (buuuut, the select input isn't there yet ;) ):
$("#selectTwo").fcbkcomplete({
json_url: "/echo/json/",
addontab: true,
cache: true,
height: 2 ...