Hi All,

I am new to JS and working on EDIT Save Cancel toggling, I have two buttons on the page  Edit and Cancel, whenever I edit the record Save and cancel should display, on click on cancel Save button should hid and Edit should be displayed. But the problem i am facing is, when i load the page, Cancel button is displayed along with the Edit button, which shouldn’t happen, Could some one please check and guide me where I am going wrong:

Properties : -
Cancel : - 
css :-btnHide btnEditCancel
ID :-btnCancelEdit

Edit:-
css :- btnEdit


// Set the selector for which components to toggle. For example, to toggle// specific named components, set the selector to://   #ComponentUniqueID1, #AnotherComponent, #AThirdComponent
// Or, to toggle all field editors and tables, use this selector:
//   .nx-basicfieldeditor:visible, .nx-skootable
var ComponentSelector   = ‘#Test1 , #test2’;
var $ = skuid.$;
var myModel = arguments=0].model;
$(‘#btnCancelEdit’).hide();
// determine what mode was are moving into
var button = argumentst0].button;
var startEdit = false;
var isEditButton = false;
if (button.hasClass(‘btnEdit’)) {
    startEdit = !button.hasClass(‘btnEditActive’);
    isEditButton = true;
} else if (button.hasClass(‘btnEditCancel’)) {
    startEdit = false;
} else {
    console.log(‘Unknown button in editModeController; missing class btnEdit or btnEditCancel’);
    return;
}
// Iterate over the selected components and switch them to the new mode, then
// force a re-render.
var componentElems = $( ComponentSelector );
$.each( componentElems, function( index, componentElem ){
    //console.log(‘Processing component’);
    //console.log(componentElem);
    var component = $( componentElem ).data( ‘component’ );
    //console.log(component);
    
    // Currently, this snippet only supports toggling tables and field editors
    // However, it would be relatively easy to add other types of components
    // as appropriate by adding a “case” statement below:
    switch ( component.getType() ){
        case ‘skootable’:
        case ‘basicfieldeditor’:
            var componentObject = $( componentElem ).data( ‘object’ );
            //console.log(componentObject);
            componentObject.mode = componentObject.list.mode = (startEdit ? ‘edit’ : ‘readonly’);
            componentObject.list.render({doNotCache:true});
            break;
    }
});
// update buttons and model based on what happened
if (startEdit) {

    // track that we have entered edit mode
    $(‘.btnEdit’).addClass(‘btnEditActive’);
    // unhide cancel
    $(‘#btnCancelEdit’).removeClass(‘btnHide’);
    
     //$(‘#cancelb’).hide();
  // adjust edit to correct text and icon
    $(‘.btnEdit’).find(‘.ui-button-text’).text(‘Save’);
   $(‘.btnEdit’).find(‘.ui-icon’).removeClass(‘sk-icon-edit’).addClass(‘sk-icon-save’);
    
}
else {

$(‘#btnCancelEdit’).hide();
    // track that we have left edit mode
    $(‘.btnEdit’).removeClass(‘btnEditActive’);
    // hide cancel button
    $(‘#btnCancelEdit’).addClass(‘btnHide’);
    
    //$(‘#cancelb’).show();
    // adjust edit to correct text and icon
    $(‘.btnEdit’).find(‘.ui-button-text’).text(‘Edit’);
    $(‘.btnEdit’).find(‘.ui-icon’).removeClass(‘sk-icon-save’).addClass(‘sk-icon-edit’);
    // note that normally you would update the model that is associated with this button, with this line:
     //var myModel = argumentst0].model;
    // however, in this case, our model is coming from a page include, so we need more
    // direct reference to the model
    
    if (isEditButton) {
        myModel.save({callback: function(result){
            if (result.totalsuccess) {
            myModel.updateData();
            var $ = skuid.$;
// To start showing the message
        $.blockUI({
            message: ‘Please Wait… Your Record is Getting Saved’
        });
            setTimeout(function(){
    // Turn off the block UI
         $.unblockUI();
        },4000);
        }}});
    } 
    else 
        myModel.cancel();
       
    

}
 $(‘#cancelb’).removeClass(‘btnHide’);