The following lines of code document what I'm trying to acchieve. In detail, I'm trying to attach an addListener to a DOM object. Sadly it seems that I can't access it.
var dom_obj = document.getElementById( 'dom_obj_id' );
console.log( typeof dom_obj ); // console: object
google.maps.event.addListener( dom_obj, 'click', function() {
// the following two lines don't appear
alert( 'Test - called from addListener' );
console.log( dom_obj );
} );
jQuery( zoom_in ).click(
function() {
// works
alert( 'Test - called via jQuery click function' );
console.log( dom_obj );
return false;
}
);
Searched for hours and found the solution seconds after typing the Q...
Simple as it is: Use addDomListener instead.
Related
How to close a popup after a few seconds at the click of a spacial button ?
I have written it in the comments, by I will answer as well.
Elementor Pro has JS functions for the popups. So you can call it like this
elementorProFrontend.modules.popup.closePopup( { id: yourPopupIdHere } );
All together :
jQuery( document ).ready( function( $ ) {
$( document ).on( 'click', '.close-popup', function( event ) {
setTimeout(function() {
elementorProFrontend.modules.popup.closePopup( {id: yourPopupIdHere}, event )} );
}, 4000);
});
} );
Might have gotten som syntax wrong, but it should give you an idea
One possibility is to time delay close see:
jQuery( document ).ready( function( $ ) {
setTimeout(
function(){
document.querySelector('.dialog-close-button').click();
}, 4000);
});
Possible repost of Close Elementor Popup with JavaScript
I have the following code that triggers whenever the cart is updated.
The problem is that the jQuery version works as expected but the Vanilla JS doesn't.
jQuery( document.body ).on('updated_cart_totals', function( event ) {
console.log( 'in here' ); // Works.
} );
document.body.addEventListener( 'updated_cart_totals', function( event ) {
console.log( 'in here too' ); // Doesn't work.
} );
Is there something I am missing?
It appears to be answered before
https://stackoverflow.com/a/41727891/5454218
jQuery uses its own system of event/data binding which inter-operates only one way. In WooCommerce context it's an essential part of its system, so don't shy away from it. No shame in using jQuery when you're already deep in this pile of s**t.
My Answer would be, Yes it's now possible to detect by addAction() and doAction() using Vanilla JS -
wp.hooks.addAction().
wp.hooks.doAction()
How to do - My Approach
// Trigger any jQuery event
$document.trigger( 'test-trigger', [data] );
// Fire action
wp.hooks.doAction( 'test.trigger', data );
// Catch this event from anywhere in JS
wp.hooks.addAction( 'test.trigger', 'cp/test-trigger', function(data) {
console.log('JS Response data', data);
} , 10);
Reference Example of WordPress Core
For reference, Let's see a WordPress heartbeat js's doAction() - https://github.com/WordPress/wordpress-develop/blob/trunk/src/js/_enqueues/wp/heartbeat.js#L460
// heartbeat.js#L460
$document.trigger( 'heartbeat-tick', [response, textStatus, jqXHR] );
wp.hooks.doAction( 'heartbeat.tick', response, textStatus, jqXHR );
// Catch that heartbeat tick from anywhere in JS
wp.hooks.addAction( 'heartbeat.tick', 'cp/heartbeat-tick', function(response, textStatus, jqXHR) {
console.log('heartbeat response', response);
} , 10, 3);
This should be very simple but it just does not work and I have no clue why.
Can somebody please explain to me what the problem is?
I have tried my code and the documentation example and nothing works at all.
Link to docs: Contact Form 7 Dom Events
My code:
$('.hollow-form-01 form.wpcf7-form').on('wpcf7submit', function() {
alert('submitted');
});
Documentation Example:
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
alert( "Fire!" );
}, false );
In a plugin, we're using a button & text input to trigger the wpLink modal. All works well, until we hit a template that removes the main content editor and relies only on metaboxes for the page content.
The error we're getting is this.textarea is undefined. The code we're using is:
$( 'body' ).on( 'click', '.pluginxyz-add-link', function( event ) {
wpActiveEditor = true;
wpLink.open();
return false;
});
So I assume there is some dependency to the main editor. I can't find explicit info/documentation around this.. anyone have a suggestion about making this work without the main editor?
Actually, I just figured this out. In our code, the ONLY sibling text input is always where the value will go.
$( 'body' ).on( 'click', '.pluginxyz-add-link', function( event ) {
clickedEle = $( this );
textBoxID = $( clickedEle ).siblings( 'input[type=text]' ).attr( 'id' );
wpActiveEditor = true;
wpLink.open( textBoxID);
return false;
});
I have created an Editor button using TinyMCE plugin. The button is displaying fine in Editor toolbar. But when I click on it to place the value I am getting the following console error. How can I fix this please?
WordPress version: 4.7.5
Uncaught TypeError: Cannot read property 'paste' of undefined
at d (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:9994)
at Object.f [as insertAtCaret] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10103)
at mceInsertContent (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:14254)
at Object.m [as execCommand] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10568)
at L.execCommand (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:4493)
at L.<anonymous> (http://vagrant.local/content/themes/vip/yrc-wordpress-theme/plugins/mce-live-chat-button/mce-live-chat-button-plugin.js?wp-mce-4506-20170408:20:20)
at D.exec.(anonymous function) (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:11468)
at Object.m [as execCommand] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10568)
at L.execCommand (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:4493)
at t.cmd.t.onclick (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:3626)
This is my shortcode:
<?php
add_shortcode('live-chat-button', 'live_chat_editor_button_html');
function live_chat_editor_button_html() {
$button_html = 'I have been placed...';
return $button_html;
}
This is the JS file:
(function() {
tinymce.create('tinymce.plugins.LiveChatEditorButton', {
init : function(ed, url) {
ed.addButton('livechat', {
text: 'Live Chat',
//icon: 'dashicons dashicons-admin-links',
tooltip: 'Live Chat',
cmd: 'livechat',
});
ed.addCommand('livechat', function(){
ed.execCommand('mceInsertContent', '[live-chat-button]');
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : 'Live chat editor button',
version : "0.1"
};
}
});
// Register plugin
tinymce.PluginManager.add( 'yrceditorbutton', tinymce.plugins.LiveChatEditorButton );
})();
And here is the code I am using in my functions.php file:
add_action( 'init', 'yrc_live_chat_editor_button' );
function yrc_live_chat_editor_button() {
add_filter( "mce_external_plugins", "yrc_add_button" );
add_filter( 'mce_buttons', 'yrc_register_button' );
}
function yrc_add_button( $plugin_array ) {
$plugin_array['yrceditorbutton'] = get_template_directory_uri() . '/plugins/mce-live-chat-button/mce-live-chat-button-plugin.js';
return $plugin_array;
}
function yrc_register_button( $buttons ) {
array_push( $buttons, 'livechat' );
return $buttons;
}
I have one more request. I want to display a dashicon with my button but it comes up as an empty rectangle. What additional thing I need to do so that the dashicon appears?
I am building Editor Button for the first time. So please consider my beginner's knowledge.
Use
ed.insertContent('[live-chat-button]');
instead of
ed.execCommand('mceInsertContent', '[live-chat-button]');
Please see this https://wordpress.stackexchange.com/a/241565/57944