Develop Reference

Wordpress Modification To A Five-Star Rating Script

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.

WordPress add shortcode with custom tinymce plugin not working

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

Can't select json elements added dynamically with append

I am trying to make a simple cross-fade slider but this time with images retrieved from a json file and added dynamically to a container.
I can easily get all pictures with all the information inside the json file but as soon as I have to select them later I can't. It's like they are not there. It's not the first time I add dynamically a html element. I use really often .append() or .prepend() and I can as easily find their children once they are created.
So I have a div in which I load dynamically some images. I want to pick them up again (not from the json file this time, but from the dom) so I can make a slider plugin with them.
$.fn.slider = function(options) {
var picstore, $fig,
def = {
json: undefined,
dataName: 'jsonslider'
},
cfg = $.extend( true, def, options ),
store = cfg.json,
dataN = cfg.dataName,
$wrap = $( this ),
$next = $wrap.next();
$.getJSON( store, function( data ) {
picstore = data.pictures;
for ( i = 0; i < picstore.length; i++ ) {
$wrap.append( '<figure data-' + dataN +'="' + i + '"><img src="' + picstore[i].url + '" alt="' + picstore[i].alt + '"/></figure>' );
};
I tried everything!
$fig = $wrap.children() does not work
$fig = $( '[data-' + dataN + '="0"]' ) does not work
What do you suggest me to do?
demo
github index.html raw file
github js raw file
github json raw file

Here the solution.
$.getJSON( store, function( data ) {
var arr = $.map(data, function(el){ return el; });
for ( i = 0; i < arr.length; i++ ) {
$wrap.append($('<figure data-' + dataN +'="' + i + '"><img src="' + arr[i].url + '" alt="' + arr[i].alt + '"/></figure>'));
};
var figs = $wrap.children();
figs.first().addClass( 'slider-active' );
});
You can't access json dynamically objects outside the function.

Javascript - callback function

This seems in my head like it should work but I cant figure out why it doesn't:
(function ($) {
$.fn.extend({
facebook: function (opts, callbackFnk) {
var $this = this;
...
...
...
$this.fbGetFriends = function( clback ){
jsonUrl = fbMe + '/friends?access_token=' + token + '&callback=?';
$.getJSON( jsonUrl, function( json ){
console.log(json.data[0].name);
clback.call(json);
});
}
...
...
...
In the console log the first name appears
In my other script:
var facebook = $.fn.facebook(
{
myClientId : '###############',
mySecret : '##############'
}
);
facebook.fbOnLogin = function(){
user = facebook.userDetails();
token = facebook.getToken();
facebook.fbGetFriends(function( json ){
for ( var i in json ) {
console.log( 'friends: ' + i + ' ' + json[i] );
}
});
}
In console log im getting nothing displayed and in previous tests its displaying errors data undefined.
Can anyone tell me where im going wrong?
regards

You don't need clback.call, just clback(json) is enough.

Detecting if a file is already open in javascript/hta

I'm trying to fix a .hta that someone at my company created 3 or 4 years ago. Right now if you open a file that someone else already has open, you'll lose any work you've done on it and will have to manually do it over again. So I was thinking just checking to see if the file is already open and then either locking editing, or just making a popup saying "hey, if you try to save you're gonna be disappointed". Is there an easy way to check to see if the file is already open in javascript?
The code to open the file is...
function FileOpen( strSetup )
{
if( ! strSetup )
{
strSetup = ShowDialog( "choose-setup", {"DialogTitle" : "Load Setup"} );
}
if( strSetup )
{
if( FileSystem.FileExists( App.Paths.Configs + "/" + strSetup + ".setup" ) )
{
var fFile = FileSystem.GetFile( App.Paths.Configs + "/" + strSetup + ".setup" );
App.Config = LoadXMLDocument( fFile.Path );
// SaveCurrentConfig();
RefreshView( "setup-summary" );
}
else
{
alert( "Could not find setup '" + strSetup + "'" );
}
}
}
and the code for LoadXMLDocument is...
//-----------------------------------------------------------------------------
// FUNCTION : LoadXMLDocument - Loads an XML document
// params : strPath - the path/file of the document to load
// : bCritical- if set true, we die if the document doesn't load
// returns : an XML dom object on success, false otherwise
//-----------------------------------------------------------------------------
function LoadXMLDocument( strPath, bCritical )
{
var xmlDoc = new ActiveXObject( "Msxml2.DOMDocument.3.0" );
xmlDoc.setProperty( "SelectionLanguage", "XPath" );
if( ! FileSystem.FileExists( strPath ) )
{
Error( "'" + strPath + "' is not a valid file path" );
if( bCritical ) Abort();
return( false );
}
var fFile = FileSystem.GetFile( strPath );
xmlDoc.load( fFile.Path );
if( xmlDoc.documentElement == null )
{
Error( "Could not load XML document '" + fFile.Path + "'" );
if( bCritical ) Abort();
return( false );
}
return( xmlDoc );
}

That's what revision control is all about. It's no different than other forms of the same issue that does not involve. hta files.

I see this is super old post but why not use VBS? If it's an HTA, they're supported with running together:
objFSO = CreateObject("Scripting.FileSystemObject")
strFilePath = "C:\test.txt"
If objFSO.FileExist(strFilePath) Then
MsgBox "I win"
End If