I have a SharePoint calendar, and I've got some Javascript code to force a calendar overlay event to open in a modal dialog. Basically, it forces them to open in a modal dialog via this code:
$('.ms-acal-ddiv a').click(function(){
EditLink2(this,'WPQ2');
return false;
});
The problem is that there are already "native" events on the calendar which open with this code, and what is happening is that when you click on it, the events open TWICE with a modal dialog, thus rendering the page unusable.
I'm not savvy with writing jquery or javascript. How can I write the javascript to look for that code that's bolded, and prevent it from running if the link already executes with that?
Thanks for the help in advance.
Try this:
$('.ms-acal-ddiv a').click(function(event){
EditLink2(this,'WPQ2');
event.stopPropagation();
event.stopImmediatePropagation()
return false;
});
Which will prevent the click event from bubbling up.
http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/event.stopImmediatePropagation/
I was having the same problem. The following code seems to have cleared it up for me:
$('.ms-acal-mdiv a, .ms-acal-ddiv a, .ms-acal-sdiv a').click(function(event){
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
EditLink2(this,'WPQ2');
});
I wonder if the return false gets in the way of whatever eventually tells the overlay to disappear.
Related
I want to click on this element.
ini
There are other elements, just like that where only the href changes. I can correctly find the element I want. But cannot click it...
I tried the usual click() but didn't work:
document.getElementsByClassName("btn")[1].click()
Any help?
I tried this, it opens the same window, but I want to open in a new tab. I also put the internet option to open tabs with popups:
b=document.getElementsByClassName("btn")[1].href;
window.location.assign(b, '_blank');
How to open in new tab? I tried window.open() but never got to make it work:
window.open(b, '_blank');
You can find the answer here How can I trigger a JavaScript event click. If you execute the .click() function, you trigger all the listener that are bind on the 'click' ( .onClick ).
Try to listen for the click event and then execute the .click() function
I'm not really sure i understand the question all the way. But when you actually click a link all other JavaScripts stops loading and you get to that webpage. The window.open is right. But you have to prevent the Url to actually redirect you to the website. You can do this by using preventDefault on the eventobject that fires on your click. Hope this helps
let myLink = document.getElementsByClassName("btn")[1];
myLink.addEventListener('click', function newWindow(event) {
event.preventDefault();
window.open(this.href, '_blank')
})
myLink.click();
I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});
I'm trying to check for dirty form when swithing between tabs - and if the form is dirty, show the alert.
I'm using this plugin: https://github.com/snikch/jquery.dirtyforms
Ii works fine when trying to go to an external page (here i will get the warning), but when i switch between tabs(bootstrap), nothing happens. I have made a speciale class(".chkChange") to listen to if the form is dirty, but nothing happens when I click on a tab. The tabs looks like this:
<li class="setup-conditions"><a data-toggle="tab" class="chkChange" href="#setup-conditions">Procedure</a></li>
And i'm able to check if the form is dirt or not with this snippet, but i need help to trigger the alert build in dirtyforms:
$('#myTab li a').click(function () {
if ($('form').dirtyForms('isDirty')) {
//alert("Form is dirty");
}
});
And like i said, if I put the same class on another (external) link, it will prompt if anything has been changed - bot not on the tabs.
In this case, you can customize the event binding to attach the click handler to your link.
$(document).bind('bind.dirtyforms', function (ev, events) {
var originalBind = events.bind;
events.bind = function (e) {
$('#myTab li a').on('click', events.onAnchorClick);
originalBind(e);
};
});
Dirty Forms will then correctly
Check whether the form is dirty
If dirty, prevent the click event
Show the dialog
If the user decides to proceed, will refire the click event
Dirty Forms ignores your anchor tag by automatically because it has no HREF tag. This was a feature that was contributed by the community, that I am now reconsidering because apparently there is an argument to monitor anchor tags that don't have HREF sometimes.
Update
The default behavior has changed in 2.0.0-beta00005 to include links with no HREF tag by default. That should fix this so you don't need to attach the event. However, depending on what libraries you are using, you may need to add an ignoreSelector to Dirty Forms to stop watching them.
$('form').dirtyForms({ ignoreSelector: 'a.some-class:not([href])' });
As an exercise, I'm trying to add an event listener to an ebay.com element.
Expected result: show an alert and stop the web page from going to the next URL.
What happens: the alert is shown but the next URL is shown anyway.
I found something interesting on the product pages where I'm testing out preventDefault, stopPropagtion and stopImmediatePropagation.
No matter which combinations I use, nothing seem to work.
The basic code is:
$('#binBtn_btn').click(function(evt){
alert('hi');
evt.stopPropagation(); //or any other option.
});
The thing is that I get the alert, but it still goes to the next page, as if I never stopped the propagation.
I read a lot of articles about event handling, but I couldn't find the answer.
Your help is much appreciated.
My best guess it that the Button has its own click handler, and it's firing before yours.
$('#binBtn_btn').data("events") shows us that there is indeed a click event. Remove that using off.
$('#binBtn_btn').off('click');
Clicking the button now will still cause the form the submit, as all we're doing is browsing to a page. The button is actually just an a tag.
$('#binBtn_btn').click(function(e){
alert('Gotcha!');
e.preventDefault();
});
Let's see what happens if we remove their handler, add ours, and then re-add their one...
var existing = $('#binBtn_btn').data('events').click[0];
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; });
$('#binBtn_btn').data('events').click.push(existing);
Same, but just looking at the function for the click handler (rather than tweaking the events.click array directly...)
var existing = $('#binBtn_btn').data('events').click[0].handler;
$('#binBtn_btn').off('click');
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); });
$('#binBtn_btn').click(existing);
As expected, what is now the second handler -- their handler -- doesn't first. (I've added a return false; rather than e.preventDefault();, just to demonstrate different ways of doing things!)
You can check out what they're doing by placing a breakpoint and viewing the existing var above. You'll see that at the end of their function, they do indeed call e.preventDefault();.
Hope this helps.
try using evt.preventDefault() like this:
$('#binBtn_btn').click(function(evt){
evt.preventDefault();
alert('hi');
});
Then it will not go to the next page.
So theres this Bootstrap3 accordion with consecutive panels. Each one has a button that closes it and opens the next one: the next step, if you will.
However, if (certain conditions not met) the next panel should not open. Other things should also not happen, but they are sort of under control. The point is the next step panel opens if (conditions not met) and I want to prevent that.
I added the following to the event listener, to no avail. What to do to correctly prevent the next panel from opening?
$('#my-panel').on('hidden.bs.collapse', function (aTicketPanelCollapsedEvent) {
aTicketPanelCollapsedEvent.preventDefault();
// I expected this to work but unfortunately it doesn't
});
I would try to use either show.bs.collapse or hide.bs.collapse. You're using hidden.bs.collapse which is called after the event has already happened.
I believe preventDefault() only prevents the browser from performing its default action in response to an event. Since the event 'hidden.bs.collapse' is not a browser event, preventDefault() does nothing.
I think you need to handle 'hide.bs.collapse' instead. The problem with using 'hidden' is that is that the collapse has already occurred.
$('#my-panel').on('hide.bs.collapse', function (e) {
e.preventDefault();
});
Demo: http://bootply.com/78023