How to make the edit modal using ajax and php

Question

Im having problem when implementing edit function where I can edit the role of the user

Here is the button that will open the modal

<button type="button" id="edit" name="edit" class="btn btn-outline-warning" data-id="'.$row["id"].'">EDIT</button>

Here is the modal code

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="">
          <div class="form-group">
            <label for="userName" class="col-form-label">Username:</label>
            <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">
          </div>
          <div class="form-group">
            <label for="user_type" class="col-form-label">User Type:</label>
            <select class="form-control border-success" id="user_type">
            <option value="user">User</option>
            <option value="contributor">Contributor</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <input type="hidden" id="user_id" name="user_id">
        <button type="submit" id="update" name="update" class="btn btn-success">Update</button>
        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Ajax

$(document).on('click', '#edit', function(){
var user_id = $(this).attr("data-id");
$.ajax({
    url:"/auth/action",
    method:"POST",
    data:{user_id:user_id},
    dataType:"json",
    success:function(data)
    {
        $('#editModal').modal('show');
        $('#userName').val(data.userName);
        $('#user_type').val(data.user_type);
        $('#user_id').val(user_id);
    }
})
  });

PHP where the action happens

if($_POST["action"] == 'update')
{
    $query = 'UPDATE `users` SET username = :username, user_type = :user_type WHERE id = :id';
    $statement = $connect->prepare($query);
    $statement->execute(
        array(
            ':id'              => $_POST['user_id'],
            ':username'              => $_POST['userName'],
            ':user_type'              => $_POST['user_type']
        )
    );
    $result = $statement->fetchAll();
    if(isset($result))
    {
        echo '<div class="alert alert-fill-warning" role="alert">User type changed!<div>';
    }
}

and also I have a function for fetch which I named it load_user_data()

Here is the for the datatype json

    if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connect->prepare(
        "SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    foreach($result as $row)
    {
        $output["userName"] = $row["username"];
        $output["user_type"] = $row["user_type"];
    }
    echo json_encode($output);
}

The problem Im having is that the PHP action code is not working or is there anything wrong with my code? but I dont have probelm with displaying the data in the modal except if i submit the change there is no function happening

`$_POST["action"]` where you define this field in your form? — devpro, Sep 06 '19 at 15:23
data:{user_id:user_id}, => data:{action:'update', user_id:user_id}, along with user id may be you want to sent other data to backend — Surace, Sep 06 '19 at 15:24
even you are not sending data in ajax request here `data:{user_id:user_id},` — devpro, Sep 06 '19 at 15:24
@devpro It's a little confusing the way OP has the code laid out, but I'm pretty sure the ajax request being shown is what is _fetching_ the user data, which OP says is working. I'm pretty sure it is the submit of the form in the modal where OP is having trouble. That being said, there still isn't an `action` input in that form. — Patrick Q, Sep 06 '19 at 15:37

failedCoder · Answer 1 · 2019-09-06T15:33:40.393

0

Your ajax data property is missing a lot of parametars:

 ....ajax....
 data: {user_id: user_id, userName: username here,user_type:set type here, action: 'update'}

You need to add edit id to your update button

Also you need to add userdata to your ajax response, currently you are using data.userName etc. but you didnt put that in the response

You can find more info on how to properly return json response here: Returning JSON from a PHP Script

edited Sep 06 '19 at 15:33

answered Sep 06 '19 at 15:25

failedCoder

1,346
1
14
38

when i add those it hangs my page is there anything wrong i did? – Cont Cortez Sep 06 '19 at 16:12
@ContCortez What do you mean by hangs? – failedCoder Sep 06 '19 at 16:14
Uncaught RangeError: Maximum call stack size exceeded i got this console error – Cont Cortez Sep 06 '19 at 16:16
`{user_id:user_id, action:'update'}` i tried this it runs the action in my php but how do i fetch the username and user_type? and also it doesnt show the modal but it shows it works in network tab – Cont Cortez Sep 06 '19 at 16:19
Edit: I replace the modal show in top but the problem when i click `edit` to show modal it runs the ajax how do i make function if i press `update` in modal it will run the ajax there – Cont Cortez Sep 06 '19 at 16:27
Put ajax in $(document).on('click', '#update, function() {});... event handler – failedCoder Sep 09 '19 at 08:07

score 0 · Answer 2 · answered Sep 06 '19 at 15:42

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action=""> 
          <div class="appenddata">
          </div> 
        </form>
      </div>
      <div class="modal-footer"> 
        <button type="submit" id="update" name="update" class="btn btn-success">Update</button>
        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).on('click', '#edit', function(){
$('#editModal').modal('show');
var user_id = $(this).attr("data-id");
$.ajax({
    url:"/auth/action",
    method:"POST",
    data:{user_id:user_id},
    success:function(data)
    {
        $(".appenddata)".html(data);
    }
})
});
</script>
<?php
   if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connect->prepare(
        "SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    $user_array=array("user","contributor");
    ?>
    <input type="hidden" id="user_id" name="user_id" value="<?= $_POST["user_id"]; ?>">
      <div class="form-group">
            <label for="userName" class="col-form-label">Username:</label>
            <input type="text" class="form-control border-danger" id="userName" value="<?=  $result[0]['username']; ?>" readonly style="background-color: #2A3038">
          </div>
          <div class="form-group">
            <label for="user_type" class="col-form-label">User Type:</label>
            <select class="form-control border-success" id="user_type">
            <?php
             if($user_array!=NULL)
             {
                 foreach($user_array as $data)
                 {
                     if($data==$result[0]['username'])
                     {
                         $selected='selected="selected"';
                     }
                     else
                     {
                         $selected='';
                     }
                     ?>
                      <option value="<?= $data; ?>"><?= ucwords($data); ?></option>
                     <?php
                 }
             }
             ?> 
            </select>
          </div>
    <?php
}

How to make the edit modal using ajax and php

2 Answers2