[go: nahoru, domu]

Skip to content

gowdarn/dynamic-blocks-taglib

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project that demonstrates how to use the tag library described in the post:

This is a project sample that demonstrates Grails tag library for dynamic placing of identical HTML blocks to a GSP. The tag library can be used when you want to give user an option to dynamically add extra inputs for additional information. With this tag library, you are able to:

  • dynamically add and remove single-type blocks of HTML elements;
  • set the minimum and maximum number of blocks;
  • use separate GSP template as a HTML block.

The tag library is described in detail in this article: http://sysgears.com/articles/dynamically-add-and-remove-html-blocks-with-grails-tag-library-and-jquery/.

The tag library provides a single 'block' tag and you can pass the following parameters to it in order to set up its behavior:

  • itemId - the prefix for the item id (every item id consists of the prefix and the index number)
  • template - the name of a GSP template that contains HTML code for every item (if missing, the tag's body will be used)
  • model - the model passed to the GSP template
  • addBtnId - The id of the 'add' button, the page must contain an element with this id to provide custom 'add' button; if isn't specified, the default 'add' button will be rendered
  • removeBtnLabel - the label of the 'remove' button that is rendered for each item (defaults to 'Remove')
  • min - the minimum number of items (the number of items that are rendered by default)
  • max - the maximum number of items that can be added to the page
  • limitReachedMsg - the message displayed when the limit is reached
  • onComplete - the name of a JS function that will be executed right after a new item is added (must accept the item index number)

The only required parameter is itemId, all other parameters are optional.

  1. Copy the following files to the specified directories:
    • DynamicBlocksTagLib.groovy - to the <project_root>/grails-app/<package_name>/taglib directory
    • _add.gsp - to the <project_root>/grails-app/views/partials/dynamicBlocks directory
    • dynamicBlocks.js - to the <project_root>/web-app/js directory
  2. Add JQuery library to your GSP page or layout:
<g:javascript src="jquery/jquery-1.8.2.min.js"/>
  1. Add the dynamic:block tag to your GSP page, specify HTML template and pass necessary parameters to the tag:
<g:form controller="dynamicBlocks" action="submitAction" style="margin: 100px;">
    <p>Enter a full name and birthday:</p>
    <dynamic:block itemId="fullName" min="2" max="5" addBtnId="addFullName" removeBtnLabel="Delete"
                    limitReachedMsg="Limit is exceeded!">
        <g:textField name="firstName"/>
        <g:textField name="lastName"/>
        <g:textField name="birthday" id="birthday"/>
        <input id="addFullName" type="button" value="Add another name"/>
    </dynamic:block>
</g:form>
  • Grails 1.3.7 or higher
  • JQuery v1.5 or higher

About

Allows to dynamically add / remove HTML blocks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Groovy 76.1%
  • CSS 13.4%
  • JavaScript 10.5%