Questions tagged [javascript]
A client side scripting language useful for making interactive web sites. Questions about using JavaScript outside a WordPress context are off-topic but might be asked on Stack Overflow.
2,691
questions
0
votes
1
answer
23
views
Add Imports to Existing WordPress Import Map
How can imports be added to the existing WordPress import map?
Preparing the Module
I have a JavaScript module threeDTest.js which is enqueued using a PHP short-code (set to run everywhere):
...
- 11
0
votes
2
answers
22
views
How to auto rename JS files to prevent browser cache issues
Im creating a block plugin in worpress and each time I update my JS files, changes do not reflect to frontend because there's a browser cache.
I found some strategies in others frameworks that rename ...
0
votes
0
answers
20
views
Why does website not scroll to top of container when phone is rotated?
I'm using Elementor. I have a container that has a price list in it which looks terrible on mobile portrait. I used the responsive setting to hide that container on mobile portrait. Then I added a ...
- 1
0
votes
1
answer
18
views
Function to filter numbers from string
I'm looking to filter numbers from a string, and make them bigger in one case, and hide them in the other. The best way, as I understood, would be to use a custom function via functions.php and ...
- 1
0
votes
0
answers
9
views
How to display all submenu items as a breadcrumb
I'm trying to display all submenus of the active page as a breadcrumb navigation on a section of the page. How could I go about this?
For example;
Home
Program
P1
P2
P3
About
When I navigate to the ...
0
votes
2
answers
60
views
Elementor Form : client side javascript validation
I already did server side data validation using the hook 'elementor_pro/forms/validation' and it's working fine.
Now in addition, I would like to do client side data validation before submitting the ...
- 1
0
votes
1
answer
21
views
How to use useSelect to retrieve the currently default fontFamily?
I'm trying to identify where I could find this information but I've not been able til the present moment, to achieve it.
I've been looking in core/block-editor and core/editor. I've been researching ...
- 141
2
votes
0
answers
51
views
How to Use Webpack with WordPress Script Modules and Enqueue a Custom Class
I am working on a WordPress project using version 6.5, which introduced support for JavaScript modules. I have a parent theme that exports a JavaScript class, and I want to import this class in a ...
1
vote
0
answers
26
views
Extend WordPress Gutenberg core/navigation-link
Hey folks So Im pretty new to this react + php in wordpress and I found one article where it showed how to extend a core block, which works fine for group and some basic block but When i tried to ...
1
vote
1
answer
178
views
Add custom data attribute to every core Gutenberg Blocks
I'm adding two custom attributes to core Gutenberg blocks, data-delay and data-duration.
I want to add these attributes to manage animations blocks on my custom theme.
I wrote this JS code into block-...
- 33
1
vote
0
answers
33
views
Block style variations not enqueued for blocks inside HTML code dynamically rendered via JS
The new WP 6.6 will let anyone style any registered block style variations in theme.json via the styles.blocks.blockName.variations property. Check the following post for more info:
https://developer....
- 1,950
0
votes
0
answers
25
views
How do I expose the current logged in users name/etc to javascript?
Currently using a Javascript API for he first time to our woocommerce site. We have installed a chat (Social Intents) which provided us with a code to collect data from the person chatting with us. ...
- 1
0
votes
0
answers
20
views
Smooth Scrolling Animation of Image Between Two Containers (Elementor) Using JavaScript and GSAP
I am trying to achieve a smooth scrolling animation in Elementor where a Cola can image moves from one container to another container as the user scrolls down or up the page.
please see attached.
I am ...
- 1
0
votes
0
answers
9
views
Event when Modal is opened/visible
In my WordPress plugin, a Modal gets opened from within the Block Editor when a button is clicked.
const MyContent = () => {
const [isOpen, setOpen] = useState(false);
const openModal = () =...
- 153
0
votes
1
answer
66
views
how to escape alert/window.location.replace with variable
I'm trying to write my first WordPress plugin and despite reading the documentation about escaping and reviewing other people's questions and answers I'm still not clear on how to do it in 2 cases the ...
- 3
0
votes
1
answer
57
views
Is there a way to pull remotely generated XML, process it, and display it on a Managed WordPress page?
Note: This is cross-posted on stackoverflow.
I need to get some XSQL generated XML data from a remote server, process it, and display it on a GoDaddy Managed WordPress page. (This is the website my ...
0
votes
0
answers
28
views
Is there an existing method to store a large set of states (900+ flags/numbers) for a single form page that it can persist for several days?
I just need a pointer or two in the right direction. I made a WP page with a large set of checkbox items to mark a set of tasks as completed, with the intent to also implement counters for a few other ...
- 1
0
votes
0
answers
37
views
I got this error POST https://localhost/meraboilerwp/[object%20Object] 404 (Not Found)
//this is my functions.php
// Enqueue Styles
function meraboiler_enqueue_styles() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Patua+One&family=Open+Sans:wght@...
0
votes
1
answer
36
views
Loading specific ajax from a product
I'm new to wordpress, and I need some way to define a property in a new product that will then have it load specific javascript code related to that specific type of product. I may need to load a ...
- 11
1
vote
1
answer
105
views
How to transform a shortcode into a block
I've built the following Gutenberg block. It's a carousel of images:
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
G,
Path,
SVG,
ToolbarGroup,
...
- 1,950
0
votes
0
answers
51
views
Start a long running PHP process via JS/Ajax and monitor progress on admin page
I am developing a plugin, which can import layouts for a certain theme from a remote URL. Those layouts often contain a good amount of images and sometimes even videos. I have a admin page where the ...
- 101
0
votes
0
answers
29
views
How to get selected variation from URL?
I create my own way of displaying the list of available variants on the product page.
I display individual variants on the main page of the store so that when the customer goes to the product page, he ...
- 31
0
votes
1
answer
85
views
Calling a function via a shortcode in javascript
I'm looking to dynamically change the page-comments option based on whether the user clicks a URL.
I have two functions to do this:
function psb_comment_listener_func(){
echo "
<...
- 5
0
votes
1
answer
22
views
How to apply a javascript code on certain parts of elementor made pages?
For example I have a simple animation which decreases the menu height and font-size while scrolling.
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", ...
- 135
0
votes
1
answer
58
views
Escaping inline JS correctly
function test_dashboard_content() {
$args = array( 'posts_per_page' => -1, 'post_type' => array( 'post', 'page' ), 'post_status' => 'publish', 'date_query' => array( 'after' => '1 ...
- 23
0
votes
1
answer
22
views
How can I access custom data fetched from posts in a javascript script?
I am trying to fetch the lat, long data from custom fields in my posts in order to make a map layer with them (openlayers).
I added custom long and lat fields to each post
I created a function to ...
- 101
1
vote
1
answer
110
views
Wordpress Gutenberg Custom Block the viewScript does not get loaded on the frontend when my block is inserted
I recently developed a custom Gutenberg block by utilizing the @wordpress/create-block package, which effectively generated a full plugin framework. I simply needed to tweak some existing files to get ...
- 131
1
vote
0
answers
109
views
Custom gutenberg block refuses to load viewScript and I don't know why
I've been struggling with this for hours. I used the @wordpress/create-block package to generate a template for me to create my first block. I've managed to create a hero block with an image uploader ...
3
votes
1
answer
151
views
How to add group-row to InnerBlock template?
We are trying to add a group-row to our InnerBlock template.
Now there is a core block called core/group which works when being inserted. The core/group has variations as group-row. But when inserted ...
- 33
0
votes
0
answers
34
views
add_attachment hook not firing on certain devices
I am developing a plugin for a client, and we are using the add_attachment hook to extract metadata from the images that we process as part of the plugin.
The funny thing is that the hook successfully ...
- 287
0
votes
0
answers
17
views
Retrive the value of the Active variation of the product and then link it to the "read more" to dynamically change
Here is the code snippet where Only the tab-description is attached to the "Read-more". How to make it dynamically change based on the current active value of the Variation - material ...
- 1
1
vote
1
answer
57
views
Can't make an external api call in php side of wordpress child theme
Edited 07-14-24 to show permission callback in api
Edit 2: showed my fatal error
I'm new to making api calls in wordpress. I need to make an api call through the backend to a 3rd party api. I can't do ...
- 41
0
votes
0
answers
37
views
Why is my JS not working on initial load?
I'm having weird issues with one of my JS Files that I added via a child theme. I have enqueued it in the functions.php and added some vars with wp_localize_script.
wp_enqueue_script('header-astra', ...
0
votes
0
answers
29
views
Additional CSS classes not being added in Gutenberg editor
When we add additional classes to our custom block they are not being added in the editor. When we save the block and view the front-end the additional classes are showing. But in the editor they won'...
- 33
0
votes
0
answers
44
views
Sudden ERR_HTTP2_PROTOCOL_ERROR on every JS and CSS files loads
I recently went on my website which is online since more than 5 years now and realized that none of the CSS and JS files were loading. By looking into the console, I’ve seen that every load fails ...
- 11
0
votes
0
answers
24
views
allow multi carousel in same page
I have this code for slider, i need help to edit it to allow multiple slider in same page.
var all_divs = $('.px-carousel-container .px-carousel-item').length;
var i = 0,
n = 0;
let ...
- 13
0
votes
2
answers
733
views
window.location.href doesnt' work to redirect page
I am trying to add a custom HTML block to the page with the below code.
I created a Drop-down List and a search button for redirecting pages.
But it seems like that window.location.href doesn't work ...
- 1
1
vote
0
answers
78
views
slider i want move 4 images every button click
I have this code for slider button, i want move 4 images every button click. and make the button not active when all images slides if right or left. (sorry if my English not good)
$(document).on('...
- 13
1
vote
0
answers
13
views
can not serialize and insert data from custom form
I have a custom form . My form have three input fields book_name, chapter_title and chapter_content. chapter_title and chapter_content are dynamic form fields. I want to insert book_name as post_title ...
0
votes
0
answers
11
views
How can i force replace a external js scripts language on the site itself?
Im using this https://www.gloriafood.com/ service and their translation is very poor. I would like to make adjustments myself. since it comes from an external source i cant really edit any spesific ...
- 1
0
votes
1
answer
40
views
Why does my JavaScript work in the browser console but does not work in my shortcode?
I am trying to create a shortcode the user can just insert which creates a button that loops through an array and displays it or hides it. On page load I want every item with an index >= 1 to have ...
- 1
1
vote
1
answer
37
views
Metabox conditionals depending on post format and template in Gutenberg
In the classic editor, I used jQuery to display metaboxes depending on the current post-format or page template selected. If a user selected a different format or template, they would toggle depending ...
- 611
0
votes
1
answer
87
views
How do I filter/modify the updated content on save using javascript?
I want to use js to filter content being saved in the Gutenberg editor for pages. So far I have this, which will get the content on save, but let's say I want to append xxxxxx to the end of the ...
- 21
1
vote
1
answer
265
views
Update a server-side render Block when woocommerce cart block changed
I am currently developing a small block for WordPress/WooCommerce and now I have a problem that I can't solve easily.
To summarize:
I am looking for a way to update my block in the frontend when ...
- 13
0
votes
1
answer
169
views
How to detect changes in WooCommerce store (react)?
Since WooCommerce merged blocks in the plugin, the cart is now completely 'reactified'. Meaning I update the quantity on my cart, I see a network call to an endpoint, thigs update without reloading, ...
- 1,960
0
votes
0
answers
40
views
Passing total post count to javascript
I have a ajax post loading program, I can load more post on click of a button.
Problem im having is getting the button to hide or show less when no more post.
I can query out the post count in PHP as ...
- 29
0
votes
1
answer
17
views
get total post in category via ajx
Aim
The total to be equal to the amount of post within the selected category or sub category.
What im getting
I am getting 0 when trying to get the number of post available in a category.
My aim is to ...
- 29
2
votes
0
answers
55
views
Can't find elemnts on the DOM using Custom Control in Customizer API
I'am creating a Custom Control on Customizer API, I add Multiple Checkbox as my custom type.
When I wanna add a live preview, the jQuery doesn't find the selector that I want.
Here's functions.php ...
- 21
1
vote
2
answers
280
views
How to re-render Gutenberg component when object instance is available
I'm working on a Gutenberg component that displays a grid of images using the core Masonry library (some code omitted for brevity):
const containerMasonryRef = useRefEffect((element) => {
var ...
- 1,950
1
vote
0
answers
16
views
WP Bootstrap NavWaker: Dropdown Menu Opens All Dropdown Menus at Once
I'm having difficulty implementing a dropdown menu with Bootstrap and WordPress. I've used filters to add the 'dropdown-toggle-split' class to the link elements of menu items that have submenus. ...
- 15