This seems like a fairly simple question, but I've been searching through google and can't find a solution.
function showJQueryAlert() {
echo '<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>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert("INSERT MESSAGE HERE!", 120, false); }); </script>';
outputs the popup with the message "INSERT MESSAGE HERE!". But
function showJQueryAlert($message) {
echo '<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>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert('.$message.', 120, false); }); </script>';
where $message is "INSERT MESSAGE HERE!", fails to output the popup. I've tried all sorts of combinations. So what am I missing?
Looks like you forgot some quotes:
JQueryAlert("'.$message.'", 120, false);
Related
I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
/////////////////////////////////CDN/////////////////////////////////////
<script src="https://kit.fontawesome.com/d6743b0f97.js" crossorigin="anonymous"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
<link href="dist/css/tabulator.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>
This is what I am getting in my body: https://i.imgur.com/sC6og2Q.png
Nothing
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
On a separate note you are including a lot of files you dont need to, if you are including tabulator.js then you dont need to include any other files, as it bundles them all up.
If you are going to use tabulator_core.js then you only need to include it or the minified version once
I'm using PHPChart for creating charts, now i want to have an option for exporting charts to pdf and images.
Bellow is my code:
<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/js/src/jquery.jqplot.css" />
<!--<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/examples/examples.css" />-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flot/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../explorercanvas/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="/phpChart_Enterprise/js/src/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flashcanvas/src/flashcanvas.js"></script>
<![endif]-->
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.js"></script>
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasAxisTickRenderer.js"> </script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasTextRenderer.js"></script>
<!--<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/canvasHack2.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
if (!$.jqplot.use_excanvas) {
$('div.jqplot-target').each(function(){
// Add a view image button
var btn = $(document.createElement('button'));
btn.text('View as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotViewImage();
});
$(this).after(btn);
// add a save image button
btn = $(document.createElement('button'));
btn.text('Save as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotSaveImage();
});
$(this).after(btn);
btn = null;
});
}
$('#stackChart1').CanvasHack();
});
</script>
But when i click on generated buttons Save as PNG and View AS PNG browser goes to loading and down.
For any help and guid thanks.
Did you check out the image export example? It's all done in Javascript.
http://phpchart.com/phpChart/examples/export_image.php
Not sure about PDF export, but I believe it would require some server side script. See example below.
https://phpchart.uservoice.com/knowledgebase/articles/443666-how-to-export-my-chart-on-the-server-side-in-php
I'm trying to load a range slider in PHP (slider like one of http://ghusse.github.io/jQRangeSlider/demo.html).
This is the slider in HTML, which works (see: http://www.leff-design.nl/websites/sliderpreview/test.html):
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<link rel="stylesheet" href="css/iThing.css" type="text/css" />
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="jQAllRangeSliders-min.js"></script>
</head>
<body>
<h1>Hello world</h1>
<div id="slider"></div>
<script>
//<!--
$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});
//-->
</script>
</body>
</html>
Now I tried to set this to php but don't know exactly how to do this. I tried this (it's not the full php code but just a part of an Advanced custom field plugin php file):
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fields/css/iThing.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/fields/jQAllRangeSliders-min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(window).load(function() {
$('#slider').editRangeSlider();
});
})(jQuery);
</script>
<?php
function create_field( $field )
{
{
echo '<script type="text/javascript">$("#slider").editRangeSlider({range: {min: 0, max: 15}}, {bounds:{min: 0, max: 40}}, {defaultValues:{min: 0, max: 4}});</script>';
}
}
new acf_field_number_range();
?>
Also tried to echo the slider code but it does nothing. It does not get the right css classes like in the HTML file. How do I exactly connect the #slider id with the jquery files in php?
Thanks in advance.
Never mind, I forgot the <div id="slider">. Stupid.
How to write php code(variable) in tooltip
Here is my code:-
<head>
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
<script type="text/javascript">
$(function() {
$('.ChillTip').ChillTip();
$('.ChillTip1').ChillTip({
CTBK:'#fff',
CTBC:'#000',
CTW:'150'
});
});
</script>
</head>
<body>
<?php
$abc= 'Urvisha';
?>
For more info.
<button class="ChillTip" title="This is a button example">BUTTON</button>
</body>
I want the $abc in my tooltip
if i am writing $abc inside title="" then $abc is displaying not its value
plz help me.....
You just need to echo the variable into the HTML:
<button class="ChillTip" title="<?php echo $abc?>">BUTTON</button>
I am using jqPlot to plot some data including dates and another user data identifier. I have it plotted correctly with this code (I'd post an image but I don't have the reputation yet!):
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var line1=<?php echo $jqPlotArray;?>;
var plot2 = $.jqplot('line_chart', [line1], {
axes:{
xaxis:{
renderer:$.jqplot.dateAxisRenderer,
tickOptions:{formatString:'%b %y'}
}
},
series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}]
});
});
</script>
But when I try to format BOTH the axis labels to WHITE and a 9pt font it plots incorrectly with this code (Again, I'd post an image but can't yet):
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var line1=<?php echo $jqPlotArray;?>;
var plot2 = $.jqplot('line_chart', [line1], {
axes:{
xaxis:{
renderer:$.jqplot.dateAxisRenderer,
renderer:$.jqplot.categoryAxisRenderer,
tickOptions:{formatString:'%b %y', textColor:'#FFFFFF', fontSize:'9pt'}
}
},
series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}]
});
});
</script>
In summary, my question is what renderers do I need and how to use them to simply format the x & y axis labels to a white font color (so the labels pop off my green background better) and also change the fontSize to 9pt.
Any help will be much appreciated.
Thanks
If your xaxis has dates, why are you trying to use the categoryAxisRenderer too?
I think the main problem is a missed capital letter:
renderer:$.jqplot.DateAxisRenderer //The D is Date is a capital
See fiddle here.