Trouble with Flot for Wordpress Tooltip plugin - javascript

I'm trying to enable tooltips for Flot for Wordpress and am having problems with it when I add in a certain function and I need this to work from what I've tried to decipher onnline.
I downloaded the latest version of tooltips for flot charts and loaded the script when the plugin is loaded.
The chart I have create loads perfect when the following js code is not in the code or when the function is empty like below too.
Can anyone tell me what's wrong with the code that is stopping my chart appearing?
Cheers in advance, Alan.
This is code I believe I need to make the tooltips work
function showTooltip(x, y, contents) {
    $("<div id="tooltip">" + contents + "</div>").css({
        position: "absolute",
        display: "none",
        top: y + 5,
        left: x + 20,
        border: "2px solid #4572A7",
        padding: "2px",    
        size: "10",  
        "background-color": "#fff",
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}
This is what works when I remove the inside of the code
function showTooltip(x, y, contents) {
        position: "absolute"
}
Here full code below:
echo ' <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.resize.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/excanvas.min.js"></script>
<link href="' . plugins_url( $path ) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css">
<div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div>
';
echo '
<script language="javascript" type="text/javascript" id="source">
var lie_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_lie'] . '],';
}
echo ' ];
var options_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_options'] . '],';
}
echo ' ];
var context_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_context'] . '],';
}
echo ' ];
var decide_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_decide'] . '],';
}
echo ' ];
var dataset = [
{
label: "Lie",
data: lie_results
}, {
label: "Context",
data: context_results
}, {
label: "Options",
data: options_results
},{
label: "Decide",
data: decide_results
}
];
var options = {
xaxis: { mode: "time", tickSize: [2, "month"] },
yaxes: [{ min: ' .$min_count . ', max: ' .$max_count . ' },{},{},{}],
points: { show: true, symbol: "circle", fill: true },
lines: { show: true, },
legend: { noColumns: 0, labelFormatter: function (label, series) { return "<font color=\"white\">" + label + "</font>";}, backgroundColor: "#000", backgroundOpacity: 0.9, labelBoxBorderColor: "#000000", position: "nw"},
grid: { hoverable: true, mouseActiveRadius: 8 }
};
jQuery(document).ready(function($){
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,dataset,options);
$("#placeholder").UseTooltip();
}
);
var previousPoint = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
console.log(x+","+y)
showTooltip(item.pageX, item.pageY,
x + "<br>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, contents) {
$("<div id=\'tooltip\'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 20,
border: "2px solid #4572A7",
padding: "2px",
size: "8",
opacity: 0.85,
background: "#4572A7",
}).appendTo("body").fadeIn(200);
};
</script></div>';

When using javascript, get in the habit of checking the debugger console for errors. This is invalid javascript:
$("<div id="tooltip">" + contents + "</div>")
It produces:
SyntaxError: Unexpected identifier
Why? Because it's not properly quoted.
Try:
"<div id=\"tooltip\">" + contents + "</div>"
The quotes around tooltip are escaped.

Related

Don't know how to make a Dynamic jQuery CHART(flot : sin-cos)

So I am a junior and I am trying to understand how things work here.
I am using jquery.flot.js to make an interacting chart.
What I am trying to do?
I want to take this values (the values from the table) and make a chart:
#for((c,w)<- map){
<tr>
<td class="val">#c</td>
<td class="time">#w</td>
<br>
</tr>
}
I am using play framework and I get those values from my server through a map...
In #c I will get values that represents the humidity from an environment;
and
In #w I will get the timestamp from each value.
And this is the script for the chart :
$(function() {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot("#placeholder", [
{ data: sin, label: "sin(x)"},
{ data: cos, label: "cos(x)"}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: -20,
max: 90
}
});
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #991F7A",
padding: "2px",
"background-color": "#E68AB8",
color : "#000",
opacity: 0.70
}).appendTo("body");
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
Maybe some of you played with this plug in, this is how things look :
I want to take the values from the time (#w) and put them on the axe : x , and the humidity (#c) on y ...
Can somebody help me please .... !?
Thank you.

Aftershow in fancybox jQuery

I had the same problem this person: ShareThis plugin not working in FancyBox title But now I have gotten it work, except the
afterShow: function(){
stButtons.locateElements();
}
Where in this code should I put it? I've tried many places, but it just says error. It say's I am placing it wrong. Where should I place it in the script below?
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow: function() {
var caption = $(this.element).data("caption") ? $(this.element).data("caption") : "";
this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption;
if (this.title) { ''
// New line
this.title += '<br />';
}
},
nextEffect : 'fade',
prevEffect : 'fade',
padding : 0,
margin : [15, 15, 50, 15],
afterLoad : addLinks,
beforeClose : removeLinks
});
function buildShareThis(url){
var customShareThis = "<div class='share'>"; // class for styling maybe
customShareThis += "<span class='st_facebook_hcount' displayText='Facebook' st_url='"+url+"'></span> ";
customShareThis += "<span class='st_twitter_hcount' displayText='Tweet' st_url='"+url+"'></span>";
customShareThis += "<span class='st_pinterest_hcount' displayText='Pinterest' st_url='"+url+"' st_img='"+url+"' ></span>";
customShareThis += "<span class='st_tumblr_hcount' displayText='Tumblr' st_url='"+url+"'></span>";
customShareThis += "</div>";
return customShareThis;
}
function addLinks() {
var list = $("#links");
if (!list.length) {
list = $('<ul id="links">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
}
list.appendTo( 'body' );
}
list.find('li').removeClass('active').eq( this.index ).addClass('active');
}
function removeLinks() {
$("#links").remove();
}
});
</script>
You can set all fancybox API options, including fancybox callbacks (afterLoad, afterShow, beforeClose, etc.) like :
$(".fancybox").fancybox({
nextEffect: 'fade',
prevEffect: 'fade',
padding: 0,
margin: [15, 15, 50, 15],
afterLoad: addLinks,
afterShow: function () {
stButtons.locateElements();
},
beforeClose: removeLinks
});
Assuming you have properly defined your addLinks and removeLinks functions somewhere else in your script.

