jquery dynamically form elements and autocomplete -
i have code adds 2 fields , make inputs have autocomplete function:
$("#addelem").click(function () { var new_id = new date().gettime(); var content = '<div id="fields"><input type="hidden" name="softwareperasset.index" value="' + new_id + '" />' + '<select name="softwareperasset[' + new_id + '].name" id="softwareperasset[' + new_id + '].name"> <option value="1">visio</option><option value="2">painter</option></select> ' + '<input type="text" name="softwareperasset[' + new_id + '].serial" id="softwareperasset[' + new_id + '].serial"> <a id="test" href="#">remove software</a></div>'; $("#elem").append(content); }); i have tried adding nothing works:
var data = "notepad firefox chrome".split(" "); content.find('input[type=text]').autocomplete(data); what missing?
update #1 - complete page
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title> index </title></head> <body> <form action="/element/edit" method="post"> <div id="elem"> <!-- if there software installed, s --> <div class="fields"> <input type="hidden" name="softwareperasset.index" value="1" /> <select name="softwareperasset[1].name" id="softwareperasset[1].name"> <option value="1">visio</option> <option value="2">painter</option> </select> <input type="text" name="softwareperasset[1].serial" id="softwareperasset[1].serial" /> <a class="test" href="#">remove software</a> </div> <div class="fields"> <input type="hidden" name="softwareperasset.index" value="2" /> <select name="softwareperasset[2].name" id="softwareperasset[2].name"> <option value="1">visio</option> <option value="2">painter</option> </select> <input type="text" name="softwareperasset[2].serial" id="softwareperasset[2].serial" /> <a class="test" href="#">remove software</a> </div> </div><a href="#" id="addelem">add element</a> <br /> <br /> <input type="submit" name="btnsubmit" value="submit" /> </form> <script src="/jquery-1.9.1.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript"> $(function () { //add element elem div $("#addelem").click(function () { var new_id = new date().gettime(); var content = '<div class="fields"><input type="hidden" name="softwareperasset.index" value="' + new_id + '" />' + '<select name="softwareperasset[' + new_id + '].name" id="softwareperasset[' + new_id + '].name"> <option value="1">visio</option><option value="2">painter</option></select> ' + '<input type="text" name="softwareperasset[' + new_id + '].serial" id="softwareperasset[' + new_id + '].serial"> <a id="test" href="#">remove software</a></div>'; $("#elem").append(content); var data = "notepad firefox chrome".split(" "); $(content).find('input[type=text]').autocomplete(data); }); //remove fields $("#elem").on("click", ".test", function () { $(this).closest("div.fields").remove(); }); }); </script> </body> </html>
content string with html. need make jquery object $(content)
$(content).find('input[type=text]').autocomplete(data);
Comments
Post a Comment