Applying plugin on append/dynamically created combo-box
greetings,
I am pretty new to jquery and java script at all.
Currently I'm using jquery with the sexy-combo plugin and I got following code:
-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery.sexy-combo-2.1.2.min.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/examples/usage.js"></script>
<link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/lib/sexy-combo.css" />
<link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/skins/sexy/sexy.css" />
<script type="text/javascript">
<!--function adds an selection field-->
function addSelectionField() {
$("#basic-combo").sexyCombo();
var id = document.getElementById("id").value;
<!--this appends the label "compound No" with the selection field and with the remove button--remove button and selection field are set as hide()-->
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>sweets " + id + " <select id='basic-combo' name='basic-combo' size='1'><option>cookies</option><option>chocolate</option></select>  <input name='Remove' type='button' value='Remove' onClick='removeSelectionField(\"#row" + id + "\"); return false;' /><p>");
<!--auto increment number of the fields-->
id = (id-1)+2;
document.getElementById("id").value = id;
}
<!--function removes an selection field-->
function removeSelectionField(id) {
$(id).remove();
}
</script>
As you can see these lines of code do create a combo-box with an "remove" button
-
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>sweets " + id + " <select id='basic-combo' name='basic-combo' size='1'><option>cookies</option><option>chocolate</option></select>  <input name='Remove' type='button' value='Remove' onClick='removeSelectionField(\"#row" + id + "\"); return false;' /><p>");
everything works fine except that the sexy-combo plugin/theme is not being applied on the addSelectionField function
Do you know any ways of applying the sexy-combo on the combo-boxed seen in the source code ?
With best regards
leejin