Adding some text when no block/slot exists

Sometimes you need to add some text to a certain template, but Xataface doesn't have the specific block or slot to use. For example, say you wanted to include some text underneath the password field in the login page for Xataface. You can't do this with blocks or slots since nothing exists underneath that field. You can however do a workaround by using javascript and the DOM concept.

For example:

function block__after_login_form(){
<script language="javascript"><!--
var div = document.createElement('div');
div.className = 'formHelp';
var text = document.createTextNode('Please enter the correct password');
div.appendChild(text);

document.getElementById('Login-Password').appendChild(div);
//--></script>
}

First thing to notice is we are using the block__after_login_form() which simply a block on that template. We are using it to include our javascript of interest. We could have actually used any block.

var div = document.createElement('div');

The first thing we do is create a div element.

div.className = 'formHelp';

Here are just giving it the css class name of formHelp which gives it a nice styling feel. This is the same style used for widget:description values.

var text = document.createTextNode('Please enter the correct password');

And then we create a textnode which contains the text of interest.

div.appendChild(text);

With out div element, we are appending the text node we just created to it.

document.getElementById('Login-Password').appendChild(div);

And finally we add our div element to our element of interest which happens to have the id of "Login-Password" This id has been assigned by Xataface itself.

And if everything works out fine, then you should see the text appear below the password field!

You can find more information about how to manipulate DOM structure using javascript here.