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 = arguments[0].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 = arguments[0].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’);
Rahul~
I believe you can accomplish this without JS by using either the render conditions or the enable conditions, depending on if you want the buttons to show/not show or be clickable/not clickable. Check out this tutorial:
http://help.skuid.com/m/supercharge-your-ui/l/173514-conditional-rendering-display-of-page-component…
Karen
Thanks for the response karen,
This is something else i am trying to accomplish, rendering will happend based on the some field update on click of button. In my scenario, I am checking if user clicks on edit button then Save and cancel button should be displayed, and if user click on cancel or save then Edit should be displayed. I don’t think that the rendering will work in this scenario.
You could probably create a UI only checkbox field in the model called “Edit Mode” and have your edit button check it when pressed and have your save button uncheck it. Then you could base rendering on that field.
Rahul - rendering should do exactly what you are looking for - client side modification of the the display of your buttons. No server side interaction needed. Using Raymond’s idea of a UI Only field to control the display is the way to go.
