Force check dirtyforms.js - javascript

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])' });

Related

trigger event on acf tab click - how to

I would like it so that when a user clicks on a particular TAB on an ACF form, this triggers a javascript event.
Something like:
$('#acf-field_57f8b36e99fcb').on('click', function() {
alert ("tab clicked");
});
But this doesn't work. (Nor does .focusin, .focusout etc).
Does anyone know if this is possible and how to do it?
When you add any field dynamically you need to bind jquery/Javascript function again with it.

Detect link click event in chat window

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
});

Looking to tag a multi-option form with Google Analytics - need JavaScript guidance

I'm trying to track the different form options for this page: http://www.wibitsports.com/formular . Basically I just want to trigger an event for each specific option (out of the 3).
I'm comfortable with setting up the event tracking, the problem is I can't seem to find the HTML to put it on. I think the form's using AJAX - the URL stays the same when I submit.
Where would I find the form code? Ideally I'd like to add event tracking to each form variation's submit button.
If you need any more info I'll do my best to supply it. Clearly in over my head!
Thanks!
Something like this:
$( document ).ready(function() {
$("input[type=radio]").live("click" , function() {
_gaq.push(['_trackEvent', 'Wibit Form', 'Radio button clicked', $(this).attr("id")]);
});
});
Meaning: As soon as the document is read attach an event to all radio buttons. Since apparently more options are loaded via ajax use a "live" event (on() ) in more recent jQuery versions) so this event handler will apply to newly created radios as well. Track this as an event (change parameters at your gusto) that stores the id of the clicked radio as label.
Obviously I haven't really tested this with your site, but even if there's an error somewhere in the code it should be enough to get you going.

Issue with each click functionality on a submenu link

Ok, very very weird issue here. I have a sub nav menu that links to the same page but passes a GET variable through the URL so the little application knows which service to display. The problem I'm having is that no matter which link in the sub menu is clicked, jQuery is returning attributes from the LAST link in the list. I've even tried binding the events to the outer 'li' elements but the same issue occurs! It also occurs no matter which attribute I'm trying to grab.
It wouldn't be an issue except that I'm trying to prevent the links from reloading the page when all the little application needs to do is grab a string from the clicked item to set up the params to run and load the desired data. I guess the easiest way is for me to just link you to a working copy of the page on the web host:
http://www.dealertec.com/_index.html
I currently have it alert out the href attribute so you can see the problem in action.
Error - Line 203 & 204 of services.1.1.js - event is not defined:
li.bind('click touchstart', function() {
event.preventDefault();
You need to pass the event in the function in order to prevent the default action:
li.bind('click touchstart', function(e) {
e.preventDefault();

In IE the onbeforeunload event is fired for links that don't unload the page

I am writing a plugin to a CMS (umbraco) and I wish to attach a warning dialog to various actions on the page, one such action is clicking a link (JavaScript links), in most browsers the following code works well:
$(".propertypane").delegate("a, a div", "click", function () { window.onbeforeunload = confirmNavigateAway; });
The following is an issue in IE because IE appears to trigger onbeforeunload event when any link is clicked, even though the link is not navigating away.
I've set up an example here:
http://jsfiddle.net/DETTG/8/
Note: I do not have control over the ajax controls within the propertypane, they're written by third parties.
Maybe this page will help you?
If you remove "href" then it will work. But then you would need to style it as a link element and add the attribute onclick if you want to execute a function. Here is the updated version: http://jsfiddle.net/DETTG/34/
<a onclick="alert('do some ajax');" style="color:blue; text-decoration:underline; cursor:pointer">javascript</a>

Categories