How can i send javascript variable values into php

How can i send javascript variable values into php. i have used ajax for this but its nt working for me. please help, i am new in javascript and ajax. Here is my ajax & javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function ()
{
$("#slider-range").slider(
{
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
var a = $("#min_inches").val($("#slider-range").slider("values", 0));
var b = $("#max_inches").val($("#slider-range").slider("values", 1));
$.ajax(
{
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
});
</script>
And Below is my php code(searchrange.php).
<?php
if(isset($_POST['a']) && $_POST['a'] != '')
{
$kws = $_POST['a'];
$kws1=$_POST['b'];
echo $kws;
echo $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
$res = mysql_query($query);
$count = mysql_num_rows($res);
$i = 0;
if($count > 0)
{
echo "<ul>";
while($row = mysql_fetch_array($res))
{
echo "<a href='#'><li>";
echo "<div id='rest'>";?>
<?php echo $row['Religion'];?><br><?php echo $row['Name'];?>
<?php echo $row[0];
echo "<br />";
echo "<br />";
echo "<div style='clear:both;'></div></li></a>";
$i++;
if($i == 5) break;
}
echo "</ul>";
if($count > 5)
{
echo "<div id='view_more'><a href='#'>View more results</a></div>";
}
}
else
{
echo "<div id='no_result'>No result found !</div>";
}
}
?>
Any help would be appreciated. thank you
Try this code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
change: function(event, ui) {
// when the user change the slider
},
stop: function(event, ui) {
// when the user stopped changing the slider
$.ajax(
{
type: "POST",
url: "searchrange.php",
data:
{"min" :ui.values[0],"max":ui.values[1]},
success: function (option)
{
alert("voted");
}
});
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
And your search page will be like this :
if(isset($_POST['min']) && $_POST['min'] != '')
{
$kws = $_POST['min'];
$kws1=$_POST['max'];
echo $kws;
echo $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
$res = mysql_query($query);
$count = mysql_num_rows($res);
$i = 0;
if($count > 0)
{
echo "<ul>";
while($row = mysql_fetch_array($res))
{
echo "<a href='#'><li>";
echo "<div id='rest'>";?>
<?php echo $row['Religion'];?><br><?php echo $row['Name'];?>
<?php echo $row[0];
echo "<br />";
echo "<br />";
echo "<div style='clear:both;'></div></li></a>";
$i++;
if($i == 5) break;
}
echo "</ul>";
if($count > 5)
{
echo "<div id='view_more'><a href='#'>View more results</a></div>";
}
}
else
{
echo "<div id='no_result'>No result found !</div>";
}
}
Try this. Let the ajax call be done inside a call back.
$(function (){
$("#slider-range").slider({
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
var a = $("#min_inches").val($("#slider-range").slider("values", 0));
var b = $("#max_inches").val($("#slider-range").slider("values", 1));
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
});
I think your problem is that your $.ajax({...}) is being called too early - ie. on document ready $(function (){ ... $.ajax({...}) });, and not after your sliders are changed/selected. You could call your $.ajax({...}) on a button click -
<input id="vote" type="button" value="Vote" />
$("#vote").on('click',function(){
var a= $("#min_inches").val();
var b=$("#max_inches").val();
$.ajax ({
type: "POST",
url: "searchrange.php",
data: { a : a,
b : b },
success: function(option)
{
alert("voted");
}
});
});
so your code could be -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(function ()
{
$("#slider-range").slider(
{
range: true,
min: 71,
max: 109,
values: [75, 100],
slide: function (event, ui)
{
$("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
$("#min_inches").val(ui.values[0]);
$("#max_inches").val(ui.values[1]);
}
});
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
$("#min_inches").val($("#slider-range").slider("values", 0));
$("#max_inches").val($("#slider-range").slider("values", 1));
$("#vote").on('click',function(){
var a= $("#min_inches").val();
var b=$("#max_inches").val();
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: a,
b: b
},
success: function (option)
{
alert("voted");
}
});
});
});
</script>
see this JSFiddle example (using alert in place of $.ajax()) -http://jsfiddle.net/8JgW6/
HI,
You can try this.In this example you can see how I have made a call to ajax
function callService(val1,val2){
alert("call service here "+val1);
$.ajax({
type: "POST",
url: "searchrange.php",
data:
{
a: val1,
b: val2
},
success: function (option)
{
alert("voted");
}
});
}
$sliderValue="";
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
},
stop: function(event, ui) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
b = 0;
$sliderValue=ui.value;
console.log($sliderValue)
callService($sliderValue,b);
}
});
http://jsfiddle.net/kapilgopinath/c4XA5/

