We Keep Coding

Best practice for generating html ids with grails

I have a template that could be rendered multiple times within the same view.
The template contains a form and I have some jquery event listeners attached to the form elements using the html id.
For now I'm using 'g:set' to create an elementId variable at the top of the template using the current time in milliseconds and appending it to each element on the form. This way each form element will have a unique id within the page no matter how many times the same template is rendered.
My approach works but it seems to me that there must be a better way to achieve what I want to do?
Heres an example of my approach :
<g:set var="elementId" value="${'elementId-' + new Date().getTime()}" />
<form>
<g:textField id="${elementId}name" name="name"/>
<g:textField id="${elementId}address" name="address"/>
</form>
<script>
$("#${elementId}name").on("click", myFunction())
$("#${elementId}address").on("click", myFunction())
</script>

While it may feel a bit 'odd' or 'strange' to do this, your approach will accomplish what you are after. Adding in a random number or UUID that you generate at the GSP level too would help avoid collisions (though that may be overkill).
Grails doesn't offer any assistance in this manner per say. Since this is a concern of how elements are addressed in the browsers DOM and Grails typically addresses server-side concerns.
The alternative is to refactor your code to not rely upon element ids but rather something more generic and based on classification instead. Using class names would be a good approach. Depending on your requirements this may or may not work well.

JS templating engine that preserves elements

I have the following problem:
A have a web application where I regularly need to update the user interface when data changes. The data consists of a list of items with different attributes. Because the UI representations of these items can be complex, I use JS templating to render them. When they change I just replace them in the DOM with the HTML representing their updated state.
This approach is simple but has several problems:
you need to re-attach all event handlers because you practically replace elements
there is a flickering effect when reloading resources (probably can be solved using document fragments)
it's impossible to work with developer tools (inspector) if the content changes frequently because, again, all the elements are replaced
So I was wondering if there is any JS templating engine of that many that can deal with the situation. I'm thinking of a feature that intelligently matches elements of the new render and an old one and only changes the content when it has really changed.
I'm thinking of something like this:
Old HTML
<div>
<h1>TV</h1>
<span>$250</span>
Add to cart
</div>
New HTML
<div>
<h1>TV</h1>
<span>$260</span>
Add to cart
</div>
The templating engine find the <span> in the original DOM and replaces its changed value but leaves the rest of the elements intact.

Finally I came across Rivets.js which a lightweight, highly extensible JavaScript templating engine with real time data binding. I love it so far, it's exactly what I needed.

you can try the AngularJS
A simple example:http://jsbin.com/opayuf/4/edit
you can check out these examples if they can meet your requirements
http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
HandleBarsJs may be the one you need, you could see the discussion on
Handlebars.js: Use a partial like it was a normal, full template
You can also try Ember js based on HandlerBarsJs, you can check is out
http://emberjs.com/guides/templates/handlebars-basics/
http://emberjs.com/guides/templates/rendering-with-helpers/

Best practice to avoid element name conflicts in views - BoilerplateJS

Imagine you have several components in your application, each having its own view.
While the components are independent, their views may use the same identifiers for DOM elements, e.g. there is a chance that 2 or more components would have views with similar input control like:
<label for="Bid">Bid</label>
<input type="text" id="Bid" name="Bid" value="0"/>
After components are activated, their views are attached to the DOM by Boiler.ViewTemplate, and now there's a name conflict for Bid element, causing side effects, e.g. clicking on the label works only in 1 view, and is disabled in the others.
What is the best practice to avoid such collisions? Should i use "unique" suffix/prefix for all elements in my views, like id="ComponentName_Bid"? Or there is more elegant solution?

This is indeed a very good question. I too struggled with it many times. Sometime back I did an implementation of giving an auto generated unique id for every ViewTemplate instance.
This UID could be used from JS logic (viewmodel.js etc) by passing it from the ViewTemplate instance.
This could be used by view.html as well as by the component specific .css file as a tag {comp.uid} which will be replaced by a special ViewTemplate logic, just as used for 'nls' replacement (see line 105 at view-template.js).
That ofcourse worked, but the complexity was too much for the developers to understand. So in a later version of BoilerplateJS I removed this functionality and let developers to manage the elementIDs manually as you have suggested above.
I still do not know what the best approach for this.. but for the moment I believe managing it manually results in a much cleaner code.

Another option is to simply put input inside label like this:
<label>
Last Name
<input type="text" name="lastname" />
</label>

Is there a way to create your own HTML element?

Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).

No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.

Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.

You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx

No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css

It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.

Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.

With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org

Using Javascript to add HTML?

I was wondering if it was possible to get Javascript to write some HTML onto the page in a certain DIV.
This is due to the fact, there are certain areas of the site where i don't have access to the markup. But i would like to add a small section there.
For example the container i want to add some html to is
<div id="topics"></div>
Is it possible to get Javascript to do this
<*div id="topics"> <div id="mysection"> </div> <*/div>
Many thanks!

This is fairly simple to do, even using plain JavaScript.
var topicsDiv = document.getElementById("topics");
topicsDiv.innerHTML = '<div id="mysection"> </div>';
If you're going to be doing some serious DOM (Document Object Model, i.e. HTML structure) manipulation, however, then I would recommend you look into using the JQuery library. Yet if the task is limited to your question, then normal JavaScript should be fine, as shown above.

With simple Javascript (without JQuery or something you could do):
HTML:
<div id="topics"></div>
JS:
document.getElementById('topics').innerHTML = '<div id="mysection"></div>';
Using JQuery you would simply do:
$('#topics').append('<div id="mysection"></div>');

Of course. For example, you can do this using Prototype:
$('topics').update('<div id="mysection"></div>');
The syntax is quite similar for jQuery or another frameworks, and as Noldorin noted, you can do also this without any framework.

You are probably looking for the innerHTML property
document.getElementById('topics').innerHTML = 'whatever';

I agree with both Noldorin and Can Berk Güder and others, and I'd like to quote that this is DOM (Document Object Model) and one of the main components of AJAX.
AJAX send a request to a server, and uses techniques such as this to "put it" in the page.
Know that you can do almost anything with javascript; you could just have "<html><body></body></html>" and have javascript do ALL the rest. This is what GWT does, and if you need to HEAVILY modify you page dynamically, you may be interested in it.