• Michael Lang
• | October 23, 2013
• | AsyncUI
• | AsyncUI, JSON

Auto Async adds Template Dialog

Today Auto Async added a new feature to open a template in a dialog from any clickable element. This was designed for when you want to open a detail window in a dialog. Starting in version 3.0, this is as easy as putting a class of ‘template-dialog’ on a clickable element (anything that fires a click event). When the element is clicked on, it will open a template as a jQuery UI dialog.

Usage

Options

• data-template: The template to be instantiated into the dialog.
• data-appendTo: Optional. The parent element to append the instantiated template before it is turned into a dialog. The default is ‘body’.
• data-?: You can add as many arguments as desired and they are all passed into the template when instantiated (minus the ‘data-‘ prefix). If there are dashes in the data- attributes, they are removed and the next character is upper cased. Example: ‘data-confirmation-number’ becomes ‘confirmationNumber’, and ‘data-host-selector’ becomes ‘hostSelector’ in the instantiated template.

The clickable template

Note, this click event does not load a url as part of instantiating the dialog. However, if you want the dialog populated from data loaded from your server API, just put an inline-editable-host per use case 1 in the template instantiated into the dialog. It will enhance itself and work as expected in use case 1.

Example markup containing a “template-dialog” link (this appears inline on the page):

    <script id="RequestCommentPartialListView" type="text/x-jsrender">


<div class="worklist-partial-comments" id="Comments{{>ConfirmationNumber}}">
			<span class="datarepeater worklist-comment-partial-repeater" 				data-json-url="/worklist/RequestActivity?confirmationNumber={{>ConfirmationNumber}}"
				data-template="RequestCommentPartialView"></span>


<div class="full-comments-link">
				<a href="#" class="template-dialog" 					data-template="RequestCommentListView" 					data-host-selector="#Comments{{>ConfirmationNumber}} .worklist-comment-partial-repeater"
					data-confirmation-number="{{>ConfirmationNumber}}">View All Customer Comments</a>
</div>


</div>


	</script>

Notice how this sample also has a data-host-selector attribute. This does not actually update any other elements when this link is clicked, because it does not have the “inline-editable-host-updater” class applied. The reason it is there is to pass it down to the next template.

The dialog template

Notice how {{>hostSelector}} is used in this next instantiated template. The child template does not know what other parent elements need to be updated, so the parent template just needs to pass it along.

    <script id="RequestCommentListView" type="text/x-jsrender">


<div class="worklist-comments worklist-comment-repeater" id="Comments{{>confirmationNumber}}">
            <span class="inline-editable-host worklist-comment-repeater"               data-json-url="/worklist/RequestActivity?confirmationNumber={{>confirmationNumber}}"
              data-template="RequestCommentView"></span>


<div class="worklist-comment-add">


<h3>Add Comment</h3>



<div class="add-comment-box">

<form action="/worklist/RequestComment" method="post">
						<input type="hidden" name="confirmationNumber" id="confirmationNumber" value="{{>confirmationNumber}}" />
                        <span class="input">
                            <textarea id="comment" name="comment" class="resizable"></textarea>
                        </span>


<div class="command-buttons">
                            <input type="submit" value="Save" id="Save" name="Save" class="inline-editable-button right-float inline-editable-host-updater"                                    data-host-selector="#Comments{{>confirmationNumber}} .worklist-comment-repeater, {{>hostSelector}}"
                                   data-editable-container="#Comments{{>confirmationNumber}} .worklist-comment-repeater" />
                            <span class="msg clear"></span>
</div>


					</form>

</div>


</div>


</div>


    </script>

Since the Save button has a data-host-selector attribute and class inline-editable-host-updater it will update the comment lists after the comment post. Given the selectors in the attribute it will update both the comment summary list and the comment dialog list with the new comment.

Putting it together: the detail templates

Here are the item templates used by each comment list. The partial view shows minimal data that fits in a smaller space. The full comment item includes all the available fields. These are included just to show why you may want to implement this use case.

    <script id="RequestCommentPartialView" type="text/x-jsrender">
        <span class="waitlist-request-comment">
            <span class="comment-date">{{>~formatDate(Date)}}</span>
            <span class="comment-name">{{>Name}}</span>
            <span class="comment-text">{{>Comment}}</span>
        </span>
    </script>
    <script id="RequestCommentView" type="text/x-jsrender">
        <span class="waitlist-request-comment">
            <span class="comment-date">{{>~formatDate(Date)}}</span>
            <span class="comment-name">{{>Name}}</span>
            <span class="comment-status">{{>StatusChange}}</span>
            <span class="comment-text">{{>Comment}}</span>
        </span>
    </script>

Here is a screenshot of what these templates look like rendered to the screen. Notice on the right there is the list of partial comment data. It does not scroll to show all comments as that makes the screen too busy. Instead when you click the ‘view all customer comments’ link you get a dialog with all the comments in a scrollable window (shown to the left).

Both comment lists update when you press save

References

Auto Async with Use Cases (1-3)

Auto Async with use cases

AsyncUI MVC with Progressive Enhancement

AsyncUI MVC with Progressive Enhancement

Auto Async source code and documentation
https://github.com/michael-lang/jquery-auto-async