I'm trying to create my own MP3 playlist with HTML5/JS player and ACF Pro. Every thing is ok but I just have 1 Track in my playlist and it seems my JS code need to be repeat at the audio part.
So this is my php/js code:
<?php if( have_rows('playlist_single_track') ): ?>
<?php while( have_rows('playlist_single_track') ): the_row();
$pltrackname = get_sub_field('playlist_track_name');
$pldownloadtrack = get_sub_field('playlist_track_download');
$plplaytrack = get_sub_field('playlist_trak_online_player');
?>
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
]
});
</script>
<?php endwhile; ?>
<?php endif; ?>
I don't know much about javascript so can you help me to repeat JS code in this part:
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
It will help me to add more song tracks in my playlist.
I need to do something like this:
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
{
name: 'track1',
artist: 'artistname',
url: 'URL1',
cover: 'images/cover.jpg'
},
{
name: 'track2',
artist: 'artistname',
url: 'URL2',
cover: 'images/cover.jpg'
},
{
name: 'track3',
artist: 'artistname',
url: 'URL3',
cover: 'images/cover.jpg'
},
]
});
</script>
Thanks.
Try this
<?php if( have_rows('playlist_single_track') ): ?>
<script>
const ap = new APlayer({
container: document.getElementById('playlist'),
listFolded: false,
listMaxHeight: 90,
preload: 'none',
audio: [
<?php while( have_rows('playlist_single_track') ): the_row();
$pltrackname = get_sub_field('playlist_track_name');
$pldownloadtrack = get_sub_field('playlist_track_download');
$plplaytrack = get_sub_field('playlist_trak_online_player');
?>
{
name: '<?php echo $pltrackname; ?>',
artist: 'null',
url: '<?php echo $plplaytrack; ?>',
cover: 'images/cover.jpg'
},
<?php endwhile; ?>
]
});
</script>
<?php endif; ?>
Related
I have a sweetalert/javascript function and I want my users to upload two images and one text to my database. I only found out how to upload images using basic HTML "file" boxes. But not how to do it with sweetalert....
This is my sweetalert/Javascript code
$(document).ready(function() {
$('#new-btn').click(function() {
swal.mixin({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([{
input: 'file',
inputAttributes: {
name: "image",
class: "image",
},
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{
title: 'Über mich',
text: ''
},
]).then((result) => {
if (result.value) {
var kuerzeltest = "mk304";
$.ajax({
type: "POST",
url: "../../register/profil_update.php",
data: {
"post": result.value[2],
"kuerzel": kuerzeltest
},
});
$.ajax({
type: "POST",
url: "../../register/profil_update.php",
data: {
"bild": new FormData(this),
"bild2": result.value[1],
"kuerzel": kuerzeltest
},
contentType: false,
processData: false,
});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"
)
}
})
});
})
and this is my backend code
<?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben
$kuerzel = $_POST["kuerzel"];
$bild = $_FILES['bild'];
$bild2 = $_FILES['bild2'];
$post = $_POST["post"];
$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";
$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));
$row = $statement->fetchObject();
header("Location: ../webpage/home.php");
?>
My server where I run this code on https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php
I really don't know where my error is,
Is it possible to hide a Plot Line when I Drill down?
I have a Bar chart that Drill down to a Line Chart, in the "root" (Bar chart) I show a Plot Line Red that shows the Average value, the problem is that when I Drill down to the Line Chart, if the yAxis allow it, it is visible (the Red Plot Line), I want to hide the Plot Line on Drill down, because that average value I just need to see it in the "root" (Bar chart) not when I Drill down.
The average Plot Line has a value of 1865 and it is visible only in the year 2019, because is the only year where it reaches a value high enough to get the yAxis near that value.
So I wonder if theres a way to Hide the Plot Line when I Drill down.
This is my Chart code, i fill it up with PHP, data comes from an XML.
$('#todo').highcharts({
title: {
text: 'Registro de IPE del año 2017 al '+<?php echo date('Y')?>
},
subtitle: {
text: 'Click para ver desgloce del año.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Tiempo de Indisponibilidad (HORAS)'
},
plotLines: [{
color: 'red',
value: avg, // Insert your average here
width: '1',
zIndex: 2, // To not get stuck below the regular plot lines
label:{text:'Promedio: '+parseInt(avg)}
}]
},
credits: {
enabled:false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
}
},
lang: {
drillUpText: '<< VOLVER'
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">{point.name}: </span> <b> {point.y}</b> Horas<br/>'
},
series: [{
name: 'Brands',
type: 'column',
colorByPoint: true,
data: [
<?php
for($i = 0; $i < $total_registros; $i++)
{
?>
{
name: '<?php echo $registros->registro[$i]->Año; ?>',
y: <?php list($horas, $minutos) = split('[:]', $registros->registro[$i]->TOTAL); echo $horas; ?>,
drilldown: '<?php echo $registros->registro[$i]->Año; ?>'
},
<?php
}
?>
]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
series: [
<?php
for($j = 0; $j < $total_registros; $j++)
{
?>
{
type: 'line',
name: '<?php echo $registros->registro[$j]->Año; ?>',
id: '<?php echo $registros->registro[$j]->Año; ?>',
data:[
[
'Enero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Enero); echo $horas; ?>
],
[
'Febrero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Febrero); echo $horas; ?>
],
[
'Marzo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Marzo); echo $horas; ?>
],
[
'Abril',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Abril); echo $horas; ?>
],
[
'Mayo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Mayo); echo $horas; ?>
],
[
'Junio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Junio); echo $horas; ?>
],
[
'Julio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Julio); echo $horas; ?>
],
[
'Agosto',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Agosto); echo $horas; ?>
],
[
'Septiembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Septiembre); echo $horas; ?>
],
[
'Octubre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Octubre); echo $horas; ?>
],
[
'Noviembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Noviembre); echo $horas; ?>
],
[
'Diciembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Diciembre); echo $horas; ?>
]
]
},
<?php
}
?>
]
}});
The easiest solution would be to remove plot line on drilldown event and add it again on drillup event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup
http://api.highcharts.com/highcharts/Axis.addPlotLine
http://api.highcharts.com/highcharts/Axis.removePlotLine
Example:
http://jsfiddle.net/cpcb8acn/
I know this question has been published before (a bunch of times actually) but I'm asking it because I have absolutely no idea what I can be doing wrong.
What I'm trying to do is just that, filling (or binding) a grid with data that I've got stored in my MySQL database.
This is what I've got so far:
Ext.define('UserDataModel', {
extend: 'Ext.data.Model',
fields: ['name', 'age']
});
var usersStore = Ext.create('Ext.data.Store', {
model: 'UserDataModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'dbhandler/acquisition.php',
reader: {
type: 'json',
successProperty: 'success',
root: 'usersData'
}
}
});
var gridPanel = Ext.create('Ext.grid.Panel', {
store: usersStore,
columns: [{
dataIndex: 'name',
header: 'Name',
flex: 1
}, {
dataIndex: 'age',
header: 'Age',
flex: 1
}]
});
And this is my PHP file:
<?php
include('../connections/usersdb.php');
$query = "SELECT Name, Age FROM Users";
$result = $conn->query($query);
$usersData = array();
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
array_push($usersData, array("name" => $row['Name'], "age" => $row['Age']))
}
}
$conn->close();
echo json_encode(array("success" => true, "usersData" => $usersData)); ?>
But the grid isn't getting filled.
And what drives even crazier is that the console doesn't throw me any error.
My Candlestick chart imports data from a json file. Everything is great when I don't mess with the file
But when I use php to exclude some json rows to filter the data, I will end up with this even when every value on chart is correct.
How can I fix it?
My settings
(function () {
// $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
$.getJSON(<?php echo "'getJSON.php?symbol=" . $_GET["symbol"] . "&timeframe=" . $_GET["timeframe"] . "'"; ?>, function (data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
buttons: [{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 5,
text: '5m'
}, {
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 5,
text: '5h'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : <?php echo "'" . $_GET["symbol"] . " Price | " . $_GET["timeframe"] . "M'" ?>
},
series : [{
type : 'candlestick',
name : <?php echo "'" . $_GET["symbol"] . " Price'"; ?>,
data : data,
dataGrouping : {
enable: false
}
}]
});
});
});
I am using this code to render a HighChart:
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
title: '',
type: 'column'
},
xAxis: {
categories: ["<?php echo join($data0, '","') ?>"],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
name: '<?php echo date("Y",strtotime("-1 year")); ?>',
color: '#666666',
data: [<?php echo join($data1, ',') ?>]
}, {
name: '<?php echo date("Y"); ?>',
color: '#2196F3',
data: [<?php echo join($data2, ',') ?>]
}],
credits: {
enabled: false
},
title: {
text: ''
}
});
</script>
How can get this to update every 5 seconds and show some indication on the chart if something changes?
Try
setInterval(function(){
chart.series[0].update({
data: [<?php echo join($data1, ',') ?>]
}, true);
chart.series[1].update({
data: [<?php echo join($data2, ',') ?>]
}, true);
}, 5000);