I have a datepicker that is bind to the textbox
MakeDateField: function () {
$(this).not(".dispField").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '-100:+20', onSelect: function () { $(this).blur(); } });
$(this).blur(function () {
$(this).val($.trim($(this).val()));
if (datePickerBlurFix == 0) {
datePickerBlurFix = 1;
if (isValidDate($(this).val()) == false) {
$(this).val(convertDate($(this).val()));
if (dateRegEx.test($(this).val()) == false && $(this).val() != '') {
if ($(this).val() != "today" && $(this).val() != "**No Access**") {
$(this).val('');
msgBox({ Msg: msgDateCheck, Title: applicationName + ' - Error', Width: 300, Type: 'warning' }, function () {
$(this).focus();
datePickerBlurFix = 0;
});
}
}
}
}
datePickerBlurFix = 0;
});
},
My problem is when I press enter, the datepicker will automatic select today date. But it doesn't go in to the following code
$("#<%=txtDateSendFrom.ClientID %>").keypress(function (event) {
if (event.which == 13) {
$("#<%=btnFilter.ClientID %>").trigger("click");
event.preventDefault();
}
});
No matter how hard I press "Enter". I think this is because it has lost focus, but if I add one $(this).focus() in to the datepicker. It also didn't work, plus the window of the datepicker will remain opened.
How can I solve this problem?
Thank You
Related
I followed this great tutorial, add because of it was able to add it to my routing machine; However, I'd like to save the waypoints in local-storage and load them when needed.
I tried this when creating my Routing Machine:
if (map && !this.control) {
this.control = L.Routing.control({
collapsible: true,
show: false,
position: 'bottomleft',
lineOptions: {
styles: [{ color: 'chartreuse', opacity: 1, weight: 5 }]
},
waypoints: [null], //<--- I set the waypoints to null
createMarker: function(i, wp, nWps) {
if (i === 0) {
return L.marker(wp.latLng, {
icon: startIcon,
draggable: true
});
}
if (i === nWps - 1) {
return L.marker(wp.latLng, {
icon: endIcon,
draggable: true
});
}
}
})
.on('routingstart', this.handleLoader.bind(this))
.on('routeselected', function(e) {
var route = e.route;
})
.on('routesfound routingerror', this.handleLoader.bind(this));
And then in the initial listeners for the click events for the start and destination events:
map.on(
'click',
function(e) {
var container = L.DomUtil.create('div'),
startBtn = createButton('Start from this location', container),
destBtn = createButton('Go to this location', container);
function createMarkerHelper(marker) {
setUserMarkers(marker);
}
L.popup()
.setContent(container)
.setLatLng(e.latlng)
.openOn(map);
L.DomEvent.on(
startBtn,
'click',
function() {
var wayPointStart = this.control.getWaypoints()[0].latLng;
if (wayPointStart != null && userMarkers[0] !== undefined) {
this.control.spliceWaypoints(0, 1, userMarkers[0]);
} else {
this.control.spliceWaypoints(0, 1, e.latlng);
createMarkerHelper(e.latlng);
}
map.closePopup();
}.bind(this)
);
L.DomEvent.on(
destBtn,
'click',
function() {
var wapPointDestination = this.control.getWaypoints()[1].latLng;
if (wapPointDestination != null && userMarkers[1] !== undefined) {
this.control.spliceWaypoints(
this.control.getWaypoints().length - 1,
1,
userMarkers[1]
);
} else {
this.control.spliceWaypoints(
this.control.getWaypoints().length - 1,
1,
e.latlng
);
createMarkerHelper(e.latlng);
}
map.closePopup();
}.bind(this)
);
}.bind(this)
);
So this is what I tried for when one starting click event:
function() {
var wayPointStart = this.control.getWaypoints()[0].latLng;
if (wayPointStart != null && userMarkers[0] !== undefined) {
this.control.spliceWaypoints(0, 1, userMarkers[0]);
} else {
this.control.spliceWaypoints(0, 1, e.latlng);
createMarkerHelper(e.latlng);
}
map.closePopup();
}.bind(this)
So essentially I am using the getWaypoints method to check if the waypoint is null, (it would be during a fresh start) and checking if any Markers are in local storage if that conditional is true it would naturally load the markers. If not true it would just set it like normal.
Then later Leaflet has a update function, which you can use to see if props change:
updateLeafletElement(fromProps, toProps) {
var start =
toProps.userMarkers[0] !== undefined &&
this.control.getWaypoints()[1].latLng != null
? toProps.userMarkers[0]
: null,
destination =
toProps.userMarkers[1] !== undefined &&
this.control.getWaypoints()[1].latLng != null
? toProps.userMarkers[1]
: null;
this.control.spliceWaypoints(0, 1, start);
this.control.spliceWaypoints(this.control.getWaypoints().length - 1, 1, destination);
if (toProps.removeRoutingMachine !== false) {
this.control.setWaypoints([]);
}
}
My thinking is this would always ensure the markers are always being updated. But it hasn't worked.
Any ideas? Thanks in advance!
I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?
the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}
backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false
I would like to use tinyMCE with a custom Slick Editor outside of the table, or inside a dialog. It's just to enable rich text editing.
Can I use this external plugin for a custom Slick Editor? I have not seen any example of usages like this.
Is there any potential problems using this two plugins at the same time (injecting conflicting HTML for example or preventing some firing events)?
Use a jquery alias "jQuery_new" with a compatible version
Register the new editor "TinyMCEEditor" & Add it into slick.editors.js
Use it like this {id: "column2", name: "Year", field: "year", editor: Slick.Editors.TinyMCE}
jQuery_new.extend(true, window, {
"Slick": {
"Editors": {
(..)
"TinyMCE": TinyMCEEditor
}
}});
function TinyMCEEditor(args) {
var $input, $wrapper;
var defaultValue;
var scope = this;
this.guid = function () {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4();
},
this.init = function () {
var $container = jQuery_new(".container");
var textAreaIdString = 'rich-editor-'+guid();
$wrapper = jQuery_new("<DIV ID='rds-wrapper'/>").appendTo($container);
$input = jQuery_new("<TEXTAREA id=" + textAreaIdString + "/>");
$input.appendTo($wrapper);
jQuery_new("#" +textAreaIdString).val( args.item[args.column.field] );
var _this = this;
tinymce.init({
selector: "#"+textAreaIdString,
forced_root_block : "",
plugins : "save image imagetools",
toolbar: 'undo redo | styleselect | bold italic | link image | save',
save_onsavecallback: function() {
jQuery_new("#" +textAreaIdString).val( this.getContent() );
_this.save();
}
});
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
$input.focus().select();
};
this.handleKeyDown = function (e) {
if (e.which == jQuery_new.ui.keyCode.ENTER && e.ctrlKey) {
scope.save();
} else if (e.which == jQuery_new.ui.keyCode.ESCAPE) {
e.preventDefault();
scope.cancel();
} else if (e.which == jQuery_new.ui.keyCode.TAB && e.shiftKey) {
e.preventDefault();
args.grid.navigatePrev();
} else if (e.which == jQuery_new.ui.keyCode.TAB) {
e.preventDefault();
args.grid.navigateNext();
}
};
this.save = function () {
args.commitChanges();
};
this.cancel = function () {
$input.val(defaultValue);
args.cancelChanges();
};
this.hide = function () {
$wrapper.hide();
};
this.show = function () {
$wrapper.show();
};
this.position = function (position) {
};
this.destroy = function () {
$wrapper.remove();
};
this.focus = function () {
$input.focus();
};
this.loadValue = function (item) {
$input.val(defaultValue = item[args.column.field]);
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
I want to change the color of the table cell, but I find it hard to transform the code to XMLView from JSView. Can you guys give me a hand ?
What I've managed so far, is to add the text of the color, but what I want is to color the text itself (or the background)
Here is the code:
<ObjectIdentifier
title="{Invoices>BillValue}"
text = "{parts : [ 'Invoices>InvoiceRest' ],
formatter: 'Invoices.Formatter.BillColor'
}"/>
And in the "formatter" (I don't know why it doesn't want to format the text bellow :( ):
jQuery.sap.declare("Invoices.Formatter");
Invoices.Formatter = {
BillColor : function (fValue1) {
try {
if (Number(fValue1) > 0) {
return "red";
} else {
return "green";
}
} catch (err) {
return "None";
} } };
Thanks
var iDtemplate = new sap.m.ColumnListItem("idTemplate",{
type: "Navigation",
visible: true,
selected: true,
cells:[
new sap.m.ObjectStatus({
text:"{SlNo}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
new sap.m.ObjectStatus({
text:"{Name}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
],
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
});
function getStatusColor(status) {
if (status === '') {
return "Error";
}
else {
return "Success";
}
}
Based on the number field we are giving colors to columns Slno and Name.
How could you run some action when pushing a toggle button like this:
{
xtype: 'togglefield',
name: 'enableSnd',
label: 'Sound',
value : 1
}
?
Here's an example I'm currently using in an app of mine. I use the "beforechange" function to check and validate some data before I perform the real action in "change".
{
xtype: 'togglefield',
name: 'toggleName',
label: 'My Toggle Field',
listeners: {
beforechange: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...validate something?
}
},
change: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...do something?
}
else if (oldValue == 1 && newValue == 0)
// Changing from on to off...do something?
}
}
}
Have a look at the official documentation in sencha:
http://dev.sencha.com/deploy/touch/docs/
For a simple button:
var playPauseButton = new Ext.Button({
ui: 'small',
text: 'Play',
listeners: {
tap: function() {
Ext.Ajax.request({
url: '/api/pause',
success: updateStatus,
failure: updateStatus });
}
}
});
For a toggle, event seems to be dragend...
I use the the following code to set an initial value to a togglefield
and to react to changes of the togglefield.
I initially disable the togglefield,
and then use the (unexpected) behaviour that
Sencha Touch fires a change event for this togglefield while initializing it to enable the togglefield.
Note this should work for both true and false as initial values.
If you would like to actually disable the togglefield initially,
you would have to remove the else part.
{
xtype: 'togglefield',
title: 'LightSwitch',
label: 'Switch Lights',
value: false, // initial value
listeners: {
change: function(slider, thumb, newValue, oldValue) {
if (this.isDisabled() == false) { // isEnabled
alert('change Togglefield Event triggered'); // do something
}
else {
this.enable(); // enable togglefield
}
}
},
disabled: true,
}