Is it possible to debug in Chrome developer when a click event is performed? I can see the addEventListener is created but I cannot see it happening after I click that element.
if (storedEntry !== '') {
element.addEventListener('click', (event) => {
event.preventDefault();
sessionStorage.removeItem(storageKey);
document.location.href = storedEntry;
});
I tried to set a breakpoint and debug but it just skips over the block element.addEvenListener.
while doing debugging you need to go in inspect view / source click on the file where you want to debug and place the breakpoint on your javascript function or write debugger; before your code to hold at that position.
Related
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
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 multiple tinyMCE editors on one page, I'm using :
setup : function(ed) {
ed.onKeyPress.add(function(ed, e) {
//do stuff with ed.id
});
}
This registers the event regardless of whether I'm in fullscreen mode or not, which is what I want.
However, ed.id appears to be different depending on whether fullscreen mode is active or not. What I'm wondering is how can I get a reference to the CALLING tinyMCE editor when this keypress event is running.
For example,
on keypress Editor id = "TinyMCE_editor1" - click on fullscreen mode , and ed.id = "mce_fullscreen". I'd like a reference to "TinyMCE_editor1".
Currently, I can't adequately traverse to the correct position in the DOM to perform what I need, without a reference to the tinyMCE editor which opened the "fullscreen mode" editor.
Any ideas / help appreciated.
You have to use the param "fullscreen_editor_id" passed to the plugin,
then to detect if you are in full screen or not you can use the OR operator (as shown below).
setup : function(ed) {
ed.onKeyPress.add(function(ed, e) {
var editorId = ed.getParam("fullscreen_editor_id") || ed.id;
// Do your stuff
});
},
Hope it helps!
I am having troubles trying to understand how to use "Save before Exit" plugin with the Modal Page plugin in Oracle ApEx v4.1.1.
I basically would like to know how to attached the 'X' close button to the "Save before Exit" plugin when a user makes a change to a select list or text area field on the page (I also have classes associated to these fields), used within the modal page?
Here are links to the two plugins that I am trying to link together:
http://apex.oracle.com/pls/apex/f?p=46685:MODAL_PAGE:0
http://apex.oracle.com/pls/apex/f?p=46685:SAVE_BEFORE_EXIT:0:::::
Important note: i tested this plugin with the latest version available: 3.0.2. The change detection routine there is modificationDetected, where in 3.0.0 it was changeDetected! Check which version you use!
When i have to integrate things like these, i want to avoid altering provided code such as the plugin code. Doing this will break your stuff if you don't remember in the future and install a new version (unless you're actually fixing something of course).
Create a dynamic action on the page that calls the modal dialog, fire on load:
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
apex.debug("Colorbox close attempt - check changes");
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
apex.debug('Modal contains changes: '+hasChange);
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
};
The save before exit plugin works by using the browser window.onbeforeunload event. It does trigger when the popup is closed (at least in FF it does), but by then it is way too late: the popup is gone and the markup too.
My first thought was to simply tap that onbeforeunload event by redirecting the page to a generic page which would hold onload code to close the popup. The onbeforeunload would spring in action as soon as the redirect would be attempted. There would be no dynamic action or plugin altering. But oh well, i decided against that. (Note though: most of the code in this snippet would have to be reused in that case too, save change detection and dialog).
Instead i choose to check for changes in the iframe document when a close event happens, and display a dialog, which can be modified too, and clearly indicates that you are performing an action on the popup and not on "the page" (which could be interpreted as the parent page of the modal).
So what is needed is to catch the modal popup close event. Note that the plugin is based of the jQuery Colorbox plugin. The Skillbuilder modal does not provide a pre-close event and can not without altering the colorbox plugin.
Colorbox provides a close option in the form of the "X" and also the ESC-key. I want to catch both(/all).
I didn't opt for unbinding the click on the X and binding a new click.
what i did first is save the default colorbox close event, and
then override the default.
var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
Next up: this piece of code will get the jQuery instance of the modal
page. I then fetch the document element of the page with this jquery
instance
iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);
Next up is checking the iframe (modal popup) for changes
var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
So if the page has changes, a warning has to be displayed. I do this
by using jQuery-UI Dialog. It will have "Unsaved changes!" as title,
and 2 buttons ("Don't close" and "Close"). When closing, the save
before exit plugin has to have its default warning disabled! If not,
you'd still get prompted by the onbeforeunload message! Then the
colorbox has to be closed (which will remove the iframe). Finally
the dialog (prompt) has to be closed.
if(hasChange){
$( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
resizable: false,
height:140,
modal: true,
stack: true,
zIndex: 9999,
buttons: {
"Don't close": function() {
$(this).dialog( "close" );
},
"Close": function() {
iframeDoc.apex_save_before_exit("disableWarning")
default_colorbox_close();
$(this).dialog( "close" );
}
}
});
If there are no changes, then the modal can simply be closed.
} else {
apex.debug('Close modal with default colorbox close');
default_colorbox_close();
};
Hope some of that sticks ;)
Example on http://apex.oracle.com/pls/apex/f?p=11128:1
Edit:
And some big thanks to Dan McGhan for helping in the OTN thread :)
https://forums.oracle.com/forums/thread.jspa?threadID=2434115&tstart=0
I would like to add something to the answer. I've noticed that the items that changed are not highlighted. So I've added this line to the "Don't Close" right before closing the dialog box.
iframeDoc.apex_save_before_exit('modifiedItems', {highlight:true});
And it highlights the items as it should!
I'm trying to build a mobile-safari/iphone web-app using jQuery code I already wrote for the desktop version of the app. The problem I'm having is that when my phone goes to sleep with the web-app running, when I wake it up (slide to unluck) the JavaScript event handlers no longer function. In this case meaning when I click on a link that used to perform an AJAX update via an onclick event it actually follows the link by opening the page in a new Safari window, breaking the appearance of the native iPhone app.
The code that stops working:
$(function() {
var ajaxLoad;
var ajaxClick = function(e) {
e.preventDefault();
e.stopPropagation();
$("body").load( $(this).attr("href"), ajaxLoad );
}
ajaxLoad = function() {
$(this).find("a").click( ajaxClick );
}
$("a").bind( "click", ajaxClick );
});
When the code works the result of the link will open in the web-app frame, when it breaks, the code will open in a new safari window, breaking the look of an actual app.
Not tested - but would it help to add 'return false' to the end of the ajaxClick function so that the link does not activate.