Sunday, April 21, 2019

Creative code : jQuery Ajax X-editable bootstrap plugin to update records in PHP Example

X-editable is jquery powerful plugin and it's allows you to create editable elements on your page using jquery ajax. X-editable library you can use with only bootstrap, jquery-ui and jquery. X-editable provide us edit inline element using text box, textarea, select, date, datetime, dateui, wysihtml5, select2, typeahead etc. X-editable plugin also provide client side validation. X-editable is giving you good layout if you are using with bootstrap. In this example we will use X-editable with bootstrap plugin.
In this post, i will share with you how to update records using jquery ajax with PHP MySQL. We will create "users" table and display "users" table records. we can simply modify that records using X-editable plugin. It seems little bit complected but it's more amazing.
So you have to simple follow few step to do this, after you will get bellow preview:


CREATE TABLE `users` (



  `id` int(10) UNSIGNED NOT NULL,



  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,



  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


<?php







define (DB_USER, "root");



define (DB_PASSWORD, "root");



define (DB_DATABASE, "test");



define (DB_HOST, "localhost");







$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?> 



<!DOCTYPE html>



<html>



<head>



    <title>jQuery Ajax X-editable bootstrap plugin to update records in PHP Example</title>







    <!-- Latest compiled and minified CSS -->



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>



    <link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>







</head>



<body>







<div class="container">



    <h3>jQuery Ajax X-editable bootstrap plugin to update records in PHP Example</h3>



    <table class="table table-bordered">



        <tr>



            <th>Name</th>



            <th>Email</th>



            <th width="100px">Action</th>



        </tr>







        <?php



        require('config.php');







        $sql = "SELECT * FROM users";



        $users = $mysqli->query($sql);







        while($user = $users->fetch_assoc()){



        ?>



            <tr>



                <td><a href="" class="update" data-name="name" data-type="text" data-pk="<?php echo $user['id'] ?>" data-title="Enter name"><?php echo $user['name'] ?></a></td>



                <td><a href="" class="update" data-name="email" data-type="email" data-pk="<?php echo $user['id'] ?>" data-title="Enter email"><?php echo $user['email'] ?></a></td>



                <td><button class="btn btn-danger btn-sm">Delete</button></td>



            </tr>



        <?php } ?>



    </table>



</div> <!-- container / end -->







</body>



<script type="text/javascript">



    $('.update').editable({



           url: '/update.php',



           type: 'text',



           pk: 1,



           name: 'name',



           title: 'Enter name'



    });



</script>



</html>



<?php







require('config.php');







if(isset($_POST)){



 $sql = "UPDATE users SET ".$_POST['name']."='".$_POST['value']."' WHERE id=".$_POST['pk'];



 $mysqli->query($sql);



 echo 'Updated successfully.';



}







?>

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)