How to add wp_editor in custom widget - javascript

I an trying to create a image widget with wp editor. I see the editor but i cant the text like make it bold or bigger nither i see the tab switch from visual to text. Following is my code:
Thanks in advance.
<input type="hidden" id="<?php echo esc_attr($this->get_field_id('description')); ?>" name="<?php echo esc_attr($this->get_field_name('description')); ?>" value="<?php echo esc_attr($instance['description']); ?>" />
<?php
$edi_name = esc_attr($this->get_field_name('description'));
$content = $instance['description'];
$editor_id_new = esc_attr($this->get_field_id('description'));
$settings = array( 'media_buttons' => false,
'textarea_rows' => 6,
'textarea_name' => $edi_name,
'teeny' => false,
'menubar' => false,
'default_editor' => 'tinymce',
'quicktags' => false
);
wp_editor( $content, $editor_id_new, $settings );
?>
<script>
(function($){
tinyMCE.execCommand('mceAddEditor', false, '<?php echo $this->get_field_id('description'); ?>');
})(jQuery);
</script>

Short answer: Because there is a hidden widget where the TinyMCE appears first.
Long answer (sorry, a very long answer):
Go to the Codex and copy the example widget Foo_Widget to make sure we are talking about the same code. Now open your IDE (not an editor) and write a short testing widget as plugin. Starting with a minimal plugin header...
<?php
/*
Plugin Name: Widget Test Plugin
Description: Testing plugincode
*/
... adding the widget code from the codex and registering the widget with the add_action() call. Now modify the form method within the widget class as shown here:
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'text_domain' );
}
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
/*** add this code ***/
$content = 'Hello World!';
$editor_id = 'widget_editor';
$settings = array(
'media_buttons' => false,
'textarea_rows' => 3,
'teeny' => true,
);
wp_editor( $content, $editor_id, $settings );
/*** end editing ***/
}
Go to your blog, activate the plugin, go to the widget page and drag the Foo Widget into a sidebar. You will see it will fail.
Do you see the Foo Widget description on the left side? Do a right click on the description and choose 'Inspect' from your developer tools (you have some developer tools like FireBug or Chrome DevTools, huh? In FireFox you can also choose the build in 'Inspect Element'). Browse through the HTML code and you will see there is an editor wrap inside the 'hidden' widget.
You can see one editor in the sidebar on the right and there is an editor in the 'hidden' widget on the left. This cannot work properly because TinyMCE don't know which editor should be used.
What do we need?
We need a unique ID for our editor.
/*** add this code ***/
$rand = rand( 0, 999 );
$ed_id = $this->get_field_id( 'wp_editor_' . $rand );
$ed_name = $this->get_field_name( 'wp_editor_' . $rand );
$content = 'Hello World!';
$editor_id = $ed_id;
$settings = array(
'media_buttons' => false,
'textarea_rows' => 3,
'textarea_name' => $ed_name,
'teeny' => true,
);
wp_editor( $content, $editor_id, $settings );
/*** end edit ***/
Modify the code within the form method again with the code above. We create a unique number with rand() and append this number to the id and name attributes. But stop, what about saving the values???
Go to the update method and add die(var_dump($new_instance)); in the first line. If you press Save on the widget, the script will die and print out the submitted values. You will see there is a value like wp_editor_528. If you reload the page and save the widget again, the number will be changed to something else because it is a random number.
How will I know which random number was set in the widget? Simply send the random number with the widget data. Add this to the form method
printf(
'<input type="hidden" id="%s" name="%s" value="%d" />',
$this->get_field_id( 'the_random_number' ),
$this->get_field_name( 'the_random_number' ),
$rand
);
In the update routine, we can now access the random number with $new_instance['the_random_number']; and so we can access the editor content with
$rand = (int) $new_instance['the_random_number'];
$editor_content = $new_instance[ 'wp_editor_' . $rand ];
die(var_dump($editor_content));
As you can see, the editor content will be submitted and you can save it or do anything else with it.
Caveat
The editor content is only submitted correctly if the TinyMCE is not in visual mode (WYSIWYG mode). You have to switch to the text mode befor press 'Save'. Otherwise the predefined content (in this case $content = 'Hello World!';) is submitted. I don't now why, but there is a simple workaround for this.
Write a small jQuery script that triggers the click on the 'text' tab before saving the widget content.
JavaScript (saved as widget_script.js somewhere in your theme/plugin folders):
jQuery(document).ready(
function($) {
$( '.widget-control-save' ).click(
function() {
// grab the ID of the save button
var saveID = $( this ).attr( 'id' );
// grab the 'global' ID
var ID = saveID.replace( /-savewidget/, '' );
// create the ID for the random-number-input with global ID and input-ID
var numberID = ID + '-the_random_number';
// grab the value from input field
var randNum = $( '#'+numberID ).val();
// create the ID for the text tab
var textTab = ID + '-wp_editor_' + randNum + '-html';
// trigger a click
$( '#'+textTab ).trigger( 'click' );
}
);
}
);
And enqueue it
function widget_script(){
global $pagenow;
if ( 'widgets.php' === $pagenow )
wp_enqueue_script( 'widget-script', plugins_url( 'widget_script.js', __FILE__ ), array( 'jquery' ), false, true );
}
add_action( 'admin_init', 'widget_script' );
That's it. Easy, isn't it? ;)
Actual Credit Goes To The Author Of Writting This Test Plugin #Ralf912
Reference URL : Why Can't wp_editor Be Used in a Custom Widget?

I made some improvements to this code in case somebody needs it:
on the form function of the widget I updated the code:
$rand = !empty( $instance['the_random_number']) ? $instance['the_random_number'] : rand( 0, 999 );
$ed_id = $this->get_field_id( 'wp_editor_' . $rand );
$ed_name = $this->get_field_name( 'wp_editor_' . $rand );
$content = !empty( $instance['the_random_number']) ? $instance['wp_editor_' . $rand] : 'Content goes here!';
$editor_id = $ed_id;
$settings = array(
'media_buttons' => true,
'textarea_rows' => 3,
'textarea_name' => $ed_name,
'teeny' => true,
);
wp_editor( $content, $editor_id, $settings ); `
And I also reinitialized the editor because it was broken after save
jQuery(document).on('widget-updated', function(e, widget){
if(widget[0].id.includes("cw_pa_text_widget")) { // if it is the right widget
let editor ="widget-" + widget[0].id.substring(widget[0].id.indexOf('_') + 1);
let randNum = editor + "-the_random_number";
let wpEditorId = editor + "-wp_editor_" + document.getElementById(randNum).value;
var settings = {
quicktags: true,
};
wp.editor.initialize(wpEditorId, settings);
//create the ID for the text tab
var textTab = wpEditorId + '-tmce';
// trigger a click
document.getElementById(textTab).click();
}});
Thank you.

Related

Getting AJAX load more to work with custom Wordpress related posts Query?

I"m using the tutorial from this blog post to implement Ajax Load More functionality. https://rudrastyh.com/wordpress/load-more-posts-ajax.html
I've successfully implemented this on my archive page for all blog posts. However, I've got several "RElated Posts" sections that use custom WP Queries that I can't get to work. I've tried the solution in this comment: https://rudrastyh.com/wordpress/load-more-posts-ajax.html#comment-1055
It loads new posts, but they are not adhering to the argumenets of the custom query (specifically displaying posts only in the same category).
The custom query is working (it displays 4 related posts from the same category). When i'm loading more, it is not respecting pagination (it's loading 6 posts instead of 4) and it is not respecting the query (it is loading posts not in the same category).
<div class="related-blog-posts gray-bg pt-5 pb-5 blog">
<div class="related-title pb-3">
<h1 class="mb-2">Related Stories</h1>
<img src="/dcustom/wp-content/uploads/2019/04/Path-137#2x.png" />
</div><!-- scroll-down-->
<div class="container">
<div class="row">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_args = array(
'category__in' => wp_get_post_categories( $post->ID ),
'paged' => $paged,
'post_type' => 'post',
'posts_per_page' => 4,
'post__not_in' => array( $post->ID ),
'orderby' => 'date',
'order' => 'DESC'
);
$third_query = new WP_Query( $query_args ); ?>
<?php
//Loop through posts and display...
if($third_query->have_posts()) : ?>
<?php while ($third_query->have_posts() ) : $third_query->the_post(); ?>
<?php get_template_part('template-parts/content-related-blog-posts'); ?>
<?php endwhile; ?><!-- end the loop-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php // don't display the button if there are not enough posts
if ( $third_query->max_num_pages > 1 )
echo '<a class="custom_loadmore btn btn-primary">More posts</a>'; // you can use <a> as well
?>
<?php endif; ?><!-- end loop if--->
</div><!-- row -->
</div><!-- container -->
</div><!-- related-case-studies-->
<script>
var test = '<?php echo serialize( $third_query->query_vars ) ?>',
current_page_myajax = 1,
max_page_myajax = <?php echo $third_query->max_num_pages ?>
</script>
<script src="<?php bloginfo('template_url')?>/js/myloadmore.js"></script>
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().after(data); // insert new posts
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data, remove the button as well
}
}
});
});
$('.custom_loadmore').click(function(){
//custom query on front-page.php
var button = $(this),
data = {
'action': 'loadmore',
'query': test,
'page' : current_page_myajax
};
$.ajax({
url : '/dcustom/wp-admin/admin-ajax.php', // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().after(data); // insert new posts
current_page_myajax++;
if ( current_page_myajax == max_page_myajax )
button.remove(); // if last page, remove the button
} else {
//button.remove(); // if no data, remove the button as well
}
}
});
});
});
function misha_my_load_more_scripts() {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery') );
// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages,
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
/* AJAX LOOP FOR THE ARCHIVE PAGE */
function misha_loadmore_ajax_handler(){
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
// it is always better to use WP_Query but not here
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
// look into your theme code how the posts are inserted, but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
get_template_part( 'template-parts/content-index', get_post_format() );
// for the test purposes comment the line above and uncomment the below one
// the_title();
endwhile;
endif;
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

Update Woocommerce product gallery with Ajax

I'm trying to do a dynamic product gallery based on colours in woocommerce product page. When I click on one colour, example on red, i should see Red Gallery's photos.
To do this i replaced all woocommerce gallery block with a new one created by ajax ( who have same classes of old gallery).
The loading of new photos work fine and I get gallery photos based on colour.
But when ajax load new gallery the slider don't work, I think because the woocommere js, who create the slider, is read only on page load.
I think I should reload some Woocommerce JS Function to recreate slider with his functions, but I don't know how.
This is the php file, which one I create a new gallery, called from ajax:
global $product;
$current_id = "";
if(isset($_POST['prodid']) && $_POST['prodid'] != "" ) {
$current_id = $_POST['prodid'];
$product = new WC_Product($current_id);
}
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
?>
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $product->get_image_id() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
This is the ajax function called on box colour click
function changeGallery(selected_gallery, productID) {
jQuery(function($) {
var select_color = selected_gallery;
var xhttp;
$.ajax({
url : 'https://mysite.it/wp-admin/admin-ajax.php', // AJAX handler
data : { action : 'load_gallery', gallery : select_color, prodid : productID },
type : 'POST',
beforeSend: function() {
},
success : function( result ){
if( result ) {
$('.woocommerce-product-gallery').html(result);
//Reload here some woocommerce JS functions?
}
}
});
});
}
The way to solve issues like this is to look at the WooCommerce source code to see how the plugin initialises the gallery to begin with. Based on this, I think you need to do something like:
jQuery( '.woocommerce-product-gallery' ).each( function() {
jQuery( this ).wc_product_gallery();
} );
See Github: single-product.js for reference.
I had same problem. The dafoxuk answer is correct, you need to reinitialize ProductGallery class on the .woocomorce-product-gallery. The problem was that this element already has a flexslider entity attached to it. To solve this, just remove that element (.woocomorce-product-gallery) and create a new identical one. (Flexslider doesn't have a way to detach itself from the element as far as I know)

Load more on button click scroll (no plugin)

I have a custom taxonomy in WordPress called Case studies.
Home.php is a page. Within home.php I have ran a loop to get all the case studies:
<?php
// only display 5 posts at first, then load 5 more on button click
$args = array('post_type' => 'case-studies', 'posts_per_page' => 5 );
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
echo "<div id='customers' class='case-studies-container'>"; // If there are results, create a single div in which all case studies will sit.
// run a loop to get data from all the posts that exist
while ($the_query->have_posts() ) {
$the_query->the_post();
tp_get_part( 'templates/snippets/case-study-card',
array(
'heading' => get_the_title(),
'subheading' => get_field( 'case_study_subheading'),
)
);
}
echo "<div><input type='button' id='loadmore' value='Load more'/></div>
</div>" // case-studies-container closed;
wp_reset_postdata();
} else {
// no posts found
}
?>
On #loadmore button click, I want it to load 5 more posts from the DB and display them. To accomodate this, I have the following JS within *home.php*
<script type="text/javascript">
$(document).ready(function(){
$('#loadmore').click(function(){
// alert('Hello world');
// load more case studies here
jQuery(function($){
var column_width = $(this).data('column-width');
var max_num_pages = $(this).data('max-num-pages');
var ignore = $(this).data('featured');
var post_type = $(this).data('type');
var button = $(this),
data = {
action:'loadmore',
query: loadmore_params.posts, // that's how we get params from wp_localize_script() function
page : loadmore_params.current_page,
security : loadmore_params.security,
columns : column_width,
exclude : ignore,
max_num_pages : max_num_pages,
post_type : post_type
};
$.ajax({
url : loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'Load More' ).prev().before(data); // insert new posts
loadmore_params.current_page++;
$('.case-studies-container').find('.case-card').last().after( data ); // where to insert posts
if ( loadmore_params.current_page == max_num_pages )
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data, remove the button as well
}
},
error : function(error){ console.log(error) }
});
});
});
});
</script>
And the following AJAX written in ajax-loaders.php:
<?php
function ajax_handler(){
check_ajax_referer('load_more', 'security');
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['post__not_in'] = explode(',',$_POST['exclude']);
$args['max_num_pages'] = $_POST['max_num_pages'];
$cols = $_POST['columns'];
$type = $_POST['post_type'];
query_posts($args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post(); ?>
<div class="<?php echo ($cols ? 'col-'.$cols : 'col-3') .' '. ($type === 'case-study' ? 'case-studies' : 'article__item'); ?> grid__item" id="<?php echo get_the_id(); ?>">
<?php
tp_get_part( 'templates/snippets/case-study-card',
array(
'filterable' => true,
'post' => $post,
'type' => get_cpt_term(get_the_id(), 'case-studies')
)
);
?>
</div>
<?php
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore', 'ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'ajax_handler'); // wp_ajax_nopriv_{action}
?>
With all these files set up, on button click, nothing happens? If I uncomment out the alert, the alert occurs which means the trigger is occurring, but unsure on where my load more functionality is going wrong?

How to add inline css/js inside a wordpress shortcode

I'm working on creating a shortcode which is meant to change the css and js dynamically for that shortcode based on the situation. Now the problem is that I not getting a clue about how to use add_action() inside a add_shortcode(). Let me give you an example snippet code so that you guys can better understand me:
add_shortcode('example', function( $atts ) {
//extracting the shortcode attributes
extract( shortcode_atts( array(
'value1' => null,
'value2' => null,
'value3' => null
), $atts ) );
//Now here I wll do my code for the shortcode
// But the shortcode needs some js and css to work
// so, I'm trying like this
//For the CSS
add_action('wp_head', function() {
echo '<style type="text/css">
.class {
background-color: '. $value2 .';
}
</style>';
});
//For the JS
add_action('wp_footer', function() {
echo '<script type="text/javascript">
var a = '. $value3 .'
</script>';
});
});
Now obviously it is not working, so I was hoping if any of you can guide me how to the similar thing in the proper way.
If you can, please help instead of negative voting the question.
There should be a better way to do this, but currently to just make it work, remove the add_action() part, just make a string with your code and return it:
add_shortcode('example', function( $atts ) {
//extracting the shortcode attributes
extract( shortcode_atts( array(
'value1' => null,
'value2' => null,
'value3' => null
), $atts ) );
//For the CSS
$result = '<style type="text/css">
.class {
background-color: '. $value2 .';
}
</style>';
//For the JS
$result .= '<script type="text/javascript">
var a = '. $value3 .'
</script>';
return $result;
});

Yii update Button label

I'm implementing a like button in yii,when i click on the button it calls a controller action which increases the number of likes by 1, i show the changed value in the Button label,how do i do it?
here is my view,what do i change ?
<?php $id =$data->id;
$foo = $data->likes;
echo CHtml::ajaxbutton($foo.' '.'Likes',
array('post/like/'.$id),
array(
'type'=>'POST',
'success'=>'js:function(data){
')
);
?>
You should try the following
<?php $id =$data->id;
$foo = $data->likes;
echo CHtml::ajaxbutton($foo.' '.'Likes',
array('post/like/'.$id),
array(
'type'=>'POST',
'replace'=>'#buttonId')
),
array(
'id'=>'buttonId'
);
?>
However, I suggest using sending parameters as data for AJAX like this:
<?php $id =$data->id;
$foo = $data->likes;
echo CHtml::ajaxbutton($foo.' '.'Likes',
array('post/like),
array(
'type'=>'POST',
'data'=>array("id"=>$id),
'replace'=>'#buttonId')
),
array(
'id'=>'buttonId'
);
?>
http://www.yiiframework.com/doc/api/1.1/CHtml#ajax-detail
replace: string, specifies the selector whose target should be replaced by the AJAX

Categories