2013-03-25 78 views
3

我在我的应用程序中使用grails richui autocomplete字段。 它适用于我的静态文本框,但是当我克隆文本框时,此功能对克隆的文本框无效,甚至不显示任何错误。Grails richui自动完成克隆文本框

的如何解决这一问题

这里的任何想法是我的代码:

<resource:autoComplete skin="default" /> 

在顶部

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

这是我的自动完成场

,我克隆样这

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; 
}); 

我克隆整个行,做一些隐藏/显示操作并增加id。

+0

关于如何解决它的很多想法...但你需要向我们展示你的代码.... – bipen 2013-03-25 05:28:40

+0

我已编辑并给我的代码bipen ..... – user1934095 2013-03-25 05:43:07

+0

你怎么在jQuery中调用自动完成? ? – bipen 2013-03-25 05:47:40

回答

0

当你克隆tr它克隆所有的内容,它包括由插件创建的javascript。此克隆脚本使用text fieldid使其成为auto complete。此id和文本字段需要更改以进行克隆的自动完成工作。

我用下面的脚本来改变这种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> 

以下是我的全部工作页:

<!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> 

试试吧..,。