Jquery drag and drop save to database php

Jquery drag and drop save to database php

jquery drag and drop save to database php : -

In this post you learn how to change order of row in view table and save it to database by using jquery,jquery ui and php mysql.

create database phpcooker_script and import this



--
-- Database: `phpcooker_script`
--

-- --------------------------------------------------------

--
-- Table structure for table `position`
--

CREATE TABLE IF NOT EXISTS `position` (
  `position_id` int(10) NOT NULL AUTO_INCREMENT,
  `position_title` varchar(120) NOT NULL,
  `position_description` text NOT NULL,
  `position_order` int(11) NOT NULL,
  `position_status` enum('0','1') NOT NULL,
  PRIMARY KEY (`position_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `position`
--

INSERT INTO `position` (`position_id`, `position_title`, `position_description`, `position_order`, `position_status`) VALUES
(1, 'What is PHP ', 'is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML', 6, '1'),
(2, 'What is C ', 'C is a computer programming language. That means that you can use C to create lists of instructions for a computer to follow', 2, '1'),
(3, 'What is c++ ', 'C++ is a general-purpose object-oriented programming (OOP) language, developed by Bjarne Stroustrup, and is an extension of the C language', 4, '1'),
(4, 'What is java ', 'Java is a programming language and computing platform first released by Sun Microsystems in 1995.', 3, '1'),
(5, 'What is javascript ', 'Javascript is a dynamic computer programming language. It is lightweight and most commonly used', 1, '1'),
(6, 'What is HTML ', 'HTML is the standard markup language for creating Web pages.', 5, '1');

creat index.php



<?php 
include"dbclass.php";
$db = new db();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery drag and drop save to database php</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <script>
  $(function() {
    $( ".row_position" ).sortable({
        delay: 150,
        change: function() {
    var selectedLanguage = new Array();
    $('.row_position>tr').each(function() {
    selectedLanguage.push($(this).attr("id"));
    });
    document.getElementById("row_order").value = selectedLanguage;
    }
    });
  });
  
  function save() { 
    var data = new Array();
    $('.row_position tr').each(function() {
       data.push($(this).attr("id"));
    });
    
    $.ajax({
        url:"ajax.php",
        type:'post',
        data:{position:data},
        success:function(){
            alert('your change successfully saved');
        }
    })
  }
  </script>
  <style>
  .row_position{
  cursor:move
  }
  </style>
  
</head>
<body>

<div class="container">   
<h1>Jquery drag and drop save to database php</h1>    
  <table class="table">
    <thead>
      <tr>
        <th>SN</th>
        <th>Language</th>
        <th>Definition</th>
      </tr>
    </thead>
    <tbody class="row_position" >
    <?php 
     $data_lists = $db->select('position',"order by position_order asc");
     foreach($data_lists as $data_list){
    ?>
      <tr id="<?php echo $data_list['position_id']; ?>" >
        <td  ><?php echo $data_list['position_id']; ?></td>
        <td><?php echo $data_list['position_title']; ?></td>
        <td><?php echo $data_list['position_description']; ?></td>
      </tr>
     <?php } ?>
    </tbody>
  </table>
</div>
<div style="text-align:center;" >  
<input type="submit" class="btn btn-primary"   onClick="save();" />
</div>

</body>
</html>

ajax.php


<?php 
include"dbclass.php";
$db = new db();
$position = $_POST['position'];
$i=1;
foreach($position as $k=>$v){
    $data = array(
        "position_order"=>$i
    );
    
    $db->update("position",$data,"where position_id='".$v."'");
    
    $i++;
}

?>

download full code from here  smileysmileysmileysmiley 

Demo

Download Hare

Total Coments (0)