2
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – Vogel612 Aug 19 '14 at 10:34
  • \$\begingroup\$ @Vogel612: I haven't seen it. \$\endgroup\$ – user348173 Aug 19 '14 at 10:56
  • \$\begingroup\$ I suppose you want something along the lines of inline-editing (in grid) or inline-editin (in editor control) \$\endgroup\$ – Vogel612 Aug 19 '14 at 10:57
  • \$\begingroup\$ @Vogel612: Yes, I saw it. But this functionality is closed inside. \$\endgroup\$ – user348173 Aug 19 '14 at 11:11
  • \$\begingroup\$ 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? \$\endgroup\$ – Vogel612 Aug 19 '14 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.