Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

grails-one-to-many-dynamic-forms updated

By: a guest on Jan 10th, 2012  |  syntax: Rails  |  size: 2.92 KB  |  views: 167  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. _phone.gsp :
  2. <div id="phone${i}" class="phone-div" <g:if test="${hidden}">style="display:none;"</g:if>>
  3.     <g:hiddenField name='phones[${i}].id' value='${phone?.id}'/>
  4.     <g:hiddenField name='phones[${i}].deleted' value='false'/>
  5.         <g:hiddenField name='phones[${i}].new' value="${phone?.id == null?'true':'false'}"/>
  6.    
  7.     <g:textField name='phones[${i}].number' value='${phone?.number}' />    
  8.     <g:select name="phones[${i}].type"
  9.         from="${blog.omarello.Phone.PhoneType.values()}"
  10.         optionKey="key"
  11.         optionValue="value"
  12.         value = "${phone?.type?.key}"/>
  13.    
  14.     <span class="del-phone">
  15.         <img src="${resource(dir:'images/skin', file:'icon_delete.png')}"
  16.             style="vertical-align:middle;"/>
  17.     </span>
  18. </div>
  19.  
  20.  
  21.  
  22. _phones.gsp :
  23. <script type="text/javascript">
  24.     var childCount = ${contactInstance?.phones.size()} + 0;
  25.  
  26.     function addPhone(){
  27.       var clone = $("#phone_clone").clone()
  28.       var htmlId = 'phones['+childCount+'].';
  29.       var phoneInput = clone.find("input[id$=number]");
  30.  
  31.       clone.find("input[id$=id]")
  32.              .attr('id',htmlId + 'id')
  33.              .attr('name',htmlId + 'id');
  34.       clone.find("input[id$=deleted]")
  35.               .attr('id',htmlId + 'deleted')
  36.               .attr('name',htmlId + 'deleted');
  37.       clone.find("input[id$=new]")
  38.               .attr('id',htmlId + 'new')
  39.               .attr('name',htmlId + 'new')
  40.               .attr('value', 'true');
  41.       phoneInput.attr('id',htmlId + 'number')
  42.               .attr('name',htmlId + 'number');
  43.       clone.find("select[id$=type]")
  44.               .attr('id',htmlId + 'type')
  45.               .attr('name',htmlId + 'type');
  46.  
  47.       clone.attr('id', 'phone'+childCount);
  48.       $("#childList").append(clone);
  49.       clone.show();
  50.       phoneInput.focus();
  51.       childCount++;
  52.     }
  53.  
  54.     //bind click event on delete buttons using jquery live
  55.     $('.del-phone').live('click', function() {
  56.         //find the parent div
  57.         var prnt = $(this).parents(".phone-div");
  58.         //find the deleted hidden input
  59.         var delInput = prnt.find("input[id$=deleted]");
  60.         //check if this is still not persisted
  61.         var newValue = prnt.find("input[id$=new]").attr('value');
  62.         //if it is new then i can safely remove from dom
  63.         if(newValue == 'true'){
  64.             prnt.remove();
  65.         }else{
  66.             //set the deletedFlag to true
  67.             delInput.attr('value','true');
  68.             //hide the div
  69.             prnt.hide();
  70.         }
  71.     });
  72.  
  73. </script>
  74.  
  75. <div id="childList">
  76.     <g:each var="phone" in="${contactInstance.phones}" status="i">
  77.        
  78.         <!-- Render the phone template (_phone.gsp) here -->
  79.         <g:render template='phone' model="['phone':phone,'i':i,'hidden':false]"/>
  80.         <!-- Render the phone template (_phone.gsp) here -->
  81.        
  82.     </g:each>
  83. </div>
  84. <input type="button" value="Add Phone" onclick="addPhone();" />