I have a sap.m.Dialog box somewhere in my application.
When the user clicks outside of the Dialog, I want it to close.
in JQuery this works. But in sapUI5 I cannot get it to work. Any ideas?
Hi,
here how I solved it (here is your updated openDialog() function. The rest of the code is as it was):
openDialog: function(){
this._oDialog.open();
document.addEventListener("click",
function closeDialog(oEvent){
if(oEvent.target.id === "sap-ui-blocklayer-popup"){
sap.ui.getCore().byId("__xmlview0--myDialog").close();
document.removeEventListener("click", closeDialog);
}
});
},
Here is JSBIN example: LINK
The sap.m.Popover control shows this behaviour by default.
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.Popover/samples
Related
I have created the button in the gmail inbox using inboxsdk.
Now i want to get a pop up by clicking on that button
2.Pop up should contain a link which navigates to my website page(xyz.com/login.php)
How can i do these using inboxsdk
Screenshot:
If you are still struggling with this, I would suggest a simple solution which is to fire a JavaScript confirm dialog see here. On confirmation you could redirect the user, using window.location.href = '<your-url>';.
Another solution would be to use InboxSDK's widgets.
Example:
InboxSDK.load(2, '<InboxSDK-app-id>').then((sdk) => {
...
const el = document.createElement('div');
el.innerHTML = 'Link description';
sdk.Widget.showModalView({
title: 'Modal Title',
el
});
});
For more ModalOptions look here.
Notice: I set the attribute target attribute of <a> tag to "_blank". This makes sure the url opens in another browser tab.
A third, more direct (optional) solution would be to add an onClick event listener to which you attach a function that redirects the user to your url, see a code example here.
A fourth and better possible solution would be to add a DropdownView to your button's onClick function, see example code here.
I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.
So far i have been able to get the selected node in tinymce by using the onnodechange event
setup: function(ed) {
ed.on('NodeChange', function(e){
console.log(e.element);
});
}
but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?
I have found a workaround by adding the following inside setup callback
//prevent user to edit content inside tinymce
ed.on('PostRender', function(e){
ed.getBody().setAttribute('contenteditable', false);
});
ed.on('KeyPress', function(e){
e.preventDefault();
e.stopPropagation();
});
It's not perfect, but at least, it does the trick ;)
I had a similar problem, but we needed to intercept the click event, not "NodeChange".
I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.
bodyEl.addEventListener('click', function(e) {
console.log('Hello ', e.target);
}, false)
If you need to detect selection change, you could use the 'select' event.
I have a dropdown menu which contains a input and several buttons. The dropdown should hide when I click one of the buttons or somewhere else, but don't hide when keypress on the input. I use the following code, it doesn't work. Though it works when I use
$('.dropdown input').click(function(e){
})
instead of live.
But I do need live, so is there any solution for this?
/* dropdown menu */
$('.dropdown input').live('click', function(e) {
e.stopPropagation();
});
$(document).click(function(e){
if(e.isPropagationStopped()) return; //important, check for it!
});
e.stopPropagation() will do no good for you in .live(), because the handler is bound to the document, so by the time the handler is invoked, the event has already bubbled.
You should stopPropagation from a more local ancestor of the element being clicked.
Since you were using .live(), I assume there are some dynamic elements being created. If so, the proper element to bind to will depend on the rest of your code.
Side note, but you never "need" .live(). There are other ways to handle dynamically created elements.
did you try:
$('.dropdown').on('click', 'input', function(e) {
e.stopPropagation();
});
OR
$('.dropdown').delegate('input', 'click', function(e) {
e.stopPropagation();
});
NOTE: e.stopPropagation(); is not effective for live event
According to you question I have a dropdown menu which contains a input and several buttons. The dropdown should hide... means that dropdown is already exists within you DOM. If it already exists then you don't need live event.
what version of jQuery are you using? > 1.7 then:
$(document).on({"click":function(e){
//do your work, only input clicks will fire this
}},".dropdown input",null);
notes:
properly paying attention to event.target should help out with overlapping 'click' definitions using .on();
Please see this comment and the rest of the thread: [question]: TinyMCE Image URL select
Thank you!
The 'x'-Button element is the element you get using $(".mceClose"). So you are able to assign an event handler there (you need to assign the handler when the dialog is open/visible) else you won't find such an element and the assignment will fail. Here it is:
$(".mceClose").click(function() {
alert('Handler for .click() called.');
});
I have a button which by default is disabled. After I select an item from jQuery UI Autocomplete, I want to enable the button.
I'm testing if this works by using an alert on the button:
jQuery('#btn').live('click', function() { alert('test'); });
First I tried this solution:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This enables the button, but then I was reminded that this will not work, because .live only works on click events. So I changed the code to this:
jQuery('.ui-menu-item a').live('click', function() {
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
This almost works. The disable attribute is blanked out, but the alert will still not trigger when I click the button.
So what am I missing here?
What version of jQuery are you using? The following:
This enables the button, but then I
was reminded that this will not work,
because .live only works on click
events.
Is not true for >= 1.44 (and may be true for versions even before that. Edit: I'm almost positive this will work with >= 1.3, when live was added.).
You can do exactly what you were trying to do with the autocompleteselect event:
jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
jQuery('#btn').removeClass('inactive').attr('disabled','');
});
If you're using jQuery >= 1.6, however, you'll want to use prop:
jQuery("#btn").removeClass("inactive").prop("disabled", false);
Here it is working with jQuery 1.6:
http://jsfiddle.net/wGH32/