SELF SOLVED:
Simply needed to add document ready function to my script.
Originally I was using the same code but within my theme using:
add_action('wp_footer', function () {
wp_enqueue_script('modal', get_stylesheet_directory_uri() . '/modal.js', array(), '1.0', false);
});
and everything worked fine.
This morning I decided to move the script into my plugin and now the button does nothing.
I am getting nothing in console to help me debug this.
The script is registered and enqueued in the plugin:
wp_register_script( 'modal_script', plugin_dir_url( __FILE__ ) . 'js/modal.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'modal_script' );
The button and classes:
<button onclick="anotherFunction()" class="trigger">Request Stamp</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">x</span>
The modal.js:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
Nothing in console after button click to help me debug, network shows the script is loaded from the new plugin location.
Any ideas?
Just added:
jQuery(document).ready(function(){
to my js and everything works.
Related
From the Complianz site - the instructions were to modify the following code in a text editor and save it - changing line 11 to the desired m/s.
Copy and pasted code below from Complianz site.
`
<?php
function cmplz_delay_banner() {
ob_start(); ?>
<script>
document.addEventListener("cmplz_before_cookiebanner", function() {
document.querySelector('#cmplz-cookiebanner-container').classList.add('cmplz-hidden');
});
document.addEventListener("cmplz_cookie_warning_loaded", function() {
setTimeout(function(){
document.querySelector('#cmplz-cookiebanner-container').classList.remove('cmplz-hidden');
}, 3000);
});
</script>
<?php
$script = ob_get_clean();
$script = str_replace(array('<script>', '</script>'), '', $script);
wp_add_inline_script( 'cmplz-cookiebanner', $script);
}
add_action( 'wp_enqueue_scripts', 'cmplz_delay_banner', PHP_INT_MAX );
`
I've done that and the next steps for configuration are to " Save this as a .php file in the folder /wp-content/mu-plugins/ on your website"
Where would I go to do that from the dashboard?
Thanks in advance!
I've read this post of Must-use plugins but still unsure of where to navigate on the dashboard to get to wp-content/
I have a simple script that appends a class on scroll depth and would like to use it on my Wordpress site.
How should I go about adding it? I have the class pinpointed and know the CSS side, but I don't know how to get the script to register.
The script is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
In your (child) theme's functions.php, add the following lines at the end:
function my_enqueue_script()
{
wp_enqueue_script( 'my_custom_script', get_template_directory_uri() .
'/js/my_custom_script.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
with your script inside the theme's subfolder '/js/my_custom_script.js'. Rename my_custom_script.js to anything you like.
I have created a custom template with plugin that allows user (Role: Customer) to upload pictures from front end but when I try to upload a picture it says "You don't have permission to attach files to this post."
I can upload pictures through /wp-admin > Media - Add New but not from the front end.
Here is my code;
`function CA_enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
'some-script', get_template_directory_uri() .
'/custom/assets/js/edit_profile.js', array('jquery'), '2017-09-27'
);
}
/**
* This filter insures users only see their own media
*/
function CA_filter_media($query) {
// admins get to see everything
if (!current_user_can('manage_options'))
$query['author'] = get_current_user_id();
return $query;
}
add_action('wp_enqueue_scripts', 'CA_enqueue_scripts');
add_filter('ajax_query_attachments_args', 'CA_filter_media');`
JS:
(function($) {
$(document).ready( function() {
var file_frame;
$( '#upload_image' ).on( 'click', function( event ) {
event.preventDefault();
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media({
title: $( this ).data( 'uploader_title' ),
button: {
text: $( this ).data( 'uploader_button_text' ),
},
multiple: false // set this to true for multiple file selection
});
file_frame.on( 'select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
console.log(attachment);
});
file_frame.open();
});
});
})(jQuery);
I have set granted 'upload, edit post' permissions to role using using User Role Editor plugin.
Thanks!
I resolved this issues installing https://wordpress.org/plugins/user-role-editor/,
then I realized that my CPT, the one that I created to be modified by this Role(Customer) was with capabilities of page. I modified on the plugin option..
Hope that helps you.
i have a website that is running the Master Slider Pro wordpress plugin and the iLightBox plugin. I am running a custom script in a custom.js file in wordpress child theme:
/* Link JavaScript file */
function custom_scripts() {
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery') , false, true );
wp_enqueue_script( 'custom-script' );
}
I am calling the custom file as per the below in my functions.php file:
jQuery(document).ready(function(){
(function(){
var groupsArr = [];
jQuery('[rel^="ilightbox["]').each(function () {
var group = this.getAttribute("rel");
jQuery.inArray(group, groupsArr) === -1 && groupsArr.push(group);
});
jQuery.each(groupsArr, function (i, groupName) {
jQuery('[rel="' + groupName + '"]').iLightBox({ /* options */ });
});
})();
});
The issue i am having is that sometimes it loads the custom script (i assume in the correct order) and my slider loads and the lightbox displays when i click the image... other times the slider gets stuck in a loading state and shows the errors:
Uncaught TypeError: jQuery(...).iLightBox is not a function
I believe i am loading the custom.js file after the jQuery file has loaded... what i am assuming is, that the lighbox plugin is sometimes loading after the jQuery and therefore loading after custom.js file which is why it cannot find the ilightbox function ?
Anyway i can prevent this ?
I have been doing some reading and spoke to my theme author (who has integrated the ilightbox function).
My code now looks like the below:
/* register script that defines ilightbox (in parent theme) */
wp_register_script( 'ilightbox_script', get_stylesheet_directory . '/includes/class-avada-scripts.php' );
/* Link JavaScript file */
function custom_scripts() {
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery', 'ilightbox_script') , false, true );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );
I believe i have now registered the script that contains the ilightbox function (stored in my parent theme). I then called the custom.js file after jQuery and the registered script has loaded. However it still is not working. I also get the following error from the file i am now trying to register:
Uncaught SyntaxError: Unexpected token <
Maybe i have misunderstood everything, so i have copied what the theme author has said to me when i asked which fine defines the ilightbox function.. what do you think?
These scripts are enqueued in class-avada-scripts.php available in
following directory
/wp-content/themes/avada/includes
and all JS code is in main.min.js available in following directory
/wp-content/themes/avada/assets/js
However if you enable developer mode from
Wp admin -> appearance -> theme options -> advanced
then you can modify code in avada-lightbox.js and lightbox.js
available in same directory.
UPDATE (22/11/2015):
Latest update has me using:
/* Ensure jquery loads before iLightBox */
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'ilightbox_script', get_theme_root_uri() . '/Avada/includes/class-avada-scripts.php', array( 'jquery' ) );
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js' );
wp_enqueue_script('ilightbox_script');
wp_enqueue_script('custom-script');
}
Still same error :(
When custom php function is called, need to register and enqueue script from within that called function. Then the whole thing gets added to wp_footer hook.
the echoed div in code below shows up in the developer tool, but the script is not showing or even giving any errors, i.e.- if this were an issue with the file path, then there would be resource error, yes? Any comments as to why there wouldn't be an error in loading the script?
The code:
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugin_url('../time.js', __FILE__));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', py_enqueue_script);
} // end show add_time
add_action("wp_footer",add_time);
} // end if
Try this (spotted some syntax errors):
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugins_url('../time.js', __FILE__), false, null, false));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', 'py_enqueue_script');
} // end show add_time
add_action('wp_footer', 'add_time');
} // end if
Brackets on add_action custom action (i.E. 'add_time' instead of add_time).
Plugins URL Function goes plugins_url not plugin_url
Some very good additional article on enqueueing scripts: http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/
Some additional info on plugins_url:
http://codex.wordpress.org/Function_Reference/plugins_url