Search the Community
Showing results for tags 'jqueryportlet'.
Found 1 result
-
Hi, I'm trying to figure out how to make a multi column jquery sortable Portlet, save the column positions to a database onChange, I know that sortable has a serialize function but i really haven't had any luck getting it to work. If someone could please help me out with this. I have spent hours on google trying to find something. <!doctype html> <?php include('connection.php'); ?> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Portlets</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> body { min-width: 520px; } .new { width: 300px; float: left; font-size:18px; color:#C95F0D; border:#636262 solid; text-align:center; vertical-align:middle; line-height:90px; } .clear { width: 300px; float: right; padding-bottom: 50px; font-size:18px; color:#7433D0; border:#636262 solid; margin-right:100px; } .star { width: 300px; float: right; padding-bottom: 50px; font-size:18px; color:#7433D0; border:#636262 solid; margin-right:100px; } .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; padding: 0.3em; } .portlet-header { padding: 0.2em 0.3em; margin-bottom: 0.5em; position: relative; } .portlet-toggle { position: absolute; top: 50%; right: 0; margin-top: -8px; } .portlet-content { padding: 0.4em; } .portlet-placeholder { border: 1px dotted black; margin: 0 1em 1em 0; height: 50px; } </style> <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> $( function() { $( ".column" ).sortable({ connectWith: ".column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all" }); $( ".portlet" ) .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) .find( ".portlet-header" ) .addClass( "ui-widget-header ui-corner-all" ) .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); $( ".portlet-toggle" ).on( "click", function() { var icon = $( this ); icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" ); icon.closest( ".portlet" ).find( ".portlet-content" ).toggle(); }); $("#portlet").sortable({ handle : '.handle', update : function () { var order = $('#portlet').sortable('serialize'); $("#portlet").load("save_order.php?"+order); } }); } ); </script> </head> <body> <div class="toolbar"><div class="new">Get New Jobs</div><div class="clear">Clear Job</div></div> <div style="clear:both;"></div> <div class="column" id="1"> <h3>New</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='1' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> <div class="column" id="2"> <h3>Artwork Rec</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='2' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> <div class="column" id="3"> <h3>Approved & Ordered</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='3' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> <div class="column" id="4"> <h3>In Production</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='4' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> <div class="column" id="5"> <h3>Delivered</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='5' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> <div class="column" id="6"> <h3>To Be Invoiced</h3> <?php $result = mysqli_query($con,"SELECT * FROM jobs WHERE status='6' ORDER BY job_title DESC"); while($row = mysqli_fetch_array($result)) { ?> <div class="portlet"> <div class="portlet-header"><?php echo $row['job_title']; ?></div> <div class="portlet-content"><a href="pdfs/<?php echo $row['pdf_link']; ?>" target="_blank">View PDF</a></div> </div> <?php } ?> </div> </body> </html> And this is the save_order.php file. I am unsure how to write the update statement getting the column id etc from the previous page. <?php include('connection.php'); foreach ($_POST['status'] as $value) { // Database stuff } ?> All help much appreciated. Regards, MsKazza
