Web Development: 5/17/15

Tuesday, May 19, 2015

Dynamic Drag’n Drop With jQuery And PHP

how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

Download Link: Click Here to Download

The Database:

We create a simple database as below:

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.

The HTML:

We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

<div id="contentLeft">
 <ul>
  <li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
 </ul>
</div>


The JavaScript:

We will be using jQuery UI's sortable plugin.
 <script type="text/javascript">
$(document).ready(function(){ 

 $(function() {
  $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
   var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
   $.post("updateDB.php", order, function(theResponse){
    $("#contentRight").html(theResponse);
   });
  }
  });
 });

});
</script>

We made the unordered list inside #contentLeft a sortable item, used theserialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

<?php
require("db.php");

$action = mysql_real_escape_string($_POST['action']);
$updateRecordsArray  = $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

 $listingCounter = 1;
 foreach ($updateRecordsArray as $recordIDValue) {

  $query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
  mysql_query($query) or die('Error, insert query failed');
  $listingCounter = $listingCounter + 1;
 }

 echo '<pre>';
 print_r($updateRecordsArray);
 echo '</pre>';
 echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>

You can see that this is the easiest part. We handled the array as$updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

Download Link: Click Here to Download

NOTE: This article is taken from http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/

Monday, May 18, 2015

Filtering date values which are greater or less than a value in DHTMLX

Here is an implementation of a date range filter in a grid, the filter is applied by adding '#daterange_filter' to the relevant column in the attachHeader function call.

Note the date format for the calendar popups and the column is MM/DD/YYYY

dhtmlXGridObject.prototype._in_header_daterange_filter=function(a,b){

   a.innerHTML="<div style='width:100%; margin:0 auto; text-align: left'>From:<input type='text' id='datefrom' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'><br>To:<input type='text' id='dateto' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'></div>";

   a.onclick=a.onmousedown=function(a){
      return(a||event).cancelBubble=!0
   };

   a.onselectstart=function(){
      return event.cancelBubble=!0
   };

   datefrom = getChildElement(a.firstChild,"datefrom");
   dateto = getChildElement(a.firstChild,"dateto");

   myCalendar = new dhtmlXCalendarObject([datefrom , dateto])
   myCalendar.setDateFormat("%m/%d/%Y");    //Date format MM/DD/YYY

   myCalendar.attachEvent("onClick",function(date){
      mygrid.filterByAll();
   })

   this.makeFilter(datefrom ,b);
   this.makeFilter(dateto ,b);

   datefrom._filter=function(){
      var a=this.value;
      return a==""?"":function(b){

         aDate = parseDate(a)
         bDate = parseDate(b)
         return aDate <= bDate ;

      }
   }

   dateto._filter=function(){

      var a=this.value;
      return a==""?"":function(b){
         aDate = parseDate(a)
         bDate = parseDate(b)
         return aDate >= bDate
      }
   }

   this._filters_ready()

};

// parse a date in mm/dd/yyyy format
function parseDate(input) {
   var parts = input.split('/');

   // new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
   return new Date(parts[2], parts[0]-1, parts[1]).getTime(); // Date format MM/DD/YYY
}

function getChildElement(element,id) {

   for (i=0;i<element.childNodes.length;i++)
   {
      if (element.childNodes[i].id == id)
         return element.childNodes[i];
   }

   return null
}

Web Development