Grails richui autocomplete for cloned textbox

问题

I am using grails richui autocomplete field in my app. It works fine for my static textbox but when I clone the textbox this feature is not working for the cloned textboxes and it shows no error even.

Any idea of how to fix this

Here is my code:

<resource:autoComplete skin="default" />

at top

<richui:autoComplete name="filterLocation1" id="filterLocation1" delimChar=";"  class="location_txtbox" action="${createLinkTo('dir': 'abc/yyy')}" style="margin-left:5px;"/>

This is my autocomplete field

and I am cloning like this

var counter = 1;
$("#addRow").click(function() {
counter++;
var cln = $('#static_table tbody>tr:last').clone(true);
cln.find("[id^='filterLocation']").each(function(i, val) {
    val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
});

return false;
});

I clone the entire row, do some hide/show operations and increment the ids.

回答1:

When you clone the tr it clone all the content, it include the javascript create by the plugin. This cloned script uses the id of the text field to make it auto complete. This id and text field is required to change to make cloned autocomplete works.

I use following script to change that ids:

<script type="text/javascript">
    var counter = 1;
    function asd() {
        var cloneContent = "<tr>" + $("#firstTrToClone").html().replace(/giveAUniqueId/g, "giveAUniqueId" + counter++) + "</tr>";
        $("#tableId").append(cloneContent);
    }
</script>

Following is my full working page:

<!DOCTYPE html>
<html>
<head>
<resource:autoComplete skin="default"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var counter = 1;
    function asd() {
        var cloneContent = "<tr>" + $("#firstTrToClone").html().replace(/giveAUniqueId/g, "giveAUniqueId" + counter++) + "</tr>";
        $("#tableId").append(cloneContent);
    }
</script>
</head>

<body>
<g:form>
<table id="tableId">
    <tr id="firstTrToClone">
        <td>
            <richui:autoComplete name="name" id="giveAUniqueId" action="${createLinkTo('dir': 'oauthCallBack/test')}"/>
        </td>
    </tr>
</table>
</g:form>

<button onclick="asd()">Clone</button>

</body>
</html>

Try it..,.

来源：https://stackoverflow.com/questions/15608225/grails-richui-autocomplete-for-cloned-textbox

标签

jquery

grails

autocomplete

grails-plugin

gsp