I have Bootstrap 2 app that displays a SVG, when I click on any path element I get the Bootstrap 2 popover as expected.
$('body').popover
'selector': 'path'
'container': 'body'
'html': true
'width': '360px'
'title': () ->
item = LOOKUP[this.id]
'' + item['device'] + '/' + item['physical_port'] + '' + '<button type="button" id="close" class="close">×</button>'
'content': () ->
this.id
item = LOOKUP[this.id]
url = '/graphs.horizon/utilisation/'+item['device']+'/'+item['physical_port']+'?layout=naked'
'<iframe src="'+url+'" frameBorder="0" width="360px" height="180px"></iframe>'
'trigger': 'click'
'placement': 'right'
So I naively add a general click event like the following:
$(document).on 'click', '.popover .close', () ->
console.log 'hello %o', $(this).parents('.popover')
$(this).parents('.popover').popover('hide')
However, it doesn't seem to work. I get the debug hello message, however the .popover('hide') doesn't seem to do anything except print the debug message.
In the console I also try $('.popover').popover('hide') and that doesn't do anything either but using just the selector shows a list of the div objects as I would expect.
this worked:
$(document).on 'click', '.popover .close', () ->
console.log 'hello %o', $(this).parents('.popover')
$(this).parents('.popover').hide()
Related
Current behavior:
I run cypress tests and they pass. The UI will display the page the last test visited. When I expand each test to display the steps, I try to click on each step in the test body. For example, get, find, click. The UI goes blank, completely white and it does not highlight the page that particular step visited or the button the step clicked on. There is an icon indicating the element is not visible.
Image 1
Desired behavior
I watched the cypress tutorials on youtube and it appears the UI should highlight, for example, the button that was clicked. Or, if I get on the get step, it should highlight the element that was retrieved
Please see example from Lesson 4 of Cypress IO's recent tutorial video:
image
Notice the UI displays the page and there is no icon indicating the element is not visible.
Code:
Test code to reproduce
describe("home page", () => {
beforeEach(() => {
cy.visit("http://localhost:3000")
cy.clearLocalStorage();
})
context("Hero section", () => {
it("the h1 contains the correct text", () => {
cy.getByData("hero-heading").contains(
"Testing Next.js Applications with Cypress"
)
})
it("the features on the homepage are correct", () => {
cy.get("dt").eq(0).contains("4 Courses")
cy.get("dt").eq(1).contains("25+ Lessons")
cy.get("dt").eq(2).contains("Free and Open Source")
})
})
context("Courses section", () => {
it("Course Testing Your First Next.js Application", () => {
cy.getByData('course-0')
.find('a')
.eq(3)
.click()
cy.location('pathname').should('eq', '/testing-your-first-application')
})
it("Testing Foundations", () => {
cy.getByData('course-1')
.find('a')
.eq(3)
.click()
cy.location('pathname').should('eq', '/testing-foundations')
})
it("Cypress Fundamentals", () => {
cy.getByData('course-2')
.find('a')
.eq(3)
.click()
cy.location('pathname').should('eq', '/cypress-fundamentals')
})
})
})
I've got an input field whose text contents I need to verify. Now, verifying it works fine. Bug for some reason, I cannot for the life of me manage to type the value to cy.log(). I've done it before, but I'm unable to find the example. And I've been trying all variants of invoke('val'), 'value' and 'text', to no avail.
cy.get('[data-e2e-selector=byggrad]').eq(0)
.within(() => {
cy.get('[data-e2e-selector=adresserad]').eq(0)
.within(() => {
cy.get('[data-e2e-selector=etasjerad]').eq(0)
.within(() => {
cy.get('[data-e2e-selector=finansieringsobjektrad]').eq(boligrad)
.within(() => {
cy.get('input[data-e2e-selector=boligbetegnelse]').should('have.value', '123');
cy.log('BOLIGBETEGNELSE: ' + cy.get('input[data-e2e-selector=boligbetegnelse]').invoke('val'));
//cy.log('BOLIGBETEGNELSE: ' + cy.get('input[data-e2e-selector=boligbetegnelse]').invoke('value'));
//cy.log('BOLIGBETEGNELSE: ' + cy.get('input[data-e2e-selector=boligbetegnelse]').invoke('text'));
});
});
});
});
Here's the cypress output:
The complete markup:
<input _ngcontent-pxm-c10="" class="hb-inputfelt hb-inputfelt--10tegn ng-pristine ng-valid ng-touched" data-e2e-selector="boligbetegnelse" ng-reflect-form="[object Object]" id="finansieringsobjekt-boligbetegnelse-319-H02-0">
You need to chain off of the .invoke() call to get the value.
e.g.:
cy.get("matcher").invoke("val").then((value) => {
cy.log(value);
});
Since value it's an attribute of an input element.
You can find all properties for element: devtools -> find element in DOM -> right hand side find tab properties -> scroll down and find value property
cy.get("input[data-e2e-selector=boligbetegnelse]").invoke('prop','value').then((value) => {
cy.log(value);
});
Hi there especial I am struggle to prevent allowed pit more then 3 picture in text so I would like to listen when button image from plug-ins in tinymce is click and then I could prevent default process if is more then 2 picture already in text , please if any one know how to do it ?
I tried in
tinymce.init({
setup : function(editor) {
editor.on('click', function(e) {
console.log(e);
});
}
});
but not any comment fire when i click on image plugin button
thank you
Why not create your own plugin?
I used the following code inside wordpress admin to triger the upload media popup:
// Init tinyMCE
tinymce.init({
editor_selector: 'nwac_editor_' + nextPlusSignId,
mode: "specific_textareas",
media_buttons: false,
menubar: false,
relative_urls: false,
toolbar: 'undo redo formatselect bold italic alignleft aligncenter alignright alignjustify bullist numlist outdent indent plusimage',
setup: function(editor) {
editor.addButton('plusimage', {
icon: 'image',
tooltip: 'Insert/edit image',
onclick: function() {
// If the media frame already exists, reopen it.
if (file_frame) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Choose an image for the plus sign',
button: {
text: 'Insert selected',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
//console.log(attachment);
editor.insertContent('<img src="' + attachment.url + '" data-mce-src="' + attachment.url + '" alt="' + attachment.alt + '">');
return;
});
// Finally, open the modal
file_frame.open();
}
});
},
content_css: nw.baseurl + '/skins/wordpress/wp-content.css',
body_class: 'mce-content-body nwac_plus_signs_' + nextPlusSignId + '_template post-type-products post-status-publish mceContentBody webkit wp-editor wp-autoresize html4-captions has-focus',
});
I am working with Listeners + XTemplate.
Our goal is to delegate an 'itemtap' listener to an ID in XTemplate (i.e. div id="xplay").
Error received:
Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined event_bindings:207
chrome.Event.dispatch event_bindings:207
chromeHidden.Port.dispatchOnMessage miscellaneous_bindings:250
Here's our XTemplate:
var itemTpl = new Ext.XTemplate(
'<tpl for=".">',
'<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
'<img src="http://www.myShortenedUrl.com/{timeImgPath}" />',
'<div id="xplay">',
'<img src="http://www.starrbc.org/play_button.jpg" />',
'</div>',
'</tpl>'
);
Here's our xtype: list with the XTemplate (itemTpl) binded to it, and an itemtap listener that is delegated to "xplay":
xtype: 'panel',
items: [{
xtype: 'list',
id: 'bookmarkView',
store: bookmarkStore,
itemTpl: itemTpl, // setting the XTemplate here
listeners: {
itemtap: function(bookmarkView, index, item, e){
console.log("Hello I am Here!");
},
element: 'innerElement',
delegate: 'xplay'
}
We removed element: 'innerElement' and delegate: 'xplay' and it will trigger the itemtap function when we click on ANY part of the XTemplate, but that isn't our goal. We would like only our PLAY button to trigger this listener.
Update
Thanks Evan for the quick response.
Here's what I tried with your inputs - let me know if I'm doing it wrongly.
Changed div id to div class.
var itemTpl = new Ext.XTemplate(
'<tpl for=".">',
'<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
'<div class="xplay">',
'<img src="http://src.sencha.io/200/http://www.starrbc.org/play_button.jpg" />',
'</div><br/>',
'</tpl>'
);
I added the check for the event object, commented the codes away for element and delegate (leaving these there won't work).
listeners: {
itemtap: function(bookmarkView, index, item, e) {
console.log("Hello I am Here!");
if (e.getTarget().hasCls('xplay')) {
console.log('hasCls: xplay');
}
} //,
// element: 'innerElement',
// delegate: 'xplay'
}
However, we encountered this problem:
Uncaught TypeError: Object [object Object] has no method 'getTarget'
Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception
1 undefined
We're confused, does that mean we're not getting an Event object? Or have we interpreted your explanation wrongly?
You're going about it the wrong way.
1) ID's should be unique, you can't repeat the id over and over, there has to be one per element. Instead, give the element a class name.
2) Listen to the itemtap event as you have been doing, then check the event object to see if it matches your delegate:
if (e.getTarget().hasCls('myCustomCls')) {
// do something
}
listeners: {
element: 'element',//i hope element works.
delegate: 'div.xplay',
event:'tap',
fn: 'Your function here',
}
This is how the listener should be for your requirement.
I am working with a sencha panel in the below fashion.
Is there a way to attach a handler say like touch which can return the coordinates of the touch
var world_map = new Ext.Panel({
fullscreen: true,
style: 'background-color:black',
autoScroll:true,
html:'<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>'
});
The basic idea is to be able to detect the points where the user touches, is this possible using such a panel ?
thank you
This is definitely possible, and rather easy by using advanced listener options. The trick is to set the element property on the listener so that you are binding tap events to the DOM element over the component.
Here is a working example on Sencha Fiddle:
https://fiddle.sencha.com/#fiddle/8ua
var world_map = new Ext.Panel({
fullscreen: true,
style: 'background-color:black',
autoScroll: true,
html: '<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>',
listeners: [{
event: 'tap',
element: 'element',
fn: function(event) {
console.log(event);
alert('Touch Position: ' + event.touch.pageX + ' ' + event.touch.pageY);
}
}]
});