# Detail view, edit field: create input, buttons

I have a detail view for my object. There is only one field available for editing. When I click on the Edit button I want to hide text for field and show input with the OK and Cancel button.

// create kendo buttons
$('#editGrnz').kendoButton({ icon: "k-icon k-i-pencil", });$('.rt-field-cancel-button').kendoButton({
icon: "k-icon k-i-cancel",
});

$('.rt-field-ok-button').kendoButton({ icon: "k-icon k-i-tick", });$(document).on('click', '#editGrnz', function(e) {
var $editButton =$(this),
$parentContainer =$(this).parent(),
$confirmEditButton =$parentContainer.find('.rt-field-ok-button'),
$cancelEditButton =$parentContainer.find('.rt-field-cancel-button'),
$editInput =$parentContainer.find('.rt-field-edit-input'),
$textContainer =$parentContainer.parent().find('.rt-detail-field');

$editButton.hide();$textContainer.hide();
$confirmEditButton.show();$cancelEditButton.show();
$editInput.show(); });$(document).on('click', '.rt-field-ok-button', function(e) {
var $confirmEditButton =$(this),
$parentContainer =$(this).parent(),
$cancelEditButton =$parentContainer.find('.rt-field-cancel-button'),
$editButton =$parentContainer.find('.rt-field-edit-button'),
$editInput =$parentContainer.find('.rt-field-edit-input'),
$textContainer =$parentContainer.parent().find('.rt-detail-field'),
id = $('.rt-content > #trafficId').val(), newTransportNumber =$editInput.val(),
fixationDate = $('.rt-content > #fixationDate').val(); //ajax call to save address$editButton.show();
$textContainer.html(newTransportNumber);$textContainer.parent().removeClass('text-muted');
$textContainer.show();$confirmEditButton.hide();
$cancelEditButton.hide();$editInput.hide();

});

$(document).on('click', '.rt-field-cancel-button', function(e) { var$cancelEditButton = $(this),$parentContainer = $(this).parent(),$confirmEditButton = $parentContainer.find('.rt-field-ok-button'),$editButton = $parentContainer.find('.rt-field-edit-button'),$textContainer = $parentContainer.parent().find('.rt-detail-field'),$editInput = $parentContainer.find('.rt-field-edit-input');$editButton.show();
$textContainer.show();$confirmEditButton.hide();
$cancelEditButton.hide();$editInput.hide();
});


This code is located in my view file. Now I have another view when will be the same logic. I don't want to copy this code. How to refactor it? I use require.js and may create a module for this functionality.

This is the working demo

• from your classes I take, you are using kendo-ui. is that correct? If yes, have you checked that kendo doesn't have a solution out-of-the-box for this? – Vogel612 Aug 19 '14 at 10:34
• @Vogel612: I haven't seen it. – user348173 Aug 19 '14 at 10:56
• I suppose you want something along the lines of inline-editing (in grid) or inline-editin (in editor control) – Vogel612 Aug 19 '14 at 10:57
• @Vogel612: Yes, I saw it. But this functionality is closed inside. – user348173 Aug 19 '14 at 11:11
• Unfortunately I don't see the problem you have with that.. kendo-ui even does the ajax-call for you, so why are your reinventing-the-wheel? – Vogel612 Aug 19 '14 at 11:14