Search code examples
javascriptformsdojowidgetinline-editing

Dojo widget inline editing

I created a dojo widget for displaying a form data. I want to enable inline editing in this widget. First I started experimenting by writing html as strings in JavaScript. I don't want to do this. dojo provides an interface dojo.cache() to load html files as templates. Used this method to load the template data for form view.

For form edit. An ajax call will be sent and I will recieve the field type data. Based on this I have to parse the html to an inline editor.

My question is, How to use dojo.cache() and acquire the html based on the input type. The template might contain data like

<input type="text" />
or
<select></select>
or
<textarea></textarea>
or
<div class="autocomplete"></div>

or something more ... Can I define all these templates in one file and get the file using dojo.cache() ? In this case I'm stuck at how to select the required field.

Solution

  • I'm not sure how complex the templates that you would be bringing in via dojo.cache are, but have you considered using dojo.create() as an alternative? This will allow to programmatically create the DOM elements as well.

    In regards to your solution, I was confused at first at what you are trying to do but I think I get it now. Within the page that you are displaying the data, you want the user to be able to choose some data to edit and when they do that action, an appropriate editable container will show up in its place for them to change the data?

    If this is the case, I definitely dojo.create() is a better alternative to this than the HTML templates pulled in from dojo.cache.

    dojo.create could easily be used with variables that come back from your service XHR call so that the type of element that is created will be dependent on the response you get from the server.

    var editEle = dojo.create(data.elementType); (assuming data is the name of the variable you have your response and elementType is a property on that containing the type of element that needs to be created.

    You can also pass an object literal to the second argument of dojo.create to specify parameters on the node: dojo.create('input', {type: 'text'});