I created a tinymce plugin that adds YouTube shortcode function with tinymce custom fields.
Plugin code (onsubmit function):
onsubmit: function( e ) {
var videourl = e.data.video_url;
var videotitle = e.data.video_title;
var jw7_videodescription = e.data.video_description;
var jw7_videoimage = e.data.video_image;
if(videourl === '') { editor.windowManager.alert('Media URL is Required'); return false; }
if(videotitle === '') {jw7_videotitle = 'untitled';}
if(jw7_videodescription === '') {jw7_videodescription = '';}
editor.insertContent('[youtube ' + 'link="' + videourl +'" title="' + videotitle + '"]');
}
The WordPress php shortcode code:
function shortcode_youtube( $atts ) {
$a = shortcode_atts( array(
'link' => '',
'title' => '',
), $atts );
return youtube_outp( $a['link'] , $a['title']);
}
add_shortcode( 'youtube', 'shortcode_youtube' );
function youtube_outp($link , $title){
if (!empty( $link ) ) {
$outp = '<p>Watch '.$title.'</p><br><iframe width="420" height="315" src="'.$link.'" frameborder="0" allowfullscreen></iframe>';
return $outp;
}
}
The problem is that when I write the shortcode code to tinymce manually the shortcode output works, but when I use the tinymce plugin, I get quotes problems and get this output :
[youtube link=”https://www.youtube.com/watch?v=w9n-t9tazFY” title=”vide title”]
What is your advice about this?
note : I get this problem just when I update to latest WordPress
version
Related
I am using the ckfinder modal without CKEditor to upload multiple files to the form section.
I used the code provided in the documentation section,
CKfinder modal opens as expected, selected multiple file but i couldn't able to get all the images url. The response i got only the first image.
window.CKFinder = {
_popupOptions: {
'popup-1-config': { // Config ID for first popup
chooseFiles: true,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
var output = document.getElementById( 'output' );
output.innerHTML = 'Selected in popup 1: ' + file.get( 'name' ) + '<br>URL: <img src=" ' + file.getUrl() + '">';
} );
}
},
}
};
var popupWindowOptions = [
'location=no',
'menubar=no',
'toolbar=no',
'dependent=yes',
'minimizable=no',
'modal=yes',
'alwaysRaised=yes',
'resizable=yes',
'scrollbars=yes',
'width=800',
'height=600'
].join( ',' );
document.getElementById( 'popup-1-button' ).onclick = function() {
// Note that config ID is passed in configId parameter
window.open( 'http://foxhills.localhost/admin/ckfinder/ckfinder.html?popup=1&configId=popup-1-config', 'CKFinderPopup1', popupWindowOptions );
};
In the above code var file = evt.data.files.first(); is the reason why i am getting the first image. How i can change the code to get the all the urls as array.
For your event, try testing with this
finder.on( 'files:choose', function( evt ) {
var files = evt.data.files;
var chosenFiles = '';
files.forEach( function( file, i ) {
chosenFiles += ( i + 1 ) + '. ' + file.get( 'name' ) + '\n';
} );
alert( chosenFiles );
} );
Source: https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Application-event-files_choose
Using the answer provided in this thread (Woocommerce: How to show Product Attribute name on title when in a category page and "filtering" products via '?pa_attribute=' on address bar) I would like to display the category as well as the attribute name. I have a separate JS function that is currently updating the page_title when a filter is applied but that is only loading after ajax has finished. So in this event it would not load till after the filter is applied.
In the event that a user uses the nav to get to the category, currently only the attribute is displaying in the page_title. Looking to also display the category. I believe this would work out of the box if I organized my products in to subcategories but due to how the filtering is being set up I elected not to go this route. I can explain in further detail why I had to take this approach if anyone is interested.
I have left the commented out code in so that you can see the approach I was attempting to take. If this is confusing can edit it out.
add_filter( 'woocommerce_page_title', 'custom_woocommerce_page_title', 15, 2 );
function custom_woocommerce_page_title( $page_title ) {
if ( is_archive() ) {
$exists_attr = false;
foreach ( $_GET as $index => $value ) {
if ( substr( $index, 0, 3 ) === 'pa_' ) {
//$cat_id = wc_category_taxonomy_id_by_name( $index );
$attr_id = wc_attribute_taxonomy_id_by_name( $index );
if ( $attr_id === 0 && $cat_id ) {
continue;
}
if ( ! $exists_attr /* && ! $exists_cat */) {
$exists_attr = true;
//$exists_cat = true;
$page_title .= ' ';
} else {
$page_title .= ' ';
}
//$terms = get_the_terms( $post->ID, 'product_cat' );
$term = get_term_by( 'slug', esc_html( $value ), $index );
$page_title = /*$terms->name . ': ' . */ $term->name;
}
}
}
// Need to add category name after attribute term name.
return $page_title;
}
Also, I have included the JS I am using to apply page_title in the event a filter selection occurs. Ideally it would be great if I could handle it all via a JS file as I am much more familiar with JS and just starting to dive in to php. I am using the WOOF - WooCommerce Products Filter and modifying some of the code to accomplish what I need.
(function() {
var machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
var processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
var optionMachine = machineEl.querySelector("option[selected='selected']");
var optionProcess = processEl.querySelector("option[selected='selected']");
var machineValue = optionMachine.innerHTML;
var processValue = optionProcess.innerHTML;
var result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
if (machineValue != 'Product Machine' && processValue != 'Product Processing') {
result.innerHTML = machineValue + " " + processValue;
}
else if (machineValue != 'Product Machine') {
result.innerHTML = machineValue;
}
else if (processValue != 'Product Processing') {
result.innerHTML = processValue;
}
})()
So was able to get this to work by taking my JS and adding it in as a script within my functions.php. So essentially I was able to eliminate the custom_woocommerce_page_title filter.
Function.php
<?php
add_action('wp_footer', 'onLoadPageTitle');
function onLoadPageTitle() {
?>
<script>
machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
optionMachine = machineEl.querySelector("option[selected='selected']");
optionProcess = processEl.querySelector("option[selected='selected']");
if (optionMachine != null) {
machineValue = optionMachine.innerHTML;
}
else {
machineValue = "";
}
if (optionProcess != null) {
processValue = optionProcess.innerHTML;
}
else {
processValue = "";
}
result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
result.innerHTML = machineValue + " " + processValue;
</script>
<?php
}
?>
Then the woof woocommerce filter js that updates the title when a new select occurs after the AJAX.
(function() {
machineEl = document.getElementsByClassName('woof_select woof_select_pa_machine')[0];
processEl = document.getElementsByClassName('woof_select woof_select_pa_processing')[0];
optionMachine = machineEl.querySelector("option[selected='selected']");
optionProcess = processEl.querySelector("option[selected='selected']");
if (optionMachine != null) {
machineValue = optionMachine.innerHTML;
}
else {
machineValue = "";
}
if (optionProcess != null) {
processValue = optionProcess.innerHTML;
}
else {
processValue = "";
}
result = document.getElementsByClassName('woocommerce-products-header__title page-title')[0];
result.innerHTML = machineValue + " " + processValue;
})()
will probably pare it down by just calling the script function from within the woof js after ajax.
I have added custom javascript code to the header.php file of my wordpress site. I have tested this code on a basic html file and it works fine, but I cannot seem to make the vote recording function work on a wordpress post. The other components of the script are working fine (hover, vote display from a .txt file), but I cannot get the function to record the vote working. All files have read/write access.
I would greatly appreciate it if anyone could assist me or point me in the right direction to solve this.
Here is the part of the script that records the vote, I am fairly new to php and was wondering if there is something I can add/replace to modify so the code so it will work properly on Wordpress.
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'http://localhost/url/wordpress/wp-content/ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
Here is a visual example for reference
Thank you for taking time to look at this, if there is any additional information that I can provide please let me know.
Here is the ratings.php that was mentioned in the script that was placed in the header.php.
ratings.php:
<?php
$rating = new ratings($_POST['widget_id']);
isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote();
class ratings {
var $data_file = 'http://localhost/url/wordpress/wp-content/ratings.data.txt';
private $widget_id;
private $data = array();
function __construct($wid) {
$this->widget_id = $wid;
$all = file_get_contents($this->data_file);
if($all) {
$this->data = unserialize($all);
}
}
public function get_ratings() {
if($this->data[$this->widget_id]) {
echo json_encode($this->data[$this->widget_id]);
}
else {
$data['widget_id'] = $this->widget_id;
$data['number_votes'] = 0;
$data['total_points'] = 0;
$data['dec_avg'] = 0;
$data['whole_avg'] = 0;
echo json_encode($data);
}
}
public function vote() {
preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);
$vote = $match[1];
$ID = $this->widget_id;
if($this->data[$ID]) {
$this->data[$ID]['number_votes'] += 1;
$this->data[$ID]['total_points'] += $vote;
}
else {
$this->data[$ID]['number_votes'] = 1;
$this->data[$ID]['total_points'] = $vote;
}
$this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 );
$this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] );
file_put_contents($this->data_file, serialize($this->data));
$this->get_ratings();
}
}
?>
Here is the complete javascript code added to the header.php, the mouseover/mouseout seem to be working properly, so I think the javascript should be running.
Javascript added to header.php:
<?php wp_head(); ?>
<script type="text/javascript">
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'http://localhost/url/wordpress/wp-content/ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
$('.ratings_stars').hover(
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
set_votes($(this).parent());
}
);
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'http://localhost/url/wordpress/wp-content/ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
</script>
To solve this all I had to do was place my ratings.php file and ratings.data.txt within my wordpress theme folder and link the custom javascript to these files within my header.php file. The javascript now operates properly. This is not the proper way to do this though, ideally I should use the wp_enqueue_scripts hook in the header.php and have the custom css and js in the css/js folders. But for now this temporary fix works and I can continue experimenting.
I have two fields in my module called: rules_name_c which is a text field and rules_author_c which is a relate field.
These fields are not mandatory fields however when i enter data into the rules_name_c field I would like to make it so the rules_author_c must be filled in to complete the record.
I have tried the following:
<?php
$dependencies['conn_connection']['required_author'] = array(
'hooks' => array("edit"),
'trigger' => 'true', //Optional, the trigger for the dependency. Defaults to 'true'.
'triggerFields' => array('rules_name_c'),
'onload' => true,
//Actions is a list of actions to fire when the trigger is true
'actions' => array(
array(
'name' => 'SetRequired',
//The parameters passed in will depend on the action type set in 'name'
'params' => array(
'target' => 'rules_author_c',
'label' => 'rules_author_c_label',
'value' => 'not(equal($rules_name_c, ""))',
),
),
),
);
?>
I believe this solution will not work as this only functions when editing a record. Is that correct?
I have also tried using:
<?php
require_once('include/MVC/View/views/view.edit.php');
/*
* replace UT_Blogs with the module your are dealing with
*/
class conn_connectionViewEdit extends ViewEdit {
public function __construct() {
parent::ViewEdit();
$this->useForSubpanel = true; // this variable specifies that these changes should work for subpanel
$this->useModuleQuickCreateTemplate = true; // quick create template too
}
function display() {
global $mod_strings;
//JS to make field mendatory
$jsscript = <<<EOQ
<script>
// Change rules_author_c to the field of your module
$('#rules_name_c').change(function() {
makerequired(); // onchange call function to mark the field required
});
function makerequired()
{
var status = $('#rules_name_c').val(); // get current value of the field
if(status != ''){ // check if it matches the condition: if true,
addToValidate('EditView','rules_author_c','varchar',true,'{$mod_strings['LBL_RULES_AUTHOR']}'); // mark rules_author_c field required
$('#description_label').html('{$mod_strings['LBL_RULES_AUTHOR']}: <font color="red">*</font>'); // with red * sign next to label
}
else{
removeFromValidate('EditView','rules_author_c'); // else remove the validtion applied
$('#rules_author_c_label').html('{$mod_strings['LBL_RULES_AUTHOR']}: '); // and give the normal label back
}
}
makerequired(); //Call at onload while editing a Published blog record
</script>
EOQ;
parent::display();
echo $jsscript; //echo the script
}
}
I wrote this javascript function and later on I use it with jQuery:
function lxValidateCRMfield(form_name, field_name, label, validate, fnCallerName = "") {
fnCallerName = (fnCallerName != "") ? "(Function " + fnCallerName + ")" : "";
if (validate) {
console.log("lxValidateCRMfield adding validation on form " + form_name + " to field " + field_name, fnCallerName);
//addToValidate is defined somewhere on suitecrm
addToValidate(form_name, field_name, 'varchar', true, "Falta campo requerido: " + label);
$('#' + field_name + '_label').html(label + ': <font color="red">*</font>');
} else {
console.log("lxValidateCRMfield removing validation on form " + form_name + " to field " + field_name, fnCallerName);
//removeFromValidate is defined somewhere on suitecrm
removeFromValidate(form_name, field_name);
$('#' + field_name + '_label').html(label + ': ');
}
}
Then you call it on the form you need to (using your fields it could look like this):
// List all forms available
console.log(document.forms);
// select one you need
var form_name = 'EditView'; eg: EditView, DetailView, search_form
var module = 'YourModule'; // eg: Opportunities
var crmEditView = document.forms[form_name];
if (crmEditView.module.value == module) {
if ($('#rules_name_c').val() != '') {
lxValidateCRMfield(form_name, 'rules_author_c', 'Author', true, 'optionalNameOfFunctionYourCallingThis');
} else {
lxValidateCRMfield(form_name, 'rules_author_c', 'Author', false, 'optionalNameOfFunctionYourCallingThis');
}
}
I hope it helps
Regards
I'm trying to get a javascript based "world clock" to run inside a pop up div that is shown with jQuery.
It works great when I look at it in the Dreamweaver Live View. But when I upload it to my server, the Javascript showClock(clockobj), which contains a document.write(...) command, executes immediately and rewrites the entire screen with the map. So, I took the showClock(clockobj) call out of the worldclock.html javascript and put it in the jQuery handler that opens the div. The map comes up with a click. But its not in the div. It takes over the whole screen.
How do I get it to display INSIDE the div, like all of the other buttons do on the page? (Tips, Converter, Add, Edit, Copy, etc,)
Here is the link, if you want to see what I'm doing:
http://www.bizzocall.com/cp-ManagePhone.php
Here's the JS:
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">
clockobj=new Object;clockobj.clockfile="world001-blue.swf";
clockobj.TimeZone="PST";
clockobj.width=480;
clockobj.height=250;
clockobj.wmode="transparent";
</script>
Here's the jQuery:
<script type="text/javascript">
$(function(){
// Dialog box
$('#worldclock').dialog({
autoOpen: false,
width: 540,
buttons: {
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#worldclockbtn').click(function(){
$('#worldclock').dialog('open');
showClock(clockobj);
return false;
});
});
</script>
The HTML:
<div id="worldclock" class="DialogBox">
<?php require_once('worldclock.html'); ?>
</div>
<div class="tiptxt" id="worldclockbtn" >WORLD CLOCK
<div class="arrowInCircle"></div>
</div>
Firstly get rid of one of your jqueries - you have several and different versions
they may be the reason for this error:
$("#picker").farbtastic is not a function
Source File: http://www.bizzocall.com/cp-ManagePhone.php
Line: 26
To handle a document.write, override it
var oldWrite = document.write;
var stringToWrite = ""; // this is polluting the window scope, but is for demo purposes ok
document.write=function(str) {
stringToWrite+=str
}
and use $("#someDiv").html(stringToWrite)
but looking at the JS, you can also just replace
function showBanner(BannerLink){
document.write(BannerLink);
}
with
function showBanner(BannerLink){
$("#someDiv").html(BannerLink);
}
update: replace the whole external script with
function showClock(obj){
//Aded by Takeshi Sugimoto on 2008/05/01 for SSL
var str = '';
if(obj.ssl == '1'){
str = '<embed src="https://secure.clocklink.com/clocks/';
}
else{
str = '<embed src="http://www.clocklink.com/clocks/';
}
//--
str += obj.clockfile;
str += "?";
for( prop in obj ) {
if( 'clockfile' == prop
|| 'width' == prop
|| 'height' == prop
|| 'wmode' == prop
|| 'type' == prop
) continue;
//Added by takeshi on 2007/01/29 (to display mutibyte chars by using URL encoding)
if(prop == "Title" || prop == "Message"){
str += ( prop + "=" + obj[prop] + "&" );
}
else{
str += ( prop + "=" + _escape(obj[prop]) + "&" );
}
//--
}
str += '" ';
str += ' width="' + obj.width + '"';
str += ' height="' + obj.height + '"';
str += ' wmode="' + obj.wmode + '"';
str += ' type="application/x-shockwave-flash">';
return str ;
}
function _escape(str){
str = str.replace(/ /g, '+');
str = str.replace(/%/g, '%25');
str = str.replace(/\?/, '%3F');
str = str.replace(/&/, '%26');
return str;
}
and do
$('#worldclock').html(showClock(clockobj)).dialog.....