I have installed both draggabilly and packery with npm and also included a direct link to each in both my charts.php file and c_head.php (which is loaded on all pages) but I keep getting an error message . . . Uncaught TypeError: $(...).packery is not a function. I have tried also with the vanilla JS code (new Packery() instead of .packery) but this simply gives the error that Packery() is not defined. Any suggestions?
https://packery.metafizzy.co/draggable.html
(js code from here gives ".packery is not a function" error) https://codepen.io/desandro/pen/aGvIq
(js code from here gives "Packery not defined" error) https://codepen.io/desandro/pen/ciAdD
c_head.php
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Factor Viewer"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!--
nlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- <link class='responsive_css'
<link rel='stylesheet' type='text/css' media='only screen and (min-width:737px) and (max-width:880px)' href='css/screen_layout_medium.css'/>
<link rel='stylesheet' type='text/css' media='only screen and (min-width:50px) and (max-width:736px)' href='css/screen_layout_small.css'/>
<link rel='stylesheet' type='text/css' media='only screen and (max-height:440px)' href='css/screen_layout_small.css'/>
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href='css/style.css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript' src='js/scripts.js'></script>
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
charts.php
<?php
include_once("c_session.php");
include_once("c_connection.php");
//echo "HERE" . "\n";
//echo $connection->host_info . "</br>\n";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<?php include_once("c_head.php"); ?>
<!--All page specific code goes below this line -->
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
</head>
<?php
// start check if queries are needed
// if ($_SESSION['didQueries']) {
// $doQueries = 0;
// echo "NO queries";
// } else {
// $doQueries = 1;
// $_SESSION['didQueries'] = true;
// echo "need queries";
// }
// session_destroy();
// end check if queries are needed
?>
<body>
<div id="page">
<?php include_once("c_navigation.php"); ?>
<?php
// start query 1: get 6 sets of prices
if ($doQueries) {
$sqlPriceData = "SELECT lid, `date`, price from fv_price where lid in (412, 413, 1247, 5001, 531, 5002) order by lid, `date`;";
$resPriceData = $connection->query($sqlPriceData);
while ($row = mysqli_fetch_array($resPriceData)) {
$priceData[] = $row;
}
$_SESSION['$FundPriceData'] = $priceData;
} else {
$priceData = $_SESSION['$FundPriceData'];
} // end if
// initialize php arrays to populate and use for chart
$dates = array_column($priceData, 'date');
$Prices = array_column($priceData, 'price');
// arrays used for chart must be reversed and json_encoded
$chart_dates = json_encode(array_reverse($dates));
$chart_Prices = json_encode(array_reverse($Prices));
?>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>
<div id="charts_div" class="border"> <!-- start charts div -->
<div id="chart1" class="border draggable mini_chart"> <!-- start chart1 -->
</div> <!-- end chart1 -->
<div id="chart2" class="border draggable mini_chart"> <!-- start chart2 -->
</div> <!-- end chart2 -->
<div id="chart3" class="border draggable mini_chart"> <!-- start chart3 -->
</div> <!-- end chart3 -->
<div id="chart4" class="border draggable mini_chart"> <!-- start chart4 -->
</div> <!-- end chart4 -->
<div id="chart5" class="border draggable mini_chart"> <!-- start chart5 -->
</div> <!-- end chart5 -->
<div id="chart6" class="border draggable mini_chart"> <!-- start chart6 -->
</div> <!-- end chart6 -->
</div> <!-- end charts div -->
<!-- start call drawChart functions -->
<script>
drawChart('chart1', 'Fund', '<?= $code ?>', '<?= $lid ?>', <?= $chart_dates ?>, <?= $chart_Prices ?>)
</script> <!-- end call drawChart functions -->
</div> <!-- page -->
</body>
</html>
scripts.js
//********** START DRAGGABLE SCRIPTS **********
//#region
// https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/
// this plain jQuery works for dragging elements
// $( function() {
// $( ".draggable" ).draggable({ containment: "#charts_div" });
// } );
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
// bind drag events to Packery
$grid.packery( 'bindDraggabillyEvents', draggie );
});
//#endregion
//********** END DRAGGABLE SCRIPTS **********