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.
Related
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])' });
I'm using the bootstrap editor jquery plugin. I'm trying to set an event listener to the add hyperlink button, but it only gets triggered when the text input next to it is empty, otherwise it does not fire. Here's my jsfiddle. My code:
$('.dropdown-menu button').on('click', function () {
alert("ADD clicked");
});
To test the jsfiddle, simple select some text and press add without inputting a URL.
Then, select the text again, input a URL and press add, no alert() will be shown.
Any ideas why this is happening?
Something in this line is changing the behaviour for a reason I can't see right now:
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
If you remove it, seems work, so, something in dropdown (i guess) is doing something wrong for you
I'm trying to display a message that the user has clicked Delete button when he/she clicks on it. This is what I'm doing:
<script>
$('#button_del').on('click',function(e){
alertify.error('You have clicked on Delete!');
});
</script>
But no message appears when I click on the button. What am I doing wrong?
There are only four possibilities here:
You don't load your libraries correctly: jQuery and alertify.
There is no element with the button_del ID, or there are markup errors involving it.
You're not actually clicking #button_del.
4. the most likely one:
You need to attach the click handler when the document is loaded, otherwise #button_del is probably not available/loaded yet!
$(document).ready(function() {
$('#button_del').on('click',function(e){
alertify.error('You have clicked on Delete!');
});
});
Even if the first three conditions are met, you'd still have to change this.
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.
Let's say I have a greasemonkey-type user script running on a page that has a div such as:
<div id="watchme">something</div>
Is it possible to detect if a user clicks on that div from within the user script? The logical way would be to have an onClick() written into the code, but since this is a user script I don't control the code.
Did you try attaching an event listener?
document.getElementById("watchme").addEventListener("click", yourHandler, false);
Note that assigning the onclick method may not work: see this.
document.getElementById("watchme").onclick = function(){
alert("I've been clicked");
}
That's how you assign the onclick event in js.