Objects

Object from Checkbox

If you want to set an object in a checkbox simply add a data-obj attribute with the json you want instead of the value.

<input class="object" type="checkbox" data-key="id" name="data.group" data-obj='{"id":1,"name":"test1"}'/>test1

The data-key attribute gives the name of the "key" attribute to use. If not given, jsForm assumes "id".

Object in input (i.e. autocomplete)

For rendering you can use the "data-display" attribute

<input class="object" data-display="name" data-key="id" name="data.group" data-obj='{"id":1,"name":"test1"}'/>test1

Object from Selectbox

Sometimes you want to select an existing object from a select box (i.e. selecting a group object for a user).

To accomplish this you need to pre-process the select options and append a pojo-data object. This will then be used in the resulting object:

<select class="object" data-key="id" name="data.group">
  <option data-obj='{"id":1,"name":"test1"}'>test1</option>
  <option data-obj='{"id":2,"name":"test2"}'>test2</option>
</select>

The data-key attribute gives the name of the "key" attribute to use. If not given, jsForm assumes "id".

Note: You can also create the options via ajax. In this case the information is in the html (i.e. prerendered using php)

Single object in input field

It is also possible to fill just a single input field with data from a complex object. This is especially useful, when you have a sub-object and want to select/change it using i.e. an autocomplete control.

To display the data you need to use class="object":

<input class="object" data-display="id, ': ', name, ' (', group.name, ')'" name="data.owner"/>

The data-display provides the "skin" for displaying the object. It is just a list of comma seperated fields. Each field can either be a string, or a reference to the object. For string you can use single or double quotes (so you can escape one with the other).

When retrieving the original object, the field will be replaced with the data().pojo element of the input.

So if you want to delete the object on the field, just clear the pojo data:

 $("clear").click(function() {
   $("input[name='data.owner']").data().pojo = null;
 });

If you want to fill the field yourself with an object use:

   $("input[name='data.owner']").data().pojo = myObj;
   $("input[name='data.owner']").change();

the "change" will trigger a re-rendering using the given template and the new "myObj".

Custom formatting in input field

Instead of using the default display method, you can also use your own (i.e. to print the whole json object as string for editing):

<textarea class="object" name="objects." ></textarea>

When serializing jsForm will add the class "POJO" and the data field "pojo" to the field. When deserializing it back to an object, the content of the textarea is ignored, and only the pojo is used. this way you can attach a handler and change the "json" object:

   $("textarea.object[name='objects.']").on("fill", function(){
    	// fill will be triggered after the content has been inserted - this way we can override that
        $(this).val(JSON.stringify($(this).data("pojo")));
    });
    
    // update the pojo with the "json" content
    $("textarea.object[name='objects.']").keyup(function(){
    	try {
    		$(this).data().pojo = JSON.parse($(this).val());
    		// json is fine
    		$(this).css("border", "2px solid green");
    		$(this).attr("title", "JSON ok");
    	} catch (ex) {
    		// error in json (add a title field with the error)
    		$(this).css("border", "2px solid red");
    		$(this).attr("title", ex);
    	}
    });