PHP Ajax Update MySQL Data Through Bootstrap Modal

PHP Ajax Update MySQL Data Through Bootstrap Modal

48 thoughts on “PHP Ajax Update MySQL Data Through Bootstrap Modal

  1. How the fuck is anyone meant to follow this. Can you not make the videos without the retarded robot talking?

  2. Hello… thanks for a very wonderful tutorial… but i just have a quick query? i am trying to integrate this to my project but why i can not edit? can you please help me?

  3. Fantastic. Thanks very much for such a detailed and superb example of bootstrap, php using modal window. Exactly what I was looking for. Clear and concise although robotic voice sounds a bit dodgy but you get used to it

  4. Men i need to fix the update and add function same as the problem of others. When we first update then add it just updated the last data we updated. Please help ASAP.

  5. 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?

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

  7. 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.

  8. '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

  9. // 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

  10. 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 😉

  11. 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.

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

  13. 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

  14. 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.

  15. 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?!

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

  17. 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

  18. 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.

  19. 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

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

  21. 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?!

  22. 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.

  23. 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

Leave a Reply

Your email address will not be published. Required fields are marked *