Here is my plugin code:
<?php
class myplugin{
function __construct(){
//stuff
add_action( 'admin_head', array(&$this, 'fb_add_tinymce') );
}
function fb_add_tinymce() {
global $typenow;
// only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;
add_filter( 'mce_external_plugins', array(&$this,'fb_add_tinymce_plugin' ));
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', array(&$this,'fb_add_tinymce_button' ));
}
// inlcude the js for tinymce
function fb_add_tinymce_plugin( $plugin_array ) {
$plugin_array['fb_test'] = plugins_url( 'lib/js/mce-buttons.js', __FILE__ );
// Print all plugin js path
var_dump( $plugin_array );
return $plugin_array;
}
// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {
array_push( $buttons, 'fb_test_button_key' );
// Print all buttons
//var_dump( $buttons );
return $buttons;
}
}
$plg = new myplugin();
?>
mce-buttons.js file:
(function($) {
console.log(1);
alert('test');
})(jQuery);
The plugin is enabled but when i go to add a new post i cannot see the alert box popping up or the console log outputting the number 1 just to make sure it works.
I simply reinstalled AMPPS and that solved the issue.
You appear to be missing the wp_enqueue_script call.
Related
I'm trying to make some SQL queries using PHP in Wordpress, to auto populate and check values on a gravity form against the existing database.
To do that however, I'm going to need to pass some javascript variables to php, then use that to interact and pull that data back to the form. As someone with minimal web dev background, easier said then done.
My main issue is with an AJAX call that properly carries over a value, but only to the action function. All other calls will show null (I assume due to scoping, but globals don't seem to help).
The main relevant PHP is in a custom plugin as follows:
$address = 0;
function my_enqueue() {
wp_register_script( 'lead-scheduler', null);
wp_enqueue_script( 'lead-scheduler', plugins_url( '/lead_ajax.js', __FILE__ ), array('jquery') );
wp_localize_script( 'lead-scheduler', 'leadajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'jquery' );
wp_register_script( 'lead_ajax', null);
wp_enqueue_script( 'lead_ajax' );
}
add_action( 'init', 'my_enqueue' );
function handle_request(){
//Check post address, then apply to global variable
echo $_POST['address'] . "\n";
global $address;
$address = $_POST['address'];
echo $address . "\n";
wp_die("RIP");
}
add_action( 'wp_ajax_handle_request', 'handle_request' );
add_action( 'wp_ajax_nopriv_handle_request', 'handle_request' );
function functionCaller() {
if (is_page ('')) {
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(function(){
var addressField = document.getElementById('input_22_2');
var temp;
//Set up event listener
addressField.onchange = addressCheck;
function addressCheck(){
//Get foreign script
$.getScript("/wp-content/plugins/lead-scheduler/lead_ajax.js", function(){
//Wait until done to execute console.log
$.when(adrCheck()).done(function(){
console.log("Logging: " + "<?php global $address; echo $address ?>");
});
});
}
});
});
</script>
<?php
}
}
add_action('wp_head', 'functionCaller'); ?>
The AJAX call comes from a JS file that I call to:
//AJAX
function adrCheck(){
jQuery(document).ready( function() {
console.log("called")
var addressField = document.getElementById('input_22_2').value;
jQuery.ajax({
type : "post",
url : leadajax.ajax_url,
data : {action: "handle_request", address: addressField},
success: function(response) {
console.log(response)
},error: function(response){
console.log(response);
}
})
})
}
The call seems to work, as the echo in handle_request() works fine. But calling that variable anywhere else returns null. $.when.done doesn't seem to do much, nor does anything synchronous.
I'm sure there's something super elementary that I'm missing, but I can't seem to find it.
I am trying to remove WordPress posts from front end using AJAX.
My code removes post, but displays blank page with "success", when i want to just fade out this post without page reloading and displaying blank page.
PHP code:
<?php if( current_user_can( 'delete_post' ) ) : ?>
<?php $nonce = wp_create_nonce('my_delete_post_nonce') ?>
delete
<?php endif ?>
Functions.php code:
function my_frontend_script() {
wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/my_script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_frontend_script' );
wp_localize_script( 'js/my_script.js', 'MyAjax2', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'ajaxnonce' => wp_create_nonce('ajax-nonce') ) );
add_action( 'wp_ajax_my_delete_post', 'my_delete_post' );
function my_delete_post(){
$permission = check_ajax_referer( 'my_delete_post_nonce', 'nonce', false );
if( $permission == false ) {
echo 'error';
}
else {
wp_delete_post( $_REQUEST['id'] );
echo 'success';
}
die();
}
my_script.js code:
jQuery( document ).ready( function($) {
$(document).on( 'click', '.delete-post', function() {
var id = $(this).data('id');
var nonce = $(this).data('nonce');
var post = $(this).parents('.post:first');
$.ajax({
type: 'post',
url: MyAjax2.ajaxurl,
data: {
action: 'my_delete_post',
nonce: nonce,
id: id
},
success: function( result ) {
if( result == 'success7' ) {
post.fadeOut( function(){
post.remove();
});
}
}
})
return false;
})
})
The problem is page is reloading to a blank page with "success" text, when it should just fade out and remove post from current page, without reloading.
It looks like my_script.js is not even used at all :(
Any help much appreciated.
delete
it's reloading because it loads first the url in your href attribute, then executing your ajax-call. thats not what you want. you want to execute only the onclick. this should solve the problem. just put a # in your href
delete
or make buttons
<button data-id="<?php the_ID() ?>" data-nonce="<?php echo $nonce ?>" class="delete-post">delete</button>
edit: if it's still not working, it's because you got a typo here
if( result == 'success7' )
success7 instead of success
I'm new to the world of Wordpress and I just started developing my first plugin.
When it's activated it should load one javascript file to wp-admin/post-new.php (Add new post) page.
Here is how I tried to do this:
Plugin
class WP_Blog_Customizer{
function __construct() {
add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') );
register_activation_hook( __FILE__, array( $this, 'wpa_install' ) );
register_deactivation_hook( __FILE__, array( $this, 'wpa_uninstall' ) );
}
public function load_dependencies(){
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
new WP_Blog_Customizer();
wp-admin/post-new.php
if(is_plugin_active( 'blog-customizer/blog-customizer.php' )){
$plugin = new WP_Blog_Customizer();
}
Shouldn't this add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') ); from the __construct of my plugin class include this js file?
Note
This js file is located under the js folder in my plugin's folder, so the path is correct.
Can anyone tell me why this is not working, and how to make it work?
For loading scripts in admin side we have to use admin_enqueue_scripts hook. So something like this should do the job:
class WP_Blog_Customizer{
function __construct() {
add_action( 'admin_enqueue_scripts', array($this, 'load_dependencies') );
//...other constructor things
}
public function load_dependencies( $hook ){
if ( $hook == 'post-new.php' ) { // for loading script also on post edit screen use ( $hook == 'post-new.php' || $hook == 'post.php' )
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
}
new WP_Blog_Customizer();
We are trying to resolve the following output reported on GTmetrix: trying to defer the parsing of javascript in order to decrease the page loading time.
However, unable to succeed in increasing the Grade for "Defer parsing of Javascript" parameter.
We have tried the following steps on this:
Added the below lines of code to functions.php in /wp-content/themes/"theme"(porto) for our site; which doesn't help.
// Custom Scripting to Move JavaScript from the Head to the Footer
function remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
// END Custom Scripting to Move JavaScript
Added the below lines of code to functions.php, but doesn't help.
// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
// return "$url' defer ";
return "$url' defer onload='";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
Tried adding the 'defer="defer"' attribute manually to javascripts in header.php and footer.php, but no change.
Installed "Autoptimize" and "WP Deferred Javascripts" Plugins, but this affects the site's working (the dropdown menus do not appear on hover).
Please let us know if there is a way to resolve this, or if is there anything we are missing. Kindly help.
I was able to resolve this by adding the following lines of code to /wp-includes/functions.php
/* Function for defer parsing of javascripts, for loading the website
faster */
function defer_parsing_of_js ( $url )
{
if ( FALSE === strpos( $url, '.js' ) )
return $url;
if ( strpos( $url, 'jquery.js' ) )
return $url;
if ( strpos( $url, 'wp-custom-countdown' ) )
return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Can somebody help me? I'm feeling so stupid. I took example code from WordPress codex, made a example plugin in my webpage, but there no respond...
PHP code is here:
/**
* Plugin Name: Ada Ajax Test
* Description: WP Codex based ajax example
* Version: 1.0.0
* Author: M. A. Tomas
* Author URI: http://www.matomas.cz
* License: GPL2
*/
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
if( 'index.php' != $hook ) {
// Only applies to dashboard panel
return;
}
wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}
// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$whatever = intval( $_POST['whatever'] );
$whatever += 10;
return $whatever;
wp_die();
}
// shortcode pro zobrazeni na strance
add_shortcode( 'ajax-zkouska', 'my_action_callback' );
and Javascript code in external file is here:
// JavaScript Document
jQuery(document).ready(function($) {
var data = {
'action': 'my_action',
'whatever': ajax_object.we_value // We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_object.ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
});
Where I mistake?
You have a few things mixed up.
Front End
If you are targeting the frontend, then you need to use this hook:
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
This allows you to add the needed scripts to the front end and not the admin side.
Ajax Calls
All ajax calls are executed within the admin context. So you will need to test for it and add the ajax hooks accordingly.
if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action_callback' );
// Add other back-end action hooks here
} else {
// Add non-Ajax front-end action hooks here
}
No Priv
The no_priv hook is meant for users that are not logged in. Add it if that's your intention.