I have the following code. As You can see I have tried most of the common methods for preventing it from opening.
I'm doing this because in the panelbeforeopen I would like to check to see if the user is logged in and then only show the panel if they are.
$(document).on('panelbeforeopen', '#right_panel', function(event){
event.preventDefault();
alert('test');
return false;
event.stopImmediatePropagation();
});
In the end I had to bind an event handler to the button that was responsible for opening the panel.
One note is that the code that will link an a tag automatically to a panel sets up its event handler as a click event not a tap event. It also for what ever reason will not work if you use .on to bind your click event handler. You must bind it like normal.
See js fiddle here
$('.footer .right_panel').on('click', function (event) {
alert('test');
event.stopPropagation();
});
Related
In a SAPUI5 controller of a master view I trigger a oModel.read() request to read some data (async). This read will be done each time the page will be reached during navigation.
onInit: function() {
var that = this;
this.getRouter().getRoute("PageName").attachMatched(this.onRouteMatched, this);
},
onRouteMatched : function(oEvent) {
...
oModel.read(....); // this will be done async
...
},
The app should be normal rendered (with normal binding).
The mentioned read will load some messages from the server and syncs it with a local model. Now in case of a new message a dialog should be shown.
Here is my problem: Where to place the dialog.open() call in the controller (what event?) so that the dialog will be shown?
Right now I tried with onAfterRendering and there it works for exactly the first call. For further calls I can't see any dialog. If I place the open dialog in the onRouteMatched I can see a short flickering.
So the problem is, that opening the dialog should be done after the rest of the application is rendered. But how to reach this?
Meanwhile I have a hacked solution.
In the onInit method of the controller I register to the onmousemove event. Each time the mouse will be moved I can check if there is some data to show.
this.getView().attachBrowserEvent("mousemove", function(oEvent) {
this.onCheckForMessages();
});
But better solutions are welcome.
I am trying to install the following: http://red-team-design.com/simple-and-effective-dropdown-login-box/
When I hover over it, the color changes. The CSS is shown when I click inspect element.
But when I click on the login tab, it does not open.
What am I doing wrong? How can I find out what I am doing wrong?
I have created a file called custom.js and embedded it.
I am using the Laravel framework.
I'm typing this out of my head, but it seems that the default anchor tag event is not discarded (on #login-trigger). You can either pass the event as a variable to the triggered function and call e.preventDefault(); or call return false; at the end of this function.
$(document).ready(function(e){
$('#login-trigger').click(function(e){ //add this
e.preventDefault(); //add this
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
I've got an event listener for click:
circle.on('click', function() { ... });
Can I use a callback to do something after the click event handling has occurred?
I'm not entirely sure what you mean, but you can run arbitrary code inside the click handler, including code that is run after the "normal" event handling is done. You can also trigger other events from that code to allow you to use other callbacks.
Specifically I'm looking to bind lightbox to a specific element. Normally I would just do this: $('a.lightbox').lightBox(); but that isn't working since I'm doing some loading with AJAX. Looking at the jQuery API I found .bind() and .live() but I'm not getting anything when I do $('a.lightbox').bind('lightBox') after the AJAX .load() call.
What am I missing?
You need to add a callback function that handles that.
$("#div").load(url, {}, function(){ $('a.lightbox').lightBox(); });
Bind isn't going to help you, as the event isn't getting an event fired on it.
Another way would be to bind to an element higher up in the dom and check the target type. Such as:
$('#div').bind('click', function (event) {
target = $(event.target);
if (target.hasClass('lightbox')) {
// do stuff here
}
});
Just don't go too far up or you'll be catching way too many clicks.
I have the following javascript:
$('#ge-display').click(function (event) {
window.open('/googleearth/ge-display.php','','scrollbars=yes,menubar=no,height=650,width=1000,resizable=yes,toolbar=yes,location=no,status=no');
event.stopPropagation();
return false;
});
the element with id 'ge-display' is a standard link:
Load Google Earth Plugin (in a new window)
The problem is - when I take out the 'return false;' line from the click event handler, the javascript popup opens, and then another browser window opens - I thought stopPropagation() would prevent the links own click handler?
I've also tried stopImmediatePropagation() - but I still need to return false to stop the default behaviour of the link.
Calling event.stopPropagation() will prevent other Javascript event handlers from handling that event. It will not prevent the browser's default action.
You need to call event.preventDefault().