Adding Custom Dropdown Box In TinyMCE In WordPress - php

Ive been trying to get this done for hours now and its making my head rattle.
Ive nearly got it, but unfortunately when no content is wrapped its showing the title of the shortcode.
For instance one of my titles is shortcode 1 and when its wrapped around some text it should show [thirdwidth]content goes here[/thirdwidth]
But if i do not wrap it, it shows the title.
shortcode 1[thirdwidth][/thirdwidth]
Why is this doing it?
Here is the code on the php front:
function register_customcode_dropdown( $buttons ) {
array_push( $buttons, "Shortcodes" );
return $buttons;
}
function add_customcode_dropdown( $plugin_array ) {
$plugin_array['Shortcodes'] = get_template_directory_uri() . '/style/js/TinyMCE_js.js';
return $plugin_array;
}
function customcode_dropdown() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_customcode_dropdown' );
add_filter( 'mce_buttons', 'register_customcode_dropdown' );
}
}
add_action('init', 'customcode_dropdown');
Here is the TinyMCE_js.js file
(function() {
tinymce.create('tinymce.plugins.Shortcodes', {
init : function(ed, url) {
},
createControl : function(n, cm) {
if(n=='Shortcodes'){
var mlb = cm.createListBox('Shortcodes', {
title : 'Shortcodes',
onselect : function(v) {
if(tinyMCE.activeEditor.selection.getContent() == ''){
tinyMCE.activeEditor.selection.setContent( v )
}
if(v == 'shortcode 1'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[thirdwidth]'+selected+'[/thirdwidth]';
}else{
content = '[thirdwidth][/thirdwidth]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'shortcode 2'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[12]'+selected+'[/12]';
}else{
content = '[12][/12]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
}
});
// Add some menu items
var my_shortcodes = ['shortcode 1','shortcode 2'];
for(var i in my_shortcodes)
mlb.add(my_shortcodes[i],my_shortcodes[i]);
return mlb;
}
return null;
}
});
tinymce.PluginManager.add('Shortcodes', tinymce.plugins.Shortcodes);
})();
Thanks

Found the issue, it was I left this in:
if(tinyMCE.activeEditor.selection.getContent() == ''){
tinyMCE.activeEditor.selection.setContent( v )
}

Related

Woocommerce | Disable the Add to Cart button on a single product that targets a specific product ID

I'm newbie in programming, so this confuses me.
How to keep the "Add to Cart" button disabled for a specific product ID until all the required custom variation radio buttons are clicked and all the text field quantities for that custom variation are filled out?
From what I've found on my research, below's medthod is the easiest way to integrate into WordPress. I want it to specifically target a product ID.
<?php
// It adds a JS script only on the WooCommerce product page
add_action('wp_footer', 'add_script_to_product_page');
function add_script_to_product_page()
{
// Only on the product page.
if (!is_product()) {
return;
}
// disable add to cart button until required fields are filled out
<script type="text/javascript">
jQuery(".single_add_to_cart_button").prop('disabled', true);
var toValidate = jQuery('#fpf_6796689, #fpf_6744940, #fpf_3566324'),
valid = false;
toValidate.keyup(function() {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function() {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery(".single_add_to_cart_button").prop('disabled', false);
} else {
jQuery(".single_add_to_cart_button").prop('disabled', true);
}
});
</script>
};
add_action('wp_footer', 'add_script_to_product_page');
function add_script_to_product_page() {
if (!is_product()) return; //execute only if we are on product page
global $product;
$product_id = $product->get_id(); // what is the current product ID
$product_ids = array('10','20') // Products to which we want to load script
if(in_array($product_id,$product_ids)) {
load_single_product_script();
}
}
function load_single_product_script() {
?>
<script type="text/javascript">
jQuery(".single_add_to_cart_button").prop('disabled', true);
var toValidate = jQuery('#fpf_6796689, #fpf_6744940, #fpf_3566324'),
valid = false;
toValidate.keyup(function() {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function() {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery(".single_add_to_cart_button").prop('disabled', false);
} else {
jQuery(".single_add_to_cart_button").prop('disabled', true);
}
});
</script>
<?php
}

Change the button text after the ajax update db

I'm trying to learn php and WP developing. My goal is to mark posts done/read on button click. I found this great ajax tutorial plugin. Here is the link of the tutorial, and for the plugin. I have successfully manage to edit the plugin form my needs. On click it checks if there is already that id in the array, if it is it deletes that element from the array. If there is not id in the array, or the array is empty it adds post id into the array. Afterwards the array is updated into db.
Here is the code for the button, that is added after the post content:
public function rml_button( $content ) {
$rml_post_id = get_the_id();
// Show read me later link only when user is logged in
if( is_user_logged_in() && get_post_type() == post ) {
if( get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true ) !== null ) {
$value = get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true );
}
if( $value ) {
if (in_array($rml_post_id, $value)) {
$html .= 'DONE';
$content .= $html;
}
else {
$html .= 'MARK AS DONE';
$content .= $html;
}
}
else {
$html .= 'MARK AS DONE';
$content .= $html;
}
}
return $content;
}
Here is the code for updating the db:
public function read_me_later() {
check_ajax_referer( 'rml-nonce', 'security' );
$rml_post_id = $_POST['post_id'];
$echo = array();
if( get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true ) !== null ) {
$value = get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true );
}
if( $value ) {
if (in_array($rml_post_id, $value)) {
foreach (array_keys($value, $rml_post_id, true) as $key) {
unset($value[$key]);
}
$echo = $value;
}
else {
$echo = $value;
array_push( $echo, $rml_post_id );
}
}
else {
$echo = array( $rml_post_id );
}
update_user_meta( wp_get_current_user()->ID, 'rml_post_ids', $echo );
// Always die in functions echoing Ajax content
die();
}
Finally, here is the .js for the ajax call:
jQuery(document).ready( function(){
jQuery('#content').on('click', 'a.rml_bttn', function(e) {
e.preventDefault();
var rml_post_id = jQuery(this).data( 'id' );
jQuery.ajax({
url : rml_obj.ajax_url,
type : 'post',
data : {
action : 'read_me_later',
security : rml_obj.check_nonce,
post_id : rml_post_id
},
success : function( response ) {
jQuery('.rml_contents').html(response);
}
});
//jQuery(this).hide();
});
});
What I cannot figure out, and sorry if it is a stupid question, is how to change button text after the ajax? From "MARK AS DONE" to "DONE" and vice versa. How to call this function rml_button(), inside read_me_later() so that button text will be changed after the db update.
Thank you.
Added if else statements inside ajax success function to be able to change a tag text from MARK AS DONE to DONE and vice versa.
Try:
jQuery(document).ready( function(){
jQuery('#content').on('click', 'a.rml_bttn', function(e) {
e.preventDefault();
var rml_post_id = jQuery(this).data( 'id' );
var ts = jQuery(this);
jQuery.ajax({
url : rml_obj.ajax_url,
type : 'post',
data : {
action : 'read_me_later',
security : rml_obj.check_nonce,
post_id : rml_post_id
},
success : function( response ) {
if(ts.html()=="DONE") { ts.html("MARK AS DONE"); } // ts.html()=="DONE" - maybe changed based on response
else { ts.html("DONE"); }
jQuery('.rml_contents').html(response);
}
});
//jQuery(this).hide();
});
});

Wordpress ACF field update after getting the value

I have this action that retrieves the crop values when I crop an image in the image editor and update the value in the db record (with update_field().
So I can update the value of the field in the database, but I don't know how to set the value of the field in the post editor. The field value remains blank and when the user update the post the value is being overwritten by with null value.
How can I do?
add_action( 'wp_save_image_editor_file', 'save_crop_data');
function save_crop_data(){
$attachment_id = $_REQUEST['postid'];
$parent = get_post_ancestors($attachment_id);
$post_id = $parent[0];
update_field('crop_data', $_REQUEST['history'], $post_id);
return $saved;
}
PHP
add_action( 'admin_enqueue_scripts', 'portfolio_admin_script' );
function portfolio_admin_script() {
global $post_type;
if( 'portfolio' == $post_type )
wp_enqueue_script( 'portfolio-admin-script', get_stylesheet_directory_uri() . '/portfolio.js', array( 'jquery', 'media-editor' ), '', true );
}
JAVASCRIPT (file portfolio.js)
jQuery(function ($) {
$(document).ajaxComplete(function (event, xhr, settings) {
//intercept the ajax event on media library close
if (typeof settings.data === 'string' && /action=get-post-thumbnail-html/.test(settings.data) && xhr.responseJSON && typeof xhr.responseJSON.data === 'string') {
var crop_data_stored = decodeURIComponent(getCookie("crop_values"));
crop_data_stored = crop_data_stored.replace(/\\"/g, '"');
if (crop_data_stored != '' && $('#acf-field-crop_data').val() == '') {
jQuery('#acf-field-crop_data').val(crop_data_stored);
deleteCookie("crop_values");
}
}
});
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function deleteCookie(name) {
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
};
});

WP Ajax not working in else condition

I am working on WordPress plugin. In plugin there is a check box, when a user checked the checkbox a value will be saved in database via ajax and when its unchecked the value will be deleted from database via ajax. So I create a checkbox and write an ajax code.
Here is my code:
HTML Code
<?php
$cart_items = get_cart_contents();
$cart_info = array();
foreach ($cart_items as $_data) {
$prod_id = $_data['id'];
$cart_info[] = array(
'prod_id' => $prod_id,
);
}
$_cart_sr = serialize($cart_info);
?>
<label class="label" for="purchase">
<?php _e('Purchase', 'product'); ?>
<input type="checkbox" id="purchase" />
</label>
<input type="hidden" class="cart_info" value='<?php echo $_cart_sr; ?>'>
Here is my Ajax and PHP Code:
add_action('wp_ajax_values_save', 'save_check_value');
add_action('wp_ajax_nopriv_values_save', 'save_check_value');
add_action('wp_ajax_values_delete', 'delete_check_value');
add_action('wp_ajax_nopriv_values_delete', 'delete_check_value');
add_action("wp_head", "edd_gift_email_ajax");
function edd_gift_email_ajax() {
?>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#purchase").click(function () {
if(jQuery(this).is(":checked")) {
var cart_info_save = jQuery('.cart_info').val();
var data_save = {
action: 'values_save',
cart_info_save: cart_info_save
}
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data_save, function (save_result) {
alert(save_result);
});
} else {
var cart_info_delete = jQuery('.cart_info').val();
var data_delete = {
action: 'values_delete',
cart_info_delete: cart_info_delete
}
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data_delete, function (delete_result) {
alert(delete_result);
});
}
});
});
</script>
<?php
}
And here is my save and delete query
function save_check_value() {
global $wpdb;
$info_save = stripcslashes($_REQUEST['cart_info_save']);
$cart_info_un_sr_save = unserialize($info_save);
foreach ($cart_info_un_sr_save as $user_gift_cart_save) {
$prod_user_id_save = $user_cart_save['prod_id'];
echo $prod_user_id_save . " _ Add This";
//update_post_meta($prod_user_id_save, 'this_product', '1');
}
}
function delete_check_value() {
global $wpdb;
$info_delete = stripcslashes($_REQUEST['cart_info_delete']);
$cart_info_un_sr_delete = unserialize($info_delete);
foreach ($cart_info_un_sr_delete as $user_cart_delete) {
$prod_user_id_delete = $user_cart_delete['prod_id'];
echo $prod_user_id_delete . " _ Delete This";
//delete_post_meta($prod_user_id_delete, 'this_product', '1');
}
}
So when I checked the check box the alert gives me this value 168 _ Add This (this is what I want) but when I unchecked the check box the alert gives me this value 0 (I want this value 168 _ Delete This).
I checked every thing but I got confused that why else condition not give me the right value.
Any suggestions.
Not directly a solution but I can't help thinking there is quite a lot of duplication of code which could be somewhat simplified.
The initial javascript function could be like:
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#purchase").click( function() {
var action=jQuery(this).is(":checked") ? 'save' : 'delete';
var cart_info=jQuery('.cart_info').val();
var data={
action:'value_'+action,
cart_info:cart_info
};
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function( result ) {
alert( result );
});
}
});
});
</script>
And rather than two distinct functions that share almost the same code you could do:
<?php
function check_value() {
global $wpdb;
$info = stripcslashes( $_REQUEST['cart_info'] );
$cart_info = unserialize( $info );
/* To find the `action` analyse the following */
exit( print_r( $cart_info ) );
foreach( $cart_info as $gift ) {
list( $junk, $action ) = explode( '_', $gift['action'] );
$product = $gift['prod_id'];
echo $product . " _ ".$action." this";
switch( $action ){
case 'save':
update_post_meta($product, 'this_product', '1');
break;
case 'delete':
delete_post_meta($product, 'this_product', '1');
break;
}
}
}
?>
The answer of #RamRaider is good but You can still reduce more code and might be it will work for you as well :)
Here's the jQuery:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#purchase").click( function() {
// Method variable will be using to define which
// function should trigger later in our PHP
var cart_method = jQuery(this).is(":checked") ? 'save' : 'delete';
var cart_info = jQuery('.cart_info').val();
var data = {
action: 'modify_cart',
cart_method: cart_method,
cart_info: cart_info
};
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function( result ) {
alert( result );
});
}
});
});
</script>
And then here is our PHP code:
<?php
function modify_cart_func() {
global $wpdb;
// Get method from our jQuery
$method = $_POST['cart_method'];
$info = stripcslashes( $_REQUEST['cart_info'] );
$cart_info = unserialize( $info );
foreach( $cart_info as $gift ) {
// If method is save
if ($method == 'save') {
update_post_meta($gift['product_id'], 'this_product', 1);
// If method is delete
} else if ($method == 'delete') {
delete_post_meta($gift['product_id'], 'this_product', 1);
}
}
}
?>
And finally your ajax call:
<?php
add_action('wp_ajax_modify_cart', 'modify_cart_func');
add_action('wp_ajax_nopriv_modify_cart', 'modify_cart_func');
?>
Hope that makes sense to you ;)
I am not sure if this causes the problem but if you are calling ajax when not logged in it tries to call wp-ajax with action email_values_delete not values_delete which i guess you are trying to call. Of course you might have that action as well for some other functionality.
If that is not the case change this
add_action('wp_ajax_nopriv_email_values_delete', 'delete_check_value');
To this
add_action('wp_ajax_nopriv_values_delete', 'delete_check_value');
You should also add wp_die(); in the end of each php function you are calling via wp-ajax.
Hope this helps.
Edit:
Sorry, it tries to call values_delete but since there is only email_values_delete (for non logged in users) defined I would guess ajax request might return something like 0.

Check username availability ajax

As the title says, I am trying to check if a username exists in the DB in a registration form using Ajax.
I use the following script:
$(document).ready(function() {
//the min chars for username
var min_chars = 3;
//result texts
var characters_error = 'Minimum amount of chars is 3';
var checking_html = 'Checking...';
//when button is clicked
$('#user_id').keyup(function(){
//run the character number check
if($('#user_id').val().length < min_chars){
//if it's bellow the minimum show characters_error text '
$('#username_availability_result').html(characters_error);
}else{
//else show the cheking_text and run the function to check
$('#username_availability_result').html(checking_html);
check_availability();
}
});
});
//function to check username availability
function check_availability(){
//get the username
var user_id = $('#user_id').val();
//use ajax to run the check
$.post("db.php", { user_id: user_id },
function(result){
//if the result is 1
if(result == 1){
//show that the username is available
$('#username_availability_result').html(user_id + ' is Available');
}else{
//show that the username is NOT available
$('#username_availability_result').html(user_id + ' is not Available');
}
});
}
and my db.php file looks like this:
if (isset($_POST['action']) && $_POST['action'] == "signup") {
$user_id = mysql_real_escape_string($_POST["user_id"]);
$new_password = md5(mysql_real_escape_string($_POST["new_password"]));
$new_email = mysql_real_escape_string($_POST["new_email"]);
$checking_existance=mysqli_query($str,"SELECT username FROM users WHERE username='".$user_id."'");
$row=mysqli_fetch_assoc($checking_existance);
print_r($checking_existance);
if(mysqli_num_rows($checking_existance)>0)
{
echo 0;
}
else{
echo 1;
}
}
The problem I am encountering is that the result is always showing that the username is not available even if it is.
I found this useful for you.You can check for your solution on the following link Click Here or Here
Your db file is looking for a number of $_POST variables that you have not passed in.
action, new_password and new_email
I would guess that if you did console.log(result) you would get undefined, therefore its not = 1 and therefore goes into the else statement.
You need to change the AJAX call to:
$.post("db.php", {
user_id: user_id,
action: action,
new_password: new_password,
new_email: new_email
}, ...
just do it in an easy way (i found that there is no action, new_password and new_email parameters in your javascript ) please take care of that too.
Javascript
var min_chars = 3;
var characters_error = 'Minimum amount of chars is 3';
var checking_html = 'Checking...';
var xhr_request = false;
var usernames = {};
$(function() {
$("#user_id").on("keyup", check_availability );
});
function check_availability() {
if ( xhr_request ) {
xhr_request.abort();
}
var user_id = $.trim( $(this).val() );
if ( !user_id || user_id.length < min_chars ) {
$("#username_availability_result").html( characters_error );
return;
}
// check user_id exists in runtime cache, to avoid useless requests :\
if ( usernames[user_id] !== undefined ) {
if ( usernames[user_id] === true ) {
//show that the username is available
$("#username_availability_result").html( user_id+" is Available" );
}
else {
//show that the username is NOT available
$("#username_availability_result").html( user_id+' is not Available' );
}
return;
}
//use ajax to run the check
xhr_request = $.post( "c.php", { 'action' : 'validate', 'user_id' : user_id } );
xhr_request.success(function( result ) {
//if the result is 1
if ( result == 1 ) {
// add user_id to cache
usernames[user_id] = true;
//show that the username is available
$("#username_availability_result").html( user_id+" is Available" );
}
else {
// add user_id to cache
usernames[user_id] = false;
//show that the username is NOT available
$("#username_availability_result").html( user_id+' is not Available' );
}
});
xhr_request.fail(function() {
$("#username_availability_result").html( "connection error, please try again" );
});
}
PHP
<?php
if ( isset( $_POST["action"] ) && isset( $_POST["user_id"] ) ) {
$mysqli = new mysqli( "localhost", "my_user", "my_password", "my_db" );
$userid = $mysqli->real_escape_string( $_POST["user_id"] );
if ( $_POST["action"] === "validate" ) {
$result = $mysqli->query( "SELECT username FROM users WHERE username = '{$userid}'" );
if ( $result && $result->num_rows > 0 ) {
echo "0";
}
else {
echo "1";
}
}
elseif ( $_POST["action"] == "signup" ) {
// do the process
}
}
?>

Categories