How do I set the z-index for info_dialog, when using UI dialog ?
$.jgrid.info_dialog uses internally $.jgrid.createModal which uses $.jgrid.jqModal (see the line) which introduced since not so long time (see my suggestion here). So you can do something like
$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
zIndex: 1234
});
because of another parameter of navGrid you have to add additionally
$.extend($.jgrid.nav, {
alertzIndex: 1234
});
to make $.jgrid.jqModal.zIndex setting working.
UPDATED: In any way you can use "subclassing" of $.jgrid.info_dialog (like in the answer for example). The corresponding code could be like the following:
var oldInfoDialog = $.jgrid.info_dialog;
$.extend($.jgrid,{
info_dialog: function (caption, content, c_b, modalopt) {
if (modalopt && (modalopt.zIndex === null || modalopt.zIndex === undefined ||
(typeof modalopt.zIndex === "number" && modalopt.zIndex < 1234))) {
modalopt.zIndex = 1234;
}
return oldInfoDialog.call (this, caption, content, c_b, modalopt);
}
});
Related
so I have to use cy.contains to find the element I want, but all I can find online is how to use if() with cy.find or cy.get if there a way to do this with contains?
Example code:
if(cy.contains('div.name', 'Test 1').length > 0) {
//Type in name
cy.get('input.newName').click().type('Test 1');
cy.wait(2000);
//Click Add Name
cy.get('div.createNewName> a').click();
cy.wait(2000);
}
What I am trying to do there is:
if(Name doesnt exist){
Create it
}
I'm not sure if I have explained myself too well, if any more clarifications are needed feel free to ask
You can also do like this:
cy.get('body').then(($body) => {
if ($body.find('div.name:contains("Test 1")').length > 0) {
//Element Found
} else {
//Element not found
}
})
The general pattern for this would be as follows:
const element = Cypress.$('div.name:contains(Test 1)')
if (element.length > 0) {
...
Make sure the DOM is stable when you run this code, there is no retry built in as there is with cy.contains()
If the code inside if() is creating the name, then maybe the logic would be
const element = Cypress.$('div.name:contains(Test 1)')
if (element.length === 0) {
// not found so create it
...
You can also do it like this
cy.get('div.name').then($div => {
const found = $div.find(':contains("Test 1")')
if (found.length === 0) {
// create...
}
})
In phpMyAdmin, using the Control key in conjunction with the arrows keys (such as ctrl+right, ctrl+left, ctrl+shift+right, and ctrl+shift+left) causes the cursor to move to another cell.
This behavior can be extremely annoying if one instinctively uses these key combinations to move between and/or select words in a text.
Older versions of phpMyAdmin, had a configuration setting, $cfg['CtrlArrowsMoving']=false, that would disable it, but that setting is no longer supported and there doesn't seem to be a way to disable it through the settings or configuration anymore.
The Alt key does exactly the same thing when you're editing a table, and the tab key allows you to move from one cell to another as you would expect, so there's no reason for the ctrl key to be used this way unless the user actually wants to.
I love phpMyAdmin, but after years of instinctively pressing ctrl+shift+left to select a word only to remember it doesn't work, I decided to search the code and figure out how to disable it.
I'm using phpMyAdmin version 5.0.2 and don't know if other versions use the same code for this, but hopefully they're similar enough that this information will help people modify the behavior if they want to.
There are two different functions that control this behavior.
The function that controls the behavior when you're editing a table is in the PHPMyAdmin directory under /js/makegrid.js
function handleCtrlNavigation (e) {
if ((e.ctrlKey && e.which === 38) || (e.altKey && e.which === 38)) {
g.moveUp(e);
} else if ((e.ctrlKey && e.which === 40) || (e.altKey && e.which === 40)) {
g.moveDown(e);
} else if ((e.ctrlKey && e.which === 37) || (e.altKey && e.which === 37))
g.moveLeft(e);
} else if ((e.ctrlKey && e.which === 39) || (e.altKey && e.which === 39)) {
g.moveRight(e);
}
}
Just remove the parts that refer to the ctrl key, or replace the entire function with this:
function handleCtrlNavigation (e) {
if ((e.altKey && e.which === 38)) {
g.moveUp(e);
} else if ((e.altKey && e.which === 40)) {
g.moveDown(e);
} else if ((e.altKey && e.which === 37)) {
g.moveLeft(e);
} else if ((e.altKey && e.which === 39)) {
g.moveRight(e);
}
}
This will preserve the alt-key functionality. If you don't care about that you can also just add a return statement after the function declaration:
function handleCtrlNavigation (e) {
return;
((e.ctrlKey && e.which === 38) || (e.altKey && e.which === 38)) {...
The function that controls the behavior in other areas (like when you're inserting a new entry) is in the file /js/keyhandler.js under the function onKeyDownArrowsHandler, which is described as "Allows moving around inputs/select by Ctrl+arrows". Here, you can just put a return statement at the top of the function to bypass it:
function onKeyDownArrowsHandler (event) {
return;
Using the Debut theme in Shopify, I have a product with variants that are not compatible. At present they show as unavailable but I want to hide them totally so that only valid options show with each other. So as example if I have Red, Blue, Green shoes and have sizes 9,10,11. But can only get Red shoes in Size 10. I don't want to see options for 9 or 11 ever.
Online someone pointed to theme.js and the code below, but I'm not sure what to change.
Thanks
$(this.singleOptionSelector, this.$container).on(
'change',
this._onSelectChange.bind(this)
);
}
I've just spend most of the day on this, and have come up with the following, which seems to work nicely on the site I'm developing.
The answer I came up with involves editing the assets/theme.js file. At present, the code below disables the select options which are not relevant by checking them against the available variant combinations, but you could easily adapt the below to hide them and then show them instead with CSS.
assets/theme.js
The _hideUnavailableOptions method below needs to be added to the Variants.prototype object.
You then need to call the method from two different places, see below.
_hideUnavailableOptions: function() {
const option1 = document.getElementById("SingleOptionSelector-0");
const option2 = document.getElementById("SingleOptionSelector-1");
if (option2) {
const secondOptions = option2.options;
const variants = this.product.variants;
let possibles = [];
variants.forEach((variant) => {
if (variant.options.includes(option1.value)) {
possibles.push(variant.options)
}
})
for (let option of secondOptions) {
const value = option.value;
let flag = false;
possibles.forEach((possible) => {
if (possible.includes(value)) {
flag = true;
}
})
if (flag === false) {
option.removeAttribute('selected');
option.setAttribute('disabled', 'disabled');
} else {
option.removeAttribute('disabled');
}
} option2.querySelector(':not([disabled="disabled"])').setAttribute('selected', 'selected');
}
},
Call the method as follows:
function Variants(options) {
//stuff before this, then...
this.enableHistoryState = options.enableHistoryState;
this._hideUnavailableOptions(); //N.B. this MUST be before the next line
this.currentVariant = this._getVariantFromOptions();
}
...and again, call the method from Variants.prototype._onSelectChange() - make sure it's the first line in there...
_onSelectChange: function() {
let hideUnavailable = this._hideUnavailableOptions(); //N.B. this MUST be before the next line
var variant = this._getVariantFromOptions();
//lots more stuff follows...
}
I have the following js implemented in Gigya JavaScript Parameters:
onAfterScreenLoad: function(event) {
if ((ell = document.querySelector("#gigya-forgot-password-screen input[type=text][name=loginID]")) != null){
ell.setAttribute('type', 'email');
ell.setAttribute('placeholder', 'user#example.com');
ell.setAttribute('autocomplete', 'off');
}
},
I am able to use the above code to handle the fields of all other screen-sets EXCEPT this "Forget Password" screen (i.e. Screen ID: gigya-forgot-password-screen) in Screen-sets ID "Default-LinkAccounts".
It looks like the forgot password flow is triggered without a user session and independently of the information passed into the Email field on the login screen.
If it is, then how to implement this.
it seems the name of the field is different depending upon which screen you are using:
window.ell = document.querySelector("#gigya-register-screen input[type=text][name=email]");
window.ell = document.querySelector("#gigya-login-screen input[type=text][name=username]");
window.ell = document.querySelector("#gigya-forgot-password-screen input[type=text][name=username]");
so:
onAfterScreenLoad: function(event) {
var ell = null;
if ((event.currentScreen === "gigya-forgot-password-screen") || (event.currentScreen === "gigya-login-screen")) {
ell = document.querySelector("#" + event.currentScreen + " input[type=text][name=username]");
} else if (event.currentScreen === "gigya-register-screen") {
ell = document.querySelector("#gigya-register-screen input[type=text][name=email]");
}
if (ell != null){
ell.setAttribute('type', 'email');
ell.setAttribute('placeholder', 'user#example.com');
ell.setAttribute('autocomplete', 'off');
}
}
I'm doing a custom validation (directive) to compare two dates and show error if start_date is greater than end_date...
I'm passing start_date through ng-model
ng-model="start_date"
and end_date with my directive:
lower-than-date="{{end_date.toISOString()}}" //ignore the toISOString()
The input where I'm using my directive...
<input type="text" ng-model="start_date"
datepicker-popup="yyyy-MM-dd" min="today" show-weeks="false"
lower-than-date="{{end_date.toISOString()}}"/>
The directive...
.directive("lowerThanDate", ['$parse', function($parse) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var lowerThan = null;
function revalidate(_val) {
var valid = _val && lowerThan ? _val < lowerThan : true;
ctrl.$setValidity('lowerThanDate', valid);
}
attrs.$observe('lowerThanDate', function(_value) {
//Here I'm detecting when end_date change
lowerThan = new Date(_value);
revalidate(ctrl.$modelValue);
});
ctrl.$parsers.unshift(function(_value) {
revalidate(_value);
return _value;
});
}
};
}])
This code is working fine, but the validation is triggered only when I change the end_date. I want to validate when I change start_date too.
So, the question is: How can I "observe" the ng-model value to trigger the validation when start_date change.
Note:
This is a generic directive to compare dates. Keep this on mind.
Set up binding to ngModel inside your link function:
var modelValue = $parse(attr.ngModel);
scope.$watch(modelValue, function(value) {
// validate value against endDate.
});
You should a formatter: "Array of functions to execute, as a pipeline, whenever the model value changes".
So just do something like:
function revalidate(_val) {
var valid = _val && lowerThan ? _val < lowerThan : true;
ctrl.$setValidity('lowerThanDate', valid);
return _val;
}
....
ctrl.$formatters.unshift(revalidate);
ctrl.$parsers.unshift(revalidate);
As the reason could be that the model changed from some other place, not directly in DOM element.