• Wednesday , 21 November 2018

PHP Ajax Update MySQL Data Through Bootstrap Modal

Code Canyon



How to update mysql data through a Bootstrap modal by using PHP with Ajax JQuery. Bootstrap modal With Edit data in Php Mysql and Ajax. PHP MySQL …

Original source

3d Ocean

Related Posts

42 Comments

  1. Cabal Wizz
    November 11, 2018 at 06:24

    i need the video how u make the database

  2. westfield90
    November 11, 2018 at 06:24

    Does anyone know how you can change the modal header title to show the name of the employee whose data you are editing. I just can’t figure out how to get the name from Json and display it in the H3 html tag?

  3. westfield90
    November 11, 2018 at 06:24

    So I've figured out the answers to my previous two posts so please ignore them

  4. westfield90
    November 11, 2018 at 06:24

    This doesn't work with bootstrap 4x and JQuery 3x. Does anyone know how to make it work with those newer files?

  5. westfield90
    November 11, 2018 at 06:24

    This is an excellent tutorial. But trying to adapt it to my table is maddening since there are too many uses of the 'id' tag. Each data field in a form as an id tag. Then you have 'id' as the column name in the database and then you have a variable called 'employee_id'. In my case my database column is 'form_id' and trying determine which of your fields should be changed to my name is difficult since you have two uses of the 'id' term. I've tired but all it does when I click the edit button is that it inserts a new record and never edits the record. So obviously I'm missing something where the id should have been left as id.

  6. Gilang Prasetyo
    November 11, 2018 at 06:24

    'thank you for your explain about update, but i found the little problem when show alert "Data Inserted" become "Data Updated", you should add variable '$message' in between tag button alert.
    <div class="alert alert-success" role="alert">
    '.$message.'<i class="fa fa-check" aria-hidden="true"></i>
    </div>
    thank you, i am from indonesian

  7. Wish Mishra
    November 11, 2018 at 06:24

    // INDEX.PHP //

    <script>
    $(document).ready(function(){
    $(document).on('click', '.edit_data', function(){
    var employee_id=$(this).attr("id");
    $.ajax({
    url:"update.php",
    method: "post",
    data:{employee_id:employee_id},
    dataType:"json",
    success:function(data){
    $('#name').val(data.name);
    $('#price').val(data.price);
    $('#file2').val(data.file2);
    $('#desc').val(data.desc);
    $('#insert').val("update");
    $('#add_data_modal').model('show');
    }
    });
    )};
    )};
    </script>
    <div id="add_data_modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!– Modal content–>
    <div class="modal-content">
    <div class="modal-header text-center">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
    <form enctype="multipart/form-data">
    <div class="col-md-6" style="float:left; padding-top:11px;">
    <center>
    <input type="text" id="name" value="<?=$row_fetch_edit['name'];?>" style="border:1px solid #CCCCCC; background:#F7F7F7; border-radius:2px; width:100%;" />
    </center>
    <br />
    <center>
    <input type="text" id="price" value="<?=$row_fetch_edit['price'];?>" style="border:1px solid #CCCCCC; background:#F7F7F7; border-radius:2px; width:100%;" />
    </center>
    <br />

    <center><input type="file" id="file2" value="<?=$row_fetch_edit['file2'];?>" style="border:1px solid #CCCCCC; background:#F7F7F7; border-radius:2px; width:100%;" /></center><br />

    </div>
    <div class="col-md-6" style="float:right;">
    <center>
    <textarea id="desc" id="demo-editor-bootstrap" style="border:1px solid #CCCCCC; background:#F7F7F7; width:100%; height:200px;" data-role="editor-toolbar" data-target="#editor">value="<?=$row_fetch_edit['desc'];?>"</textarea>

    </center>
    </div>
    <div class="clearfix"></div>
    <center>
    <input type="hidden" id="employee_id" />
    <input type="submit" id="insert" class="btn btn-success" value="Update Product" />
    </center><br />
    </form>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>

    </div>
    </div>

    // UPDATE.PHP //
    <?php
    if(isset($_POST["employee_id"]))
    {
    $sql_edit="SELECT * FROM `product` WHERE `id`='".$_POST["employee_id"]."'";
    $rs_chk_edit=execute_query($sql_edit);
    $row_fetch_edit=mysql_fetch_array($rs_chk_edit);
    echo json_encode($row_fetch_edit);
    }
    ?>

    THIS IS MY CODE BUT NOT WORKING FOR FETCH DATA IN FORM FIELD TO UPDATE INFORMATION

  8. Philippos Manetas
    November 11, 2018 at 06:24

    Hello @weblesson, thank you for these videos 😉 I want to point out a bug in your code. After clicking "Update" button in the popup update form, it refreshes the page instead of using ajax's success callback function. To fix this, you need to change button's input type from "submit" to "button" & javascript

    from: $('#insert_form').on("submit", function(event){
    TO $('#insert').on("click", function(event){

    i don't know why, but the preventDefault's function call didn't work and i needed to make the above adjustments.

    again, thank you for your tutorials 😉

  9. Mohamed Ameur Mahoichi
    November 11, 2018 at 06:24

    hello my friends. i had copied all the code above but unfaithefully the two buttons won't work.
    (the modal does n't appears, i copied the scripts)
    please help me to solve it. thanks alot.

  10. Arbab Khan
    November 11, 2018 at 06:24

    +webslesson how can i add data table for this project where can i make changes for this?

  11. Winston Simon
    November 11, 2018 at 06:24

    anyone can help me with this problem. because i want to edit some data with the corresponding image or file. thanks a lot

  12. ilive Safi
    November 11, 2018 at 06:24

    hey. this is a very good work. thanks a lot. but, can you show us how we can add a picture with all the employee database… and show all in the modal. im not able to do it… thanks

  13. sanket kumar
    November 11, 2018 at 06:24

    Can you please share the source code
    sanket9721kumar@gmail.com

  14. Johncarlo Palaming
    November 11, 2018 at 06:24

    No delete tutorial?

  15. Sabay Daily
    November 11, 2018 at 06:24

    can you make video for import data only php for me.

  16. Sinan TÜRK
    November 11, 2018 at 06:24

    hello i am coding market system but i always detect topmost how do i update

  17. Nandalal S
    November 11, 2018 at 06:24

    Hi Sir Thankyou Very much …… Here i noticed in the database table called "tbl_employee" you already created the "image" field. But you never using it for this CRUD process. Will you please update that image upload section too in this module.

  18. Khann Sothea
    November 11, 2018 at 06:24

    thank bro it now it work

  19. Khann Sothea
    November 11, 2018 at 06:24

    it error to me. when i run the program it works,but when i "edit" my data and it works fine but when i click "add" after editing, the details i add just upgrading the last data i edit. what seems to be the problem?!

  20. Shraddha Tapase
    November 11, 2018 at 06:24

    Add delete code in this tutorial

  21. Rich Williams
    November 11, 2018 at 06:24

    very detailed but tbf just use 1 input so i can get an idea what your doing…. to much info to take in…

  22. Shah Alam
    November 11, 2018 at 06:24

    I have used this table<table class="table table-striped table-bordered table-hover" id="dataTables-example">
    But search option not work after data update.
    if refresh then work well

  23. Tan Dat
    November 11, 2018 at 06:24

    Thank You. it works for me

  24. Mujahid Sac
    November 11, 2018 at 06:24

    I followed your tutorial even copied the script, changed it a little to suite my database and table, but when clicking the edit button, the dialog is empty. Why is that? Please help.

  25. hamza mughal
    November 11, 2018 at 06:24

    Hello !
    I have an issue that when i click on edit button the data is filled in all rows correctly but when after clicking on edit button when i click on add button then my add_data_Modal fields also contains that data !
    Means that my add button also behave like edit button !!!
    Kindly reply fast plzzzz

  26. Mark Joseph Sulla
    November 11, 2018 at 06:24

    hi can u make a tutorial CRUD data with IMAGE through modal using php, please thankss

  27. Chester Ingco
    November 11, 2018 at 06:24

    please help, when i click the button, the modal is not showing.. i don't know what causes the problem.

  28. Rahad Mannan
    November 11, 2018 at 06:24

    would you plz give the delete code with this tutorial source code

  29. jan jaime aringoy
    November 11, 2018 at 06:24

    naay source code ani
    ?

  30. Mind Revenge
    November 11, 2018 at 06:24

    Hi, when i click on "edit" button, nothing happen. Any ideia?
    great video btw.

  31. Hardik Chaturvedi
    November 11, 2018 at 06:24

    sir please tell when I update a row only first row is updating

  32. Joanna Marie Reyes
    November 11, 2018 at 06:24

    it has a lil bit of error to me. when i run the program it works fine, i "edit" my data and it works fine but when i click "add" after editing, the details i add just upgrading the last data i edit. what seems to be the problem?!

  33. GA Foundation Limited
    November 11, 2018 at 06:24

    dear bro, this tutorial is not work. when i run it

  34. Luis Manjarres
    November 11, 2018 at 06:24

    help me please, I want the registration form to be different from the update form

  35. Tuco
    November 11, 2018 at 06:24

    Excelente tutorial! Parabéns! Congrats!

  36. David Mukoro
    November 11, 2018 at 06:24

    This is awesome!. However, you did not show any Delete. Recall it is CRUD. What about the D in the CRUD?. We will appreciate the tutorial as well.

  37. Diamond nd
    November 11, 2018 at 06:24

    can u give me the code for 'delete data'?? it would be great ..

    And amazing job Weblesson!!

  38. erlin navarrete
    November 11, 2018 at 06:24

    I need help, in
    my database I have a column named Names and accept special characters of
    the Spanish language, such as ñ, ü, é, á, í, ó, ú, however when I click
    on edit the form does not load. It seems that #Json does not accept special characters

  39. Kong kimha
    November 11, 2018 at 06:24

    you can show delete file row , i can't delete

  40. Numan Bashir
    November 11, 2018 at 06:24

    Sir on view i also want to load image in modal from database
    can you purpose me a sloution????

  41. Mary Lee
    November 11, 2018 at 06:24

    How To Prevent Modal From Closing After Clicking a Submit Button ? ..

  42. Murali L
    November 11, 2018 at 06:24

    Thank You Sir………………….

Leave A Comment

You must be logged in to post a comment.