I have an HTML5 web-app and "something" attached a click handler to one of my divs.
If I use the Event Listeners tab I can see the click event and all of its properties - but is there any way to break when an event is fired and trace what is executed? That may give me more information on what attached it.
Disregard, found it:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints-on-javascript-event-listeners
Simply go into Event Listener Breakpoints under the Sources tab and turn on Mouse > click
Related
I have changed the onclick(for li element) using the inspect element. In onClick I have called a function it was invoked twice.
Here is my sample code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function a(val)
{
alert(val);
}
</script>
</head>
<body>
<ul>
<li onClick="a(1)"> 1 </li>
</ul>
</body>
</html>
I assume you are using Google Chrome. This is a bug/problem with the Inspect Element feature.
If you use Inspect Element to change or remove the onclick handler of an element, it doesn't work as expected. The new Javascript code is ADDED as a new handler to the existing list of the onclick handlers, rather than replacing the existing handler of the old code.
This is incorrect and a bug, because Inspect Element allows user to replace the code, and it looks like it's replaced - but hidden from the user, it's actually appended as a new handler - so the result is not what it would seem like.
If the code or the onclick attribute is deleted, the JS code is still executed as it remains registered as a handler.
This is highly misleading and makes the Inspect Element nearly useless for debugging event handler JS bugs.
To try it out:
Right-click any element and click Inspect element (or Inspect).
Add or modify its onclick handler to alert('stack');.
Again, modify the onclick handler to alert('overflow');.
Now, click the element to fire the handler.
You may think that you will just get one alert with the word overflow. But you will actually get two alerts, one with stack and another with overflow. This means the code alert('stack'); is still in the handler, even though it's not visible on the DOM tree.
There is no permanent fix for this problem. The following workarounds may help. Reporting it to Google may encourage them to fix it in a future version of the browser.
Workarounds
Use Mozilla Firefox. The behavior of Inspect Element in Firefox is as expected - the browser really replaces the old handler instead of adding a new handler to the list.
If you need to use Google Chrome, do the following:
With the element selected in the Developer Tools window's Elements tab, click the Event Listeners tab (this is on the other pane which may appear below or on the right side).
Make sure that the Ancestors checkbox is unchecked.
If your element already has an onclick handler, you should be able to see a click event handler listed. If you don't see anything, try clicking Refresh button (next to Ancestors checkbox).
If you still don't see it, close the Developer Tools and right-click the element in the page and click Inspect to open it again.
Click the rightward arrow next to the click event handler. It will open and you will get a list of all the registered handlers (listed with the tag#id.class notation).
In the DOM tree (top pane or left pane), double-click and edit the onclick handler code and confirm it by pressing Enter.
In the Event Listeners tab, click Refresh button again. You will see that a new handler has been added.
Hover over the handlers and you will see a Remove button appearing on each of them. Click this button on each handler until only one remains.
The order doesn't matter - you can start at the bottom, the top or even go randomly - internally, the Remove button removes handlers in the order they were added.
If there's only one handler left, you can be sure that's your latest code - it doesn't matter which handler was left.
To change the onclick code again, repeat steps 5 to 7.
I notice this bug as well. While working on my project this week with ajax calls.
Having a button like this:
<button id="mybutton" type="button" onclick="sendMessage('12345')"></button>
If you go into the inspector and edit '12345' to 'abcde'. Then clicking the button will cause the button to fire twice. Once as '12345' and once as 'abcde'.
To solve the double sending you can attach the event listener with an ID rather than using html's onclick. So instead use something like:
$("#mybutton").click(function(){
sendMessage('12345');
});
This will not suffer the same double sending bug.
However, anything you edit on the inspector will not do anything now, it will be disregarded.
Is it possible to see (debug) custom events being fired from DOM elements in the browser?
Let's say I want to see which specific element of the Bootstrap Collapse fires the show.bs.collapse event, can I somehow see it for instance in Chrome dev tools?
First off, Monitor Events will handle this for normal JS events. However, Bootstrap events are jQuery events, so vanilla JS event listeners don't listen for them.
To listen to jQuery events run the following code snippet in your console:
jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});
Replace "shown.bs.collapse" with whatever event you want. When they are logged, just check the target element for the event to know what fired it.
Now, for the other way around, to see what is listening to events. Within the elements panel, if you go to the event listener tab and uncheck "ancestors", then you will see only the directly bound event listeners on an element. This way you know what is listening for the event so you can inspect what should be done when it is fired. This matters, since you may find 'body' isn't getting the event, since it could have bubbling cancelled. So if the above snippet isn't working, you need to check for bubble cancelling in the element listening for the event.
Firefox offers out of the box, listeners for jQuery events, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
But you can extend it: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/
You can use Visual Event 2 bookmarklet. Great tool used to inspect which events are attached to a specific DOM elements.
I am trying to open a modal window during a click handler to verify the user action but the window doesn't appear until the handler completes. The window code can be as simple as the following and it still will not display so it isn't something to do with my abstract class.
Window w = new Window();
w.setModal(true);
w.setImmediate(true);
// Add components etc etc
UI.getCurrent().addWindow(w);
I could add the action code to the windows OK/Yes handler but that would stop me creating a generic Message class to simplify/stop code duplication.
I am guessing there is something I dont understand about how Vaadin/GWT works (still a newbie!), could someone point me in the right direction?
Cheers
For UI stuff, you have to stop thinking of sequencial programming,
better to think about event-driven concepts.
For Vaadin you could create a Dialog Window which asks the yes/no question.
In you app you create this dialog and display it.
And you attach a event-handler which is fired when the user clicks yes/no,
and inside this handler you then do the required actions in your code.
You can also look at this add-on
https://vaadin.com/de/directory#addon/confirmdialog
The right direction is architecture overview https://vaadin.com/book/vaadin7/-/page/architecture.html#architecture.overview
In other words your code makes only response from server side, but only client side can show "modal" window.
In your case you have to create handler for ok button click event and wait for this event
I have a hook on the beforeUnload event. If i try to click on a link, reload or close the tab or the navigator, the app ask for confirmation before leaving. That's the desired behavior.
But if click on the back button or the backspace outside an input, no confirmation.
At the beginning of the html :
window.onbeforeunload = function() {
if (confirmEnabled)
return "";
}
And i use the Gwt PlaceHistoryMapper.
What did i miss ? Where did i forgot to look ?
Thanks !
As long as you stay within your app, because it's a single-page app, it doesn't by definition unload, so there's no beforeunload event.
When using Places, the equivalent is the PlaceChangeRequestEvent dispatched by the PlaceController on the EventBus. This event is also dispatched in beforeunload BTW, and is the basis for the mayStop() handling in Activities.
Outside GWT, in the JS world, an equivalent would be hashchange and/or popstate, depending on your PlaceHistoryHandler.Historian implementation (the default one uses History.newItem(), so that would be hashchange).
I created the menu item in the "File" menu as a command. For this command there is a handler implementing the IHandler interface. This handler contains the isEnabled method. I am trying to use this method to enable/disable my menu item, but that method is called only once when I click on the "File" menu. When clicked for the second, third etc. times, the isEnabled method is not called again even if I changed the state of page (open/close editors) before.
What should I do? Maybe this method is not intended for control menu items?
Are you subclassing org.eclipse.core.commands.AbstractHandler? You should use setBaseEnabled(boolean) to update the state of your handler (which would update your command).
It's only valid to change enabled state in your handler as long as you also fire the HandlerEvent. It's usually easier to call setBaseEnabled(boolean) which will fire the event for you.
If you're trying to enable/disable the menu, than you should use core expressions.
I've already explained how to do that in this answer:
Eclipse RCP menus & actions: Configure or code?
The part that you're interested in starts with:
For activating/deactivating a menu[...]
I hope this is what you're looking for.