Grails richui autocomplete for cloned textbox

Question

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.

lots of idea about how to fix it... but you need to show us your code.... — bipen, Mar 25 '13 at 05:28
No I am calling autocomplete through jquery.The tag worked for the static row.And I dont know how to call in jquery. — user1934095, Mar 25 '13 at 05:50
Is there anything I have to do specifically to make autocomplete to work for that field — user1934095, Mar 25 '13 at 05:59
sorry my second comment is wrong it is.. No I am not calling autocomplete through jquery.The tag worked for the static row.And I dont know how to call that using jquery — user1934095, Mar 25 '13 at 06:08
be aware that your tag is executed serverside, you should take a look at the rendered/generated html/js to get an idea how to also clone the functionality or what could go wrong by cloning it (duplicate id´s i guess) — john Smith, Nov 12 '13 at 20:47

score 0 · Answer 1 · answered Nov 12 '13 at 18:31

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..,.

Grails richui autocomplete for cloned textbox

1 Answers1

Linked