0

I can not seem to receive the json response when i make an ajax request to my php file;

I have tried to send ajax request and receive json response.

My Javascript:

$(".edit_data").click(function(){

            var id= $(this).attr("id");
            alert(id);
            $.ajax({
                url: "edit.php",
                type: "POST",
                data: {edit_id: id},
                dataType: "jsonp",
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    var title=data.title;
                    var body=data.body;
                    $("#mtitle").val(data.title);
                    $("#msummernote").val(data.body);

                }

            });
            alert('t'.title);
            alert('b'.body);
            alert('hey');
            $('#myModal').modal('show'); 
        });

the alert for title and body says they are undefined and my edit.php:

<?php

   include 'db_connect.php';
   $id= $_POST['edit_id'];

   $stmt= "SELECT * FROM blog WHERE id=".$id;

   $result= $conn->query($stmt);

   $rows = $result->fetch_assoc();
   echo json_encode($rows);
?>

in my html i have a table like this:

    <table class="table-striped" style="width:80%">

                <tr>
                    <th>Title</th>
                    <th>Author</th>
                </tr>


                    <?php
                        while($rows = $result->fetch_assoc())
                        {
                    ?>
                <tr>

                    <td><?php echo $rows['title']?></td>
                    <td><?php echo $rows['uname']?></td>
                    <td><button name="edit" id="<?php echo $rows['id']; ?>" type="button" class=" edit_data btn btn-warning" >Edit  </button></td>
                    <td><button name="delete" id="<?php echo $rows["id"]; ?>" class="btn btn-danger">Delete</button></td>

                </tr>

                    <?php
                        }
                    ?>


            </table>


and the bootstrap modal i am trying to populate:




    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">Edit Post</h4>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
    <form method="post" id="insert_form">
        <label> Title: </label>
        <input name="mtitle" class="form-control" type="text" required placeholder="Title"/>
        <br><br>
        <label> Header Image: </label>
        <input class="form-control" type="file" name="file" id="file"><br><br>
        <label> Body: </label>
        <textarea name="content" id="msummernote"></textarea>

        <button class="btn btn-primary" name="submit"> Submit </button>

    </form>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    </div>

  </div>
</div>



I am trying to populate the field with id mtitle with the title i receive from  the json and the field with id msummernote with the body i recieve from the json
t.niese
  • 39,256
  • 9
  • 74
  • 101
Abdulaziz Yesuf
  • 582
  • 1
  • 6
  • 15
  • 1
    `'t'` and `'b'` are strings and none of them has the properties `title` or `body`. Why do you expect that they should have those properties? It is not really clear what you try to do there. – t.niese Aug 03 '19 at 15:20
  • 1
    And $.ajax is asynchronous. You can't eat a pizza before it is delivered. Use your browser dev tools console to check for errors and note those errors when asking questions – charlietfl Aug 03 '19 at 15:21
  • so any other way i can work with ajax – Abdulaziz Yesuf Aug 03 '19 at 15:25
  • Fix those alert errors and move them inside success. Then inspect the actual request in browser dev tools network for clues (status, sent data, response data etc). Also is this a form element? – charlietfl Aug 03 '19 at 15:29
  • Show your `HTML` – Serghei Leonenco Aug 03 '19 at 15:31
  • Here I have try to show all the relevant code – Abdulaziz Yesuf Aug 03 '19 at 15:54
  • It is not clear what you try to do with `alert('t'.title);` and `alert('b'.body);`, what should `'t'` and `'b'` be? There is nothing in your code that would indicate to what this could refer to. And for the result of your ajax call it should be available within the `data` variable in your `function(data) { }` function. So does a `alert(data.title)` within that `function(data) { }` function show you the correct data or not? – t.niese Aug 03 '19 at 16:51
  • I used t and b to show the alert box wether title and body contain data or not. It’s only for testing purposes. And the data.title shows undefined in the alert box. I think the bootstrap modal is being showed before the ajax request is performed since ajax is asynchronous. I am looking for another way to populate the elements in the modal when the edit button is clicked. – Abdulaziz Yesuf Aug 03 '19 at 19:04
  • `I used t and b to show the alert box wether title and body contain data or not. It’s only for testing purposes. ` yes but what should `t` and `b` be? As I said those are two strings, so why do you expect them to ever include the result of any action? That doesn't make any sense. – t.niese Aug 04 '19 at 11:34
  • And what does `console.dir(data)` show - when you call it within the `function(data) { }` - in the console of you browser? – t.niese Aug 04 '19 at 11:34

0 Answers0