Inline Edit
Inline Edit
Overview
Inline Edit allow the user to create or edit an item without navigating to another view. Use this when all editable elements can be viewed within the row/ expanded row, or when a “quick add” option is available for users to edit a subset of items quickly. Inline Edit saves the user the need to open a modal window or navigate to a new view for simple object creation or edit actions.
-
Only one row in a list or a table can be edited at a time. Users commit to or cancel changes by clicking Save or Cancel.
-
Items can be added to the top of a list or a table by including an Add or Create action.
Inline Edit for List View
Inline Edit for Table View
Inline Edit for Form
The pattern enables users to edit the form text directly on the same page instead of navigating them to another page for editing the text. This is useful when the user may want to make a single edit without the need to refresh the entire form to make it editable. It could help user to improve the operation efficiency and reduce mistakes.
Restrictions
- If drill-down behavior is supported, this pattern should not be used.
- This pattern does not include bulk actions (editing multiple rows at once).
Inline Edit
Inline Edit has a number of use cases, jump to a section below for applied examples:
Inline Create and Edit
- Create: This action adds a row at the top of the list, in edit mode. All fields in the new row are editable. Default values for all fields are recommended.
- Save and Cancel: These buttons are available on the right end of the row. “Save” button would never be enabled until required fields are entered. If user selects Cancel the new row is deleted.
Inline Edit in a List View
- Row Selection: Only one row can be edited at a time. Edit puts an entire row into edit mode. The row in edit mode should be visually distinct from surrounding rows. The first editable field should be in focus with an option to tab through all remaining editable fields with keyboard navigation.
- Editable Fields: These are fields in the selected row that should change from read only into an editable state such as a text field or combobox.
- Non-editable Fields: These are fields in the selected row that should not change in appearance.
- Save and Cancel: These buttons are available on the right end of the row. The check mark (Save) and X (Cancel) should replace the kebab in the editable row. Save is disabled until a change is made.
- Edit: This action puts the row into an editable state. This action may be accessed through a button, an icon, or the kebab menu.
- Click Away: When a new or existing row is in edit mode and changes have not been made, clicking away should act as a cancel action, exiting edit mode without confirmation. If changes have been made to the editable row, a dialog should appear to ask the user if changes should be saved before exiting edit mode.
Inline Edit in an Expanded List View
- Row Expansion: If expansion behavior is supported, when a row is in edit mode, it should automatically expand. Editable fields that are not visible in the standard list can be edited in the expanded region. The X (close control) for the expanded region should be hidden; the expanded region cannot be collapsed in edit mode. The row should be returned back to the collapsed state once the user saves or cancels out of edit mode.
- Multi-Select: Only one row can be edited at a time. If multi-select behavior is supported, and multiple rows are selected the row selections should persist when a single row is in edit mode but the associated actions should be disabled and the blue background highlighting of the selected rows should disappear. Upon exit of edit mode the row selections remain and the global actions are enabled. Upon exit of edit mode the row selections remain and the global actions are enabled.
- Edit: This action may be accessed through a button, an icon, or the kebab menu and puts the row into an editable state.
Inline Edit in a Table View
- Row Selection: Only one row can be edited at a time. Edit puts an entire row into edit mode. The row in edit mode should be visually distinct from surrounding rows.
- Save and Cancel:
- These buttons are usually displayed in a tab under the bottom right corner of the row.
- The check mark should be used for save and the X for cancel. Save is disabled until a change is made.
- When the editable row is the last one in the table, these buttons are displayed in a tab above the row.
Inline Edit in a Form
- Default Status: The Information is displayed as text without edit icon.
- Status with Edit Icon: If most of the information cannot be edited in the form, show the edit icon to the right of the field(s) that can be edited to help users easily identify editable fields.
- Hover Status: When the mouse hover on the editable information, the edit icon (if not already shown) and field border will appear. Click the text or edit button to make the field editable. If the text is a link, the user must click the edit icon to make the field editable.
Select: If the user clicks and holds, they should be able to select the text rather than transition into the edit mode. - Save and Cancel: These buttons are available on the right end. Save is disabled until a change is made. If user selects Cancel the text will go back to original state.
- Edit Status: Save is activated.
- Spinner: Sometimes the system needs user wait for a short time to update the data.
- Validation state: User can click Save button to let the software validate the result. If the result is not correct, there will be an error message under the text field.
Form Inline Edit Patterns
- View Angular PatternFly Example
- View PatternFly NG Example
- View PatternFly React Example
PatternFly Core Example
Jump to Inline Edit for List View, Inline Edit for Form
Inline Edit for List View
<nav class="navbar navbar-default navbar-pf" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/assets/img/brand.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-1">
<ul class="nav navbar-nav navbar-utility">
<li class="dropdown">
<button class="btn btn-link nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <b class="caret"></b>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter">
<label class="sr-only" for="filter">Name</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" id="input-filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Color</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
</div><!-- /input-group -->
</div>
<div class="form-group">
<div class="dropdown btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="filter-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="selected"><a href="#">Name</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Last Modified</a></li>
</ul>
</div>
<button class="btn btn-link" type="button">
<span class="fa fa-sort-alpha-asc"></span>
</button>
</div>
<div class="form-group">
<button class="btn btn-default" type="button">Action</button>
<button class="btn btn-default" type="button">Action</button>
<div class="dropdown btn-group dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu " aria-labelledby="dropdownKebab">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" id="add-a-row" type="button">Create</button>
</div>
<div class="toolbar-pf-action-right">
<div class="form-group toolbar-pf-find">
<button class="btn btn-link btn-find" type="button">
<span class="fa fa-search"></span>
</button>
<div class="find-pf-dropdown-container">
<input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
<div class="find-pf-buttons">
<span class="find-pf-nums">1 of 3</span>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-up"></span>
</button>
<button class="btn btn-link" type="button">
<span class="fa fa-angle-down"></span>
</button>
<button class="btn btn-link btn-find-close" type="button">
<span class="pficon pficon-close"></span>
</button>
</div>
</div>
</div>
<div class="form-group toolbar-pf-view-selector">
<button class="btn btn-link "><i class="fa fa-th"></i></button>
<button class="btn btn-link "><i class="fa fa-th-large"></i></button>
<button class="btn btn-link "><i class="fa fa-th-list"></i></button>
</div>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5>40 Results</h5>
<p>Active filters:</p>
<ul class="list-inline">
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="fa fa-times"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="fa fa-times"></span></a>
</span>
</li>
<li>
<span class="label label-info">
Name: nameofthething
<a href="#"><span class="fa fa-times"></span></a>
</span>
</li>
</ul>
<p><a href="#">Clear All Filters</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
<div class="container-fluid">
<div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" aria-labelledby="confirmDialogLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="pficon pficon-close"></span>
</button>
<h4 class="modal-title" id="confirmDialogLabel">Continue without saving</h4>
</div>
<div class="modal-body">
<span>Are you sure you want to leave without saving your changes ?</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default confirm-dialog-pf-cancel" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary confirm-dialog-pf-ok">Yes</button>
</div>
</div>
</div>
</div>
<div class="list-group list-view-pf list-view-pf-view">
<script id="row-template" type="text/template">
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value"></div>
<input type="text" value="Event XXX - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value"></span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option>Host</option>
<option>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date"></span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value"></span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
</script>
<div class="list-group-item list-view-pf-editable list-view-pf-create active hidden">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<input type="text" value="Event XXX - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option selected>Host</option>
<option>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date"></span>
</div>
<div class="list-view-pf-additional-info-item">
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button type="button" class="btn btn-link list-view-pf-save" aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-plane list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event One - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event One - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Host</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option selected>Host</option>
<option>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Jan 11,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Enabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-magic list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event Two - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event Two - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Cluster</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option>Host</option>
<option selected>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Aug 8,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Enabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-gamepad list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event Three - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event Three - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Node</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option>Host</option>
<option>Cluster</option>
<option selected>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Feb 25,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Disabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-linux list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event Four - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event Four - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Image</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option>Host</option>
<option>Cluster</option>
<option>Node</option>
<option selected>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Dec 10,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Enabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-briefcase list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event Five - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event Five - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Host</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off" aria-label="choose type">
<option selected>Host</option>
<option>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Oct 20,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Enabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off" checked>
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
<div class="list-group-item list-view-pf-editable">
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-coffee list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text list-view-pf-value">
Event Six - Sed ut perspiciatis unde omnis iste natus
</div>
<input type="text" value="Event Six - Sed ut perspiciatis unde omnis iste natus" class="list-view-pf-editor list-view-pf-textbox list-view-pf-title" autocomplete="off" aria-label="edit title"/>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Cluster</span>
<select class="selectpicker list-view-pf-editor list-view-pf-type" autocomplete="off">
<option>Host</option>
<option selected>Cluster</option>
<option>Node</option>
<option>Image</option>
</select>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value list-view-pf-readonly list-view-pf-date">Sept 18,2017</span>
</div>
<div class="list-view-pf-additional-info-item">
<span class="list-view-pf-value">Disabled</span>
<input type="checkbox" class="list-view-pf-switch list-view-pf-editor list-view-pf-state" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="list-view-pf-actions">
<button class="btn btn-default list-view-pf-edit">Edit</button>
<div class="dropdown pull-right dropdown-kebab-pf">
<button class="btn btn-link dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something Else Here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<button type="button" class="btn btn-link list-view-pf-save" disabled aria-label="Save"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-link list-view-pf-cancel" aria-label="Cancel"><i class="pficon pficon-close"></i></button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//Initialize Bootstrap Switch
function initBootstrapSwitch($cbs) {
$cbs.bootstrapSwitch()
.each(function (i, cb) {
$(cb).closest('.bootstrap-switch-wrapper').attr({
'tabindex': 0,
'role': 'checkbox',
'aria-checked': $(cb).prop('checked'),
'aria-label': 'switch state'
});
});
}
initBootstrapSwitch($('.list-view-pf-switch'));
$('.list-view-pf').on('keydown', '.bootstrap-switch-wrapper', function (e) {
if (e.which === 32) {
e.preventDefault();
}
});
$('.list-view-pf').on('keyup', '.bootstrap-switch-wrapper', function (e) {
if (e.which === 13 || e.which === 32) {
$(this).find('.list-view-pf-switch').bootstrapSwitch('toggleState');
}
});
// toggle dropdown menu
$('.list-view-pf').on('show.bs.dropdown', '.list-view-pf-actions', function () {
var $this = $(this);
var $dropdown = $this.find('.dropdown');
var space = $(window).height() - $dropdown[0].getBoundingClientRect().top - $this.find('.dropdown-menu').outerHeight(true);
$dropdown.toggleClass('dropup', space < 10);
});
$('.list-view-pf-editable').find('.list-view-pf-editor:not(div)').each(function () {
var $this = $(this);
$this.data('old-value', $this.is(':checkbox') ? $this.is(':checked') : $this.val());
});
function editNewRow () {
$('.list-view-pf-create').removeClass('hidden')
.find('.list-view-pf-date').text('Mar 13,2018')
.end().find('.list-view-pf-textbox').trigger('select');
$('.list-view-pf-editable.active:not(.list-view-pf-create)').removeClass('active');
}
$('#confirmDialog').on('shown.bs.modal', function () {
$(this).find('.confirm-dialog-pf-cancel').trigger('focus');
})
// trigger create state
$('#add-a-row').on('click', function () {
if (!$('.list-view-pf-create.hidden').length) {
return;
}
var $activeSaveButton = $('.list-view-pf-save:not(:disabled):not(:hidden)');
if ($activeSaveButton.length) {
$('#confirmDialog')
.data('to-edit', $('.list-view-pf-create')).modal('show');
} else {
editNewRow();
}
});
function editExistingRow($clickRow) {
$('.list-view-pf-create').addClass('hidden');
$('.list-view-pf-editable.active:not(.list-view-pf-create)').removeClass('active');
$clickRow.addClass('active').find('.list-view-pf-textbox').trigger('select');
}
// trigger edit state
$('.list-view-pf').on('click', '.list-view-pf-edit', function () {
var $clickRow = $(this).closest('.list-view-pf-editable');
var $activeSaveButton = $('.list-view-pf-save:not(:disabled):not(:hidden)');
if ($activeSaveButton.length) {
$('#confirmDialog')
.data('to-edit', $clickRow).modal('show');
} else {
editExistingRow($clickRow);
}
});
// close active row on clicking away
$('body').on('click', function (e) {
var $target = $(e.target);
var $activeRow = $('.list-view-pf-editable.active:not(.hidden)');
if ($activeRow.length &&
e.target.id !== 'add-a-row' &&
!$target.is('.list-view-pf-edit') &&
!$target.closest('.modal').length &&
!$target.closest('.list-view-pf-editable.active', '.list-view-pf').length) {
if ($activeRow.find('.list-view-pf-save:not(:disabled)').length) {
$('#confirmDialog')
.data('to-edit', null).modal('show');
} else {
$activeRow.find('.list-view-pf-cancel').trigger('click');
}
}
});
function monitorValueChange (e) {
var $row = $(e.target).closest('.list-view-pf-editable');
var changed = false;
$row.find('.list-view-pf-editor:not(div)').each(function(index, editor) {
if (($(editor).is(':checkbox') && $(editor).data('old-value') !== $(editor).is(':checked')) ||
(!$(editor).is(':checkbox') && $(editor).data('old-value') !== $(editor).val().trim())) {
changed = true;
return false;
}
});
$row.find('.list-view-pf-save').prop('disabled', !changed);
if (e.type === 'switchChange') {
$row.find('.bootstrap-switch-wrapper').attr('aria-checked', arguments[1]);
}
}
$('.list-view-pf').on('input changed.bs.select switchChange.bootstrapSwitch', '.list-view-pf-editor:not(div)', monitorValueChange);
function keepValues($row, titleVal, typeVal, stateVal) {
$row.find('.list-view-pf-title').data('old-value', titleVal)
.siblings('.list-view-pf-value').text(titleVal);
$row.find('select.list-view-pf-type').data('old-value', typeVal)
.closest('.list-view-pf-additional-info-item').find('.list-view-pf-value').text(typeVal);
$row.find('.list-view-pf-state').data('old-value', stateVal)
.closest('.list-view-pf-additional-info-item').find('.list-view-pf-value').text(stateVal ? 'Enabled' : 'Disabled');
}
function setValues($row, titleVal, typeVal, stateVal) {
$row.find('.list-view-pf-title').val(titleVal);
$row.find('select.list-view-pf-type').selectpicker('val', typeVal);
$row.find('.list-view-pf-state').bootstrapSwitch('state', stateVal, true);
}
$('.list-view-pf').on('click', '.list-view-pf-save', function (e) {
var $row = $(this).closest('.list-view-pf-editable');
var $title = $row.find('.list-view-pf-title');
var $type = $row.find('select.list-view-pf-type');
var $state = $row.find('.list-view-pf-state');
var titleVal = $title.val().trim();
var typeVal = $type.val();
var stateVal = $state.is(':checked');
if ($row.is('.list-view-pf-create')) {
var $newRow;
$row.addClass('hidden').find('.list-view-pf-save').prop('disabled', false);
setValues($row, 'Event XXX - Sed ut perspiciatis unde omnis iste natus', 'Host', true);
$row.after($('#row-template').html());
$newRow = $row.next();
keepValues($newRow, titleVal, typeVal, stateVal);
$newRow.find('.list-view-pf-save').prop('disabled', true);
$newRow.find('.selectpicker').selectpicker('render');
initBootstrapSwitch($newRow.find('.list-view-pf-switch'));
setValues($newRow, titleVal, typeVal, stateVal);
$newRow.find('.list-view-pf-date').text('Mar 13,2018');
} else {
$row.removeClass('active').find('.list-view-pf-save').prop('disabled', true);
keepValues($row, titleVal, typeVal, stateVal);
}
});
$('.list-view-pf').on('click', '.list-view-pf-cancel', function () {
var $row = $(this).closest('.list-view-pf-editable');
setValues($row, $row.find('.list-view-pf-title').data('old-value'), $row.find('select.list-view-pf-type').data('old-value'), $row.find('.list-view-pf-state').data('old-value'));
if ($row.is('.list-view-pf-create')) {
$row.addClass('hidden');
} else {
$row.removeClass('active').find('.list-view-pf-save').prop('disabled', true);
}
});
$('#confirmDialog').on('click', '.confirm-dialog-pf-ok', function (e) {
var $confirm = $(e.delegateTarget);
var $toEdit = $confirm.data('to-edit');
$confirm.modal('hide');
$('.list-view-pf-save:not(:disabled):not(:hidden)').siblings('.list-view-pf-cancel').trigger('click');
if (!$toEdit) {
return;
}
if ($toEdit.is('.list-view-pf-create')) {
editNewRow();
} else {
editExistingRow($toEdit);
}
});
$('#confirmDialog').on('click', '.confirm-dialog-pf-cancel, .close', function (e) {
$(e.delegateTarget).modal('hide');
$('.list-view-pf-save:not(:disabled):not(:hidden)').trigger('focus');
});
$('#confirmDialog').on('keydown', '.confirm-dialog-pf-ok', function (e) {
if (e.which === 9) {
e.preventDefault();
$(e.delegateTarget).find('.modal-header .close').trigger('focus');
}
});
$('#confirmDialog').on('keydown', '.close', function (e) {
if (e.which === 9) {
e.preventDefault();
$(e.delegateTarget).find('.confirm-dialog-pf-cancel').trigger('focus');
}
});
});
</script>
</div>
Inline Edit for Form
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="components/bootstrap-select/dist/js/bootstrap-select.js"></script>
<form class="form-horizontal" role="form">
<div class="form-group" id="name-field">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Name: </span>
<span>Mike</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<div class="form-control-pf-textbox">
<input type="text" value="Mike" class="form-control form-control-pf-editor" autocomplete="off" aria-label="name"/>
<button type="button" class="form-control-pf-empty" aria-label="Clear Value">
<span class="fa fa-times-circle fa-lg"></span>
</button>
</div>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="gender-field">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Gender: </span>
<span>Male</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="selectpicker form-control-pf-editor" autocomplete="off" aria-label="gender">
<option>Male</option>
<option>Female</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="depart-field">
<label class="col-sm-2 control-label">Department</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Department: </span>
<span>UXD</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="form-control combobox form-control-pf-editor" autocomplete="off" aria-label="department">
<option value="accounting">Accounting</option>
<option value="automic">Automic</option>
<option value="certification">Certification</option>
<option value="devops">DevOps</option>
<option value="entitlement">Entitlement</option>
<option value="epm">EPM</option>
<option value="git">GIT</option>
<option value="gws">GWS</option>
<option value="hr">HR</option>
<option value="jboss">JBOSS</option>
<option value="kernel">Kernel</option>
<option value="kvm">KVM</option>
<option value="legal">Legal</option>
<option value="nfv">NFV</option>
<option value="openshift">Openshift</option>
<option value="qe">QE</option>
<option value="rhu">RHU</option>
<option value="sales">Sales</option>
<option value="uxd" selected="selected">UXD</option>
<option value="virt">Virt</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="hiredate-field">
<label class="col-sm-2 control-label">Hiredate</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Hiredate: </span>
<span>03/13/2013</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<input type="text" class="bootstrap-datepicker form-control form-control-pf-editor" value="03/13/2013" autocomplete="off" aria-label="hiredate"/>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="interests-field">
<label class="col-sm-2 control-label">Interests and hobbies</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Interests and Hobbies: </span>
<span>cooking, fishing, sports, travel</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="selectpicker form-control-pf-editor" multiple autocomplete="off" aria-label="interests and hobbies">
<option selected="selected">Cooking</option>
<option>Drama</option>
<option selected="selected">Fishing</option>
<option>Fitness</option>
<option>Literature</option>
<option>Movie</option>
<option>Music</option>
<option>Painting</option>
<option selected="selected">Sports</option>
<option selected="selected">Travel</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="profile-field">
<label class="col-sm-2 control-label">Personal profile</label>
<div class="col-sm-10 form-control-pf-editable form-control-pf-full-width">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Personal Profile: </span>
<span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<textarea class="form-control form-control-pf-editor" autocomplete="off" aria-label="personal profile">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea>
<div class="action-buttons">
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(function() {
$('select.combobox').combobox();
$('.bootstrap-datepicker').datepicker({
autoclose: true,
todayBtn: 'linked',
todayHighlight: true
})
.on('changeDate', monitorValueChange);
$('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker').each(function () {
var $this = $(this);
$this.data('old-value', $this.val());
});
function monitorValueChange (e) {
var $editor = e.target ? $(e.currentTarget) : e;
var $field = $editor.closest('.form-control-pf-editable')
var $save = $field.find('.form-control-pf-save');
if ($editor.is('[multiple]')) {
var oldValues = $editor.data('old-value');
var newValues = $editor.val();
$save.attr('disabled', (oldValues.length === newValues.length) &&
oldValues.every(function (el, i) { return el === newValues[i]; }));
} else if ($editor.is('.combobox')) {
var newOption = $editor.val().trim().toLowerCase();
var options = $field.children('.form-control-pf-editor').find('option').map(function() { return $(this).text().toLowerCase(); });
$save.attr('disabled', $editor.data('old-value').toLowerCase() === newOption ||
(newOption !== '' && $.inArray(newOption, options) === -1));
} else if ($editor.is('.bootstrap-datepicker')) {
$save.attr('disabled', !moment($editor.val().trim(), 'MM/DD/YYYY', true).isValid() ||
$editor.data('old-value') === $editor.val().trim());
} else {
$save.attr('disabled', $editor.data('old-value') === $editor.val().trim());
}
}
function cancelEdit ($field) {
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
var $status = $field.find('.status');
if ($editor.is('.selectpicker')) {
$editor.selectpicker('val', $editor.data('old-value'));
} else if ($editor.is('.bootstrap-datepicker')) {
$editor.datepicker('update', $editor.data('old-value'));
} else {
$editor.val($editor.data('old-value'));
}
$field.find('.form-control-pf-save').attr('disabled', true);
$status.removeClass('spinner spinner-xs spinner-inline').addClass('fa fa-lg fa-times-circle');
$field.removeClass('form-control-pf-edit');
}
function triggerEdit (e) {
if ($('.form-control-pf-editable.form-control-pf-edit').length) {
cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
}
var $field = $(e.delegateTarget);
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
$field.addClass('form-control-pf-edit');
if ($editor.is('.selectpicker')) {
$field.find('.dropdown-toggle').focus();
} else if ($editor.is('.combobox')) {
$field.find('.combobox-selected .form-control-pf-editor').select();
} else if ($editor.is('.bootstrap-datepicker')) {
$editor.select();
} else {
$editor.focus().val('').val($editor.data('old-value'));
if ($editor.is('textarea')) {
$editor.scrollTop($editor[0].scrollHeight - $editor.height());
}
}
}
$('.form-control-pf-editable').on('click', '.form-control-pf-value', triggerEdit);
$('.form-control-pf-editable').on('keyup', '.form-control-pf-value', function (e) {
if (e.which === 13) {
triggerEdit(e);
}
});
$(window).on('click', function (e) {
if ($('.form-control-pf-editable.form-control-pf-edit').length && !$(e.target).closest('.form-control-pf-editable.form-control-pf-edit').length) {
cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
}
});
$('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor').on('keyup', monitorValueChange);
$('.form-control-pf-editable').find('.combobox-container')
.on('click', '[data-dropdown]', function (e) {
if (!$(e.currentTarget).find('.glyphicon-remove').is(':visible')) {
monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
}
})
.on('click', '[data-value]', function (e) {
monitorValueChange($(e.currentTarget).parent().siblings('.form-control-pf-editor'));
});
$('.form-control-pf-editable').on('change', '.selectpicker', monitorValueChange);
$('.form-control-pf-editable').on('click', '.form-control-pf-empty', function (e) {
$(e.delegateTarget).find('.form-control-pf-editor').val('').focus();
monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
});
$('.form-control-pf-editable').on('click', '.form-control-pf-save', function (e) {
var $field = $(e.delegateTarget), newValue, newText;
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
if ($editor.is('.selectpicker')) {
newValue = $editor.val();
if ($editor.is('[multiple]')) {
newText = newValue.join(', ');
} else {
newText = newValue;
}
} else {
newText = newValue = $editor.val().trim();
}
$editor.data('old-value', newValue);
if ($editor.is('textarea, :input:not(.combobox):not(.bootstrap-datepicker)')) {
$editor.val(newValue);
}
$field.removeClass('form-control-pf-edit').addClass('form-control-pf-updating').find('.form-control-pf-value').children('span:not(.sr-only)').text(newText);
$field.find('.form-control-pf-save').attr('disabled', true);
setTimeout(function() {
$field.removeClass('form-control-pf-updating');
}, 1000);
});
$('.form-control-pf-editable').on('click', '.form-control-pf-cancel', function (e) {
cancelEdit($(e.delegateTarget));
});
});
</script>