Jquery appending extra # to DOM objects

I am getting the following error in IE9
SCRIPT5022: Syntax error, unrecognized expression: ##chart1
jquery-2.0.3.min.js, line 4 character 14519
I am not sure why given the code which is shown below. I clearly do not add it to the HTML string and only have 1 when i reference it in the jqplot call. So why is it shooting out this error?
function createGraph() {
var HTMLstring = '<!DOCTYPE html>\n';
HTMLstring += '<HTML>\n';
HTMLstring += '<HEAD>\n';
HTMLstring += '<TITLE> Frequency Graph</TITLE>\n';
HTMLstring += '<!--[if lt IE 9]><script src="js/excanvas.js"></script><![endif]-->\n';
HTMLstring += '<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n';
HTMLstring += '</HEAD>\n';
HTMLstring += '<BODY>\n';
HTMLstring += '<div><span>Moused Over: </span><span id="infomouseover">Nothing</span></div>\n';
HTMLstring += '<div><span>Clicked: </span><span id="infoclicked">Nothing</span></div>\n';
HTMLstring += '<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>\n';
HTMLstring += '</BODY>\n';
HTMLstring += '</HTML>';
newwindow = window.open();
newdocument = newwindow.document;
newdocument.write(HTMLstring);
$(document).ready(function () {
freqchart = $.jqplot('#chart1', [
[
[2, 1],
[4, 2],
[6, 3],
[3, 4]
],
[
[5, 1],
[1, 2],
[3, 3],
[4, 4]
],
[
[4, 1],
[7, 2],
[1, 3],
[2, 4]
]
], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
$('#chart1').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#infomouseover').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data + ', pageX: ' + ev.pageX + ', pageY: ' + ev.pageY);
}
);
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#infoclicked').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data + ', pageX: ' + ev.pageX + ', pageY: ' + ev.pageY);
}
);
$('#chart1').bind('jqplotDataUnhighlight',
function (ev) {
$('#infomouseover').html('Nothing');
}
);
});
}
jqPlot() doesn't require a CSS style selector to find an Id. It handles that itself, thus currently it looks for #chart1 with an appended # twice.
<script>
//This will look for #chart1
$.jqplot('chart1', [data], options );
</script>
jsplot Docs
"Create the actual plot by calling the $.jqplot() plugin with the id of your target"
jqplot takes the element id as a parameter not an id selector so $.jqplot('#chart1', should be $.jqplot('chart1', etc.
http://www.jqplot.com/docs/files/usage-txt.html

TypeError: $(".ajax-fc-container").captcha is not a function

I'm having problem with captcha (http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin). I'm getting error like in the title. Anyboby know what's the problem?
The "obj" has "captxt and "array" field.
I'm including jquery-1.5.1.min.js and jquery-ui.min.js library
This is a sample from my JS code:
function loadlang(lang) {
var rand = $.ajax({ url: '/captcha/data.aspx', async: false }).responseText;
var obj = eval(rand)[0];
$(".red").removeClass('red');
$(function () {
$(".ajax-fc-container").captcha({
borderColor: "silver",
text: obj['captxt'],
items: obj['array']
});
});
$("#resend_password_link").html(obj['resend_password_link']);
$("#sectxt").html(obj['sectxt']);
$("#more").html(obj['more']);
$("#langtxt").html(obj['langtxt']);
$("#optionstxt").html(obj['optionstxt']);
$("#submit").val(obj['Login']);
$("#tab").hide();
$("#desc").html(obj['Text']);
$("#dialog").html(obj['Browser']);
}
$(document).ready(function () {
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
//InitLang();
var lang = document.location.href.split('lang=')[1] || 'pl';
loadlang(lang);
$("#lang").remove();
$("#myForm").append("<input id=\"lang\" type=\"hidden\" style=\"display: none;\" name=\"lang\" value=\"" + lang + "\">");
$('.lang').click(function () {
$("#lang").remove();
$("#myForm").append("<input id=\"lang\" type=\"hidden\" style=\"display: none;\" name=\"lang\" value=\"" + $(this)[0].id + "\">");
loadlang($(this)[0].id);
});

Categories