D4mations.com

PHP Ajax Update MySQL Data Through Bootstrap Modal



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

d4mer

, , , , ,

42 responses to “PHP Ajax Update MySQL Data Through Bootstrap Modal”

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

  5. 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. '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. // 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. 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 😉

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

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

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

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

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