What is the best way to test if a Magnific Popup is currently "open"?
Will a check for the existence of some div be future proof?
For example, if I use:
if ($(".mfp-ready").length > 0)
...
I looked for the equivilent of an isopen property in the api documentation but found nothing like that
EDIT
Following Dmitry's answer, I examined the instance object and found the following properties that may prove useful to others:
isAndroid
isIE7
isIE8
isIOS
isLowIE
$.magnificPopup.instance.isOpen
Here is simple solution from Magnific popup documentation
$('.image-link').on('mfpOpen', function(e /*, params */) {
console.log('Popup opened', $.magnificPopup.instance);
});
Old question, i know, but none of the other answers solved the same issue for me.
The next code solved it for me:
$('.open-popup-link').magnificPopup({
callbacks: {
open: function() {
console.log('text to show in console if popup is open');
}
}
});
Related
When I perform
cy.get('#fsp-name').clear().type('random text');
If the text already has value lets say 'assd asd adsdsd' and I perform above command I get something similar to 'random textassd'
I also tried using
cy.get('#fsp-name').clear().should('have.value', '').type('random text');
It works some time and in other times it complains it does not equal to ' '.
And I am trying to do this in a each loop like below
const data = [
{selector:'#name', newValue: 'John'},
{selector:'#phone', newValue: '1234567'}
];
cy.wrap(data).each(field => {
cy.get(field.selector).clear().should('have.value', '').type(field.newValue);
cy.contains('Save').click();
cy.visit('/abc/sdd');
cy.get(field.selector).invoke('val').should('equal', field.newValue);
});
Tried the solutions provided above, but all did not help.
I've ended up using this:
cy.get('#my-input-element').focus().clear();
If that doesn't work, the not so happy workaround is:
cy.get('#my-input-element').invoke('val', '');
When .type somehow did not finish the given string (rare cases):
cy.get('#my-input-element').invoke('val', 'Some text here');
I had a similar problem and It was related to focused and click related. I can suggest trying the following two option. I DON'T know it is right or wrong.
cy.get('#fsp-name').click().clear().type('random text');
OR
cy.get('#fsp-name').click().focused().clear().type('random text');
I was talking to the developer and according to him we are using MaterialUI and have some default component using focused and click event differently. After having both options resolved my problem
.clear() is an alias of .type('{selectall}{backspace}') however depending upon the input field set up this would not work in all cases.
I solved this by using .type('{selectall}{backspace}{selectall}{backspace}') instead of the .clear()
I'm using Cypress version 3.8.3 and I noticed that I have to invoke clear() sometimes two times in a row:
cy.get('#fsp-name').clear();
cy.get('#fsp-name').clear();
Seems like the cypress test runner is getting ahead of app initialization and some helpful article links below
https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/
https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/
As of now adding wait before clearing makes the test pass. Let me know if anyone has better solutions
I've had the same problem using Mui React with Cypress and when I called clear an ";" was added.
I've applied the same #Steven Vachon solution calling clear() function of cypress first.
Here my solution:
const clearInputElement = (input) => {
const input2Search = input;
cy.get(input2Search).clear();
cy.get(input2Search).then(($elm) => {
const event = new Event(input2Search, { bubbles: true, cancelable: true });
const input = $elm.get(0); // `as HTMLInputElement` for TypeScript
input.value = "";
input.dispatchEvent(event);
});
};
I ended up having to do clear manually via the DOM:
cy.get('input').then($elm => {
const event = new Event('input', { bubbles: true, cancelable: true });
const input = $elm.get(0); // `as HTMLInputElement` for TypeScript
input.value = '';
input.dispatchEvent(event);
});
I, too, faced a similar issue while using with react-ace editor. I wind up with
function typeContentOnSelectingExistingContent(elementId, content) {
return cy.get(`#${elementId}`).type(`{selectAll}{selectAll}${content}`)
}
Try this, it worked for me:
cy.get('#fsp-name').clear({ force: true }).then(() => {
cy.wait(3000)
cy.get('#fsp-name').invoke('val', '').type(`${valueToBeTyped}{enter}`)
})
Official docs states that:
It is unsafe to chain further commands that rely on the subject after .clear().
That's probably why the code in the original question didn't work, it was chaining clear and type commands:
cy.get('#fsp-name').clear().type('random text');
So, a simple alternative would be something like:
cy.get('#fsp-name').clear()
cy.get('#fsp-name').type('some text')
More about the clear command:
https://docs.cypress.io/api/commands/clear
With this link you can reproduce the bug.
https://jsfiddle.net/pw7e2j3q/
<script>
$( "#test" ).change(function() {
$("#test").remove();
var combo = $("<select></select>").attr("id", "test2").attr("name", "test");
combo.append("<option>New One</option>");
$("#App").append(combo);
});
$("#click").click(function(){
$("#App").remove();
})
</script>
If you click on a <select> element and remove it from dom and after that you click on the link test. You should see the old <select> element pop for selection.
is there some hack to fix that ?
I was able to reproduce this issue. The problem is, whenever you are trying to remove the select box on its change event then iOS10 is not able to properly unbind the selectbox. To fix this you need to put your code change event code inside a setTimeout with some timeout value. It is not working with zero timeout value.
http://jsfiddle.net/n62e07ef/
Below is a fix for your code:
<script>
$( "#test" ).change(function() {
setTimeout( function() {
$("#test").remove();
var combo = $("<select></select>").attr("id", "test2").attr("name", "test");
combo.append("<option>New One</option>");
$("#App").append(combo);
}, 50);
});
$("#click").click(function(){
$("#App").remove();
})
</script>
One easy solution would be change the code a bit so don't re-generate the whole select-element, but just the option-elements inside.
I've stumbled upon this bug today. It's like Gautam says in his answer that the event wont unbind before the element it removed.
My solution, blur the element before removing it.
$("#test").blur().remove();
I have no idea why, but for some reason my code does not fire in chrome. Any idea why? I read the entire documentation of Greensock but nothing that adresses my issue.
http://jsfiddle.net/w0otqcw8/6/
var t = TweenLite.to(".menu-button", 4, {left:'0', opacity:'0.9', ease:Bounce.easeOut, paused:true, reversed:true});
$(".menu-button").on("click", function() {
if (t.reversed()) {
t.play();
} else {
t.reverse();
}
});
Your code adds right and left css properties at the same time. Animate x,y,xPercent and yPercent instead.
I am trying out dojotoolkit 1.8 and cant figure out how to hook up an onchange event for a dojo/form/select
Nothing happens with this
require(["dojo/dom","dojo/on"], function(dom,on){
on(dom.byId("myselect"),"change",function (evt){
alert("myselect_event");
});
If instead, the following hook into click works:
on(dom.byId("myselect"),"click",function (evt){
but i want to capture the value after user clicks and changes
I am sure it is simpler than going back to Plain ol javascript onChange...
Thx
You could try something like this:
var select = dijit.byId('myselect');
select.on('change', function(evt) {
alert('myselect_event');
});
I've seen this in the reference-guide multiple times, eg in the dijit/form/select' s reference-guide at 'A Select Fed By A Store'.
Maybe it even returnes the handle, i haven't looked this up so far. But i guess it should work.
EDIT:
Considering #phusick's comment, i want to add, that you could also simply change the "change" to "onChange" or the dom to dijit within calling on(...)
Following in the footsteps of #nozzleman's answer try
var select = registry.byId('myselect');
select.on('change', function(evt) {
alert('myselect_event');
});
If you use on instead of connect then you don't have to write onChange, you can simply write change.
Similar to above answers do a dijit.ById to find the correct element and then register the 'onItemClick' event.
creating the select dropdown programatically appends a _menu to whatever node you create the select items so 'search' becomes 'search_menu' on a page init you can do the following:
dojo.connect(dijit.byId('search_menu'),'onItemClick',function(){
//console.log("search menu");
doSearch('recreation');
});
As others have pointed out, you're trying to access the Dijit using DOM. Also, the parameter to the anonymous function for the "change" event is the value selected by the user, not the event itself.
Here's your code modified to access the Dijit and process the "change" event:
require(["dijit/registry", "dojo/on"], function(registry, on) {
on(registry.byId("myselect"), "change", function (value) {
alert("change_event.value = " + value);
});
});
Late to the party, but I recently ran into the issue. Hopefully my answer will help some poor soul maintaining some legacy code. The answer is for combobox but worked for select as well -
onChange not sufficient to trigger query from Dojo Combobox. Need to attach listener to dropdown items.
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});
Ref: https://stackoverflow.com/a/12422155/4564016
First of all I want to say Im new in the DOJO world and probably for some persons this
question is stupid :). But also somebody says that there is no stupid questions.
Here is my problem:
I got a quick question related to DojoML (<script type="dojo/connect"> to be more exact).
In an example here: http://dojotoolkit.org/reference-guide/dijit/Tree.html
we got somethin like this :
<script type="dojo/connect">
var menu = dijit.byId("tree_menu");
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e) {
var tn = dijit.getEnclosingWidget(e.target);
menu.getChildren().forEach(function(i) {
i.attr('disabled', !tn.item.children);
});
});
</script>
Now I would like to translate it to "traditional" script.
As I read here : http://dojocampus.org/content/2008/08/09/dojoml-the-best-thing-since-sliced-bread/
such DojoML notation can be translated into :
dojo.connect(oMyTree, 'postCreate', null, function(){});
My question is if this is the right "translation" because it simply doesnt work.
My goal is to attach a simple right click menu to every MyTree's node.
I have read some where i like this. This kind of scripts will run once the widget enclosing them is instantiated. Basically will append a extra handler to postCreate. But if you do you are erasing the default postCreate and running your postcreate handler.