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/

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
   }