Creating Dynamic Drag and Drop Ordered Lists with jQuery Ajax and Python Flask

Creating Dynamic Drag and Drop Ordered Lists with jQuery Ajax and Python Flask

In this video show you how to Create Dynamic Drag and Drop Order List with jQuery Ajax and Python Flask

In this video show you how to Create Dynamic Drag and Drop Order List with jQuery Ajax and Python Flask

Subscribe: https://www.youtube.com/c/Cairocoders/featured

Source Code

app.py


#app.py
from flask import Flask, render_template, request, jsonify
import psycopg2 #pip install psycopg2 
import psycopg2.extras

app = Flask(__name__)

app.secret_key = "caircocoders-ednalan"

DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"

conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)

@app.route('/')
def index():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur.execute("SELECT * FROM dragdrop ORDER BY listorder ASC")
    dragdrop = cur.fetchall() 
    return render_template('index.html', dragdrop=dragdrop)

@app.route("/updateList",methods=["POST","GET"])
def updateList():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    if request.method == 'POST':
        cur.execute("SELECT * FROM dragdrop")    
        number_of_rows = cur.rowcount      
        getorder = request.form['order']    
        print(getorder)
        order = getorder.split(",", number_of_rows)
        print(order)
        count=0  
        for value in order:
            count +=1
            print(count)                       
            cur.execute("UPDATE dragdrop SET listorder = %s WHERE id = %s ", [count, value])
            conn.commit()       
        cur.close()
    return jsonify('Successfully Updated')

if __name__ == "__main__":
    app.run(debug=True)

templates/index.html


//templates/index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Drag and Drop Order List With jQuery Ajax and Python Flask PostgreSQL Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   function slideout(){
    setTimeout(function(){
      $("#response").slideUp("slow", function () {
    });
    }, 2000);
  }

  $("#response").hide();
  $(function() {
    $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
      var item_order = new Array();
      $('ul.reorder li').each(function() {
          item_order.push($(this).attr("id"));
      }); 
      var order_string = 'order='+item_order;
      $.ajax({
        method: "POST",
        url: "/updateList",
        data: order_string,
        cache: false,
        success: function(data){    
            $("#response").html(data);
            $("#response").slideDown('slow');
            slideout();
        }
    });               
    }         
    });
   });

}); 
</script>
</head>
<body>
<center>  
<p><h1>Dynamic Drag and Drop Order List With jQuery Ajax and Python Flask PostgreSQL Database</h1></p>
<div style="width:300px;">
  <div id="list">
  <div id="response"> </div>
      <ul class="reorder">
        {% for row in dragdrop %}
        <li id="{{row.id}}">{{row.text}}
          <div class="clear"></div>
        </li>
        {% endfor %}
      </ul>
  </div>
</div>
</center>

<style>
ul {
 padding:0px;
 margin: 0px;
}
#response {
 padding:10px;
 background-color:#9F9;
 border:2px solid #396;
 margin-bottom:20px;
}
#list li {
 margin: 0 0 3px;
 padding:8px;text-align:left;
 background-color:#00CCCC;
 color:#fff;
 list-style: none;
 border: #CCCCCC solid 1px;
}
</style>
</body>
</html>

python jquery

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

top 30 Python Tips and Tricks for Beginners

In this post, we'll learn top 30 Python Tips and Tricks for Beginners

Lambda, Map, Filter functions in python

You can learn how to use Lambda,Map,Filter function in python with Advance code examples. Please read this article

Python Tricks Every Developer Should Know

In this tutorial, you’re going to learn a variety of Python tricks that you can use to write your Python code in a more readable and efficient way like a pro.

How to Remove all Duplicate Files on your Drive via Python

Today you're going to learn how to use Python programming in a way that can ultimately save a lot of space on your drive by removing all the duplicates. We gonna use Python OS remove( ) method to remove the duplicates on our drive. Well, that's simple you just call remove ( ) with a parameter of the name of the file you wanna remove done.

Basic Data Types in Python | Python Web Development For Beginners

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.