How to Table Edit using jquery ajax Python Flask and PostgreSQL Database

Learn how to Table Edit using jquery ajax Python Flask and PostgreSQL Database

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 programming ORDER BY id ASC")
    topphpframework = cur.fetchall() 
    return render_template('index.html', topphpframework=topphpframework)
      
@app.route("/ajax",methods=["POST","GET"])
def ajax():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)    
    if request.method == 'POST':
        getid = request.form['id']
        getname = request.form['name']
        print(getid)
        cur.execute("UPDATE programming SET title = %s WHERE id = %s ", [getname, getid])
        conn.commit()       
        cur.close()
    return jsonify('Record updated successfully')
 
if __name__ == "__main__":
    app.run(debug=True)

templates/index.html


//templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Edit using jquery ajax Python Flask and PostgreSQL Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".edit_tr").click(function() {
    var ID=$(this).attr('id');
    $("#first_"+ID).hide();
    $("#first_input_"+ID).show();
  }).change(function(){
      var ID=$(this).attr('id');
      var first=$("#first_input_"+ID).val();
      var dataString = 'id='+ ID +'&name='+first;
      $("#first_"+ID).html('<img src="/staticf/img/loader.gif" />');
      if(first.length>0){
        $.ajax({
          type: "POST",
          url: "/ajax",
          data: dataString,
          cache: false,
          success: function(html)
          {
            $("#first_"+ID).html(first);
          }
        });
      }else{
        alert('Enter something.');
      }
  });
     
  $(".editbox").mouseup(function() {
   return false
  });
  $(document).mouseup(function() {
      $(".editbox").hide();
      $(".text").show();
  });
});
</script>
</head>
<body>
<center><p><h1>Table Edit using jquery ajax Python Flask and PostgreSQL Database</h1></p></center>
<div style="margin:0 auto; width:350px; padding:10px; background-color:#fff;"> 
<table width="100%" border="0">
  <tr class="head">
  <th>Frameworks</th>
  </tr>
  {% for row in topphpframework %}
      <tr id="{{row.id}}" bgcolor="#f2f2f2" class="edit_tr">
        <td width="50%" class="edit_td">
        <span id="first_{{row.id}}" class="text">{{row.title}}</span>
        <input type="text" name="name" value="{{row.title}}" class="editbox" id="first_input_{{row.id}}" />
        </td>
      </tr>
    {% endfor %}
</table>
</div>
<style>
  body
  {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  }
  .head
  {
  background-color:#333;
  color:#FFFFFF
  }
  .edit_tr:hover
  {
  background:url(/static/img/edit.png) right no-repeat #80C8E5;
  cursor:pointer;
  }
  .editbox
  {
  display:none
  }
  .editbox
  {
  font-size:16px;
  width:270px;
  background-color:#ffffcc;
  border:solid 1px #000;
  padding:4px;
  }
  td
  {
  padding:10px;
  }
  th
  {
  font-weight:bold;
  text-align:left;
  padding:4px;
  }
  </style>
</body>
</html>


#python #postgresql

What is GEEK

Buddha Community

How to Table Edit using jquery ajax Python Flask and PostgreSQL Database

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • Create Database And Table
  • Create a Database Connection File
  • Create An Ajax POST Form in PHP
  • Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

Display Popups Data on Mouse Hover Using Jquery Ajax and Python Flask PostgreSQL Database

Learn how to display popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

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 employee ORDER BY id ASC")
    employeelist = cur.fetchall()
    return render_template('index.html', employeelist=employeelist)
  
@app.route("/fetchdata",methods=["POST","GET"])
def fetchdata():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    if request.method == 'POST':
        id = request.form['id']
        cur.execute("SELECT * FROM employee WHERE id = %s", [id])
        rs = cur.fetchone() 
        name = rs['name']
        photo = rs['photo']
        position = rs['position']
        office = rs['office']
        print(photo)
    return jsonify({'htmlresponse': render_template('response.html', name=name, photo=photo, position=position, office=office)})
 
if __name__ == "__main__":
    app.run(debug=True)

templates/index.html


//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Display Popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>  
<div class="container">
   <br />
   <h3 align="center">Display Popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database </a></h3><br />
   <br />
   <div class="row">
    <div class="col-md-12">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th width="60">Photo</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Salary</th>
                        </tr>
                        </thead> 
                        {% for row in employeelist %}
                            <tr>
                                <td><a href="#" id="{{row.id}}" title=" "><img src="/static/images/{{row.photo}}" height="50" width="50"/></a></td>
                                <td>{{row.name}}</td>
                                <td>{{row.position}}</td>
                                <td>{{row.office}}</td>
                                <td>{{row.age}}</td>
                                <td>{{row.salary}}</td>
                            </tr>
                        {% endfor %} 
                </table>
            </div>
      </div>
     </div>
    </div>
  </div>
<script>  
$(document).ready(function(){ 
    $('a').tooltip({
        classes:{
            "ui-tooltip":"highlight"
        },
        position:{ my:'left center', at:'right+50 center'},
        content:function(result){
            $.post('/fetchdata', {
                id:$(this).attr('id')
            }, function(data){
                result(data.htmlresponse);
                  
            });
        }
    });
});  
</script>
</body>  
</html>


templates/response.html


//templates/response.html
<p align="center"><img src="/static/images/{{photo}}" class="img-thumbnail" /></p>
<p>Name : {{ name }}</p>
<p>Position : {{ position }}</p>
<p>Office : {{ office }}</p>

#python #jquery #flask #postgresql

Ray  Patel

Ray Patel

1619510796

Lambda, Map, Filter functions in python

Welcome to my Blog, In this article, we will learn python lambda function, Map function, and filter function.

Lambda function in python: Lambda is a one line anonymous function and lambda takes any number of arguments but can only have one expression and python lambda syntax is

Syntax: x = lambda arguments : expression

Now i will show you some python lambda function examples:

#python #anonymous function python #filter function in python #lambda #lambda python 3 #map python #python filter #python filter lambda #python lambda #python lambda examples #python map

Shardul Bhatt

Shardul Bhatt

1626775355

Why use Python for Software Development

No programming language is pretty much as diverse as Python. It enables building cutting edge applications effortlessly. Developers are as yet investigating the full capability of end-to-end Python development services in various areas. 

By areas, we mean FinTech, HealthTech, InsureTech, Cybersecurity, and that's just the beginning. These are New Economy areas, and Python has the ability to serve every one of them. The vast majority of them require massive computational abilities. Python's code is dynamic and powerful - equipped for taking care of the heavy traffic and substantial algorithmic capacities. 

Programming advancement is multidimensional today. Endeavor programming requires an intelligent application with AI and ML capacities. Shopper based applications require information examination to convey a superior client experience. Netflix, Trello, and Amazon are genuine instances of such applications. Python assists with building them effortlessly. 

5 Reasons to Utilize Python for Programming Web Apps 

Python can do such numerous things that developers can't discover enough reasons to admire it. Python application development isn't restricted to web and enterprise applications. It is exceptionally adaptable and superb for a wide range of uses.

Robust frameworks 

Python is known for its tools and frameworks. There's a structure for everything. Django is helpful for building web applications, venture applications, logical applications, and mathematical processing. Flask is another web improvement framework with no conditions. 

Web2Py, CherryPy, and Falcon offer incredible capabilities to customize Python development services. A large portion of them are open-source frameworks that allow quick turn of events. 

Simple to read and compose 

Python has an improved sentence structure - one that is like the English language. New engineers for Python can undoubtedly understand where they stand in the development process. The simplicity of composing allows quick application building. 

The motivation behind building Python, as said by its maker Guido Van Rossum, was to empower even beginner engineers to comprehend the programming language. The simple coding likewise permits developers to roll out speedy improvements without getting confused by pointless subtleties. 

Utilized by the best 

Alright - Python isn't simply one more programming language. It should have something, which is the reason the business giants use it. Furthermore, that too for different purposes. Developers at Google use Python to assemble framework organization systems, parallel information pusher, code audit, testing and QA, and substantially more. Netflix utilizes Python web development services for its recommendation algorithm and media player. 

Massive community support 

Python has a steadily developing community that offers enormous help. From amateurs to specialists, there's everybody. There are a lot of instructional exercises, documentation, and guides accessible for Python web development solutions. 

Today, numerous universities start with Python, adding to the quantity of individuals in the community. Frequently, Python designers team up on various tasks and help each other with algorithmic, utilitarian, and application critical thinking. 

Progressive applications 

Python is the greatest supporter of data science, Machine Learning, and Artificial Intelligence at any enterprise software development company. Its utilization cases in cutting edge applications are the most compelling motivation for its prosperity. Python is the second most well known tool after R for data analytics.

The simplicity of getting sorted out, overseeing, and visualizing information through unique libraries makes it ideal for data based applications. TensorFlow for neural networks and OpenCV for computer vision are two of Python's most well known use cases for Machine learning applications.

Summary

Thinking about the advances in programming and innovation, Python is a YES for an assorted scope of utilizations. Game development, web application development services, GUI advancement, ML and AI improvement, Enterprise and customer applications - every one of them uses Python to its full potential. 

The disadvantages of Python web improvement arrangements are regularly disregarded by developers and organizations because of the advantages it gives. They focus on quality over speed and performance over blunders. That is the reason it's a good idea to utilize Python for building the applications of the future.

#python development services #python development company #python app development #python development #python in web development #python software development