Issues with using JSON to fetch data from a PHP database

Question

I am making this product warranty database system as a small learning side project as a new web development. I am having many issues with one of the last bigger tools I would love to have. This is a button in each row that, when clicked, will bring up a modal pop-up and have a textbox with the original comment set as the value. When the user is done adding or altering the comment, another button is clicked and it will update (I am confident in this part).

This issue lies with retrieving the actual comment. I am using a similar project found online as a guidance tool. They used JSON to call a php function to retrieve the data and set the values of the textbox to the data. I tried this approach and nothing seemed to work. I tried altering the code, read up more on JSON, played around with other projects and it didn't work. I also tried using an onclick method and pass through the parameters on the actual button side, but that didn't work either. And when I mean it did not work, I mean there were 0 errors in the console log, so I am not sure where to look for corrections.

I did get the function to work when removing the datatype:'JSON', but the box was never set to the value.

Here is a few code blocks for reference. Yes, it is messy, and yes I am aware it is susceptible to junction attacks.

In the table php file, for creating the button for each product.

if ($row['WarrStatus'] == 'ACTIVE') {
    echo '<td><button type="button" class="deleteRow" id="'.$id.'" >Delete</button></td>
          <td><button type="button" class="updateRow" id="'.$id.'" >Update</button></td>
          <td><button type="button" class="resolveRow" id="'.$id.'" >Resolve</button></td>';
}

This is the js function when the button updateRow is clicked, this will execute

$(".updateRow").click(function() {
    var item_id = $(this).attr("id");  

    $.ajax({  
            url:"Actions/fetch.php",  
            method:"POST",  
            data:{item_id:item_id},  
            dataType:"json",  

            success: function(data) {   
                document.getElementById("CommentBox") = data.comments //Comments = the data retrieved
                 modal.style.display = "block"; //Display the modal 
            }  
       });  
  });

This is the fetch.php to obtain the json data.

if(isset($_POST["item_id"])) {  
      $query = "SELECT comment FROM inspection.product WHERE TransactionID = '".$_POST["item_id"]."'";  
      $result = mysqli_query($conn, $query);  
      $row = mysqli_fetch_array($result);  
      echo json_encode($row); 
 }  
 ?>

and lastly, this is modal.

<div id="myModal" class="modal" 
    <div class="modal-content" 
    <span class="close">&times;</span>
    <h2>Update a Comment</h2>
    <p id="CustDetails">You are now editing ...</p>
    <form method="POST">
        <input type ="text" class="CommentBox" id="CommentBox" value=""></input>
        <button class="updateCommentbtn" id="updateCommentbtn" value="">Update</button>
    </form>
    </div>
</div>

Here is what is displays

To summarize, my issue is there seems to be when the Update button is clicked no data being retrieved through JSON or any other methods, and I am not sure why this is. Any help would be appreciated!

You `echo json_encode($results);` but you never assign anything to `$results`. Perhaps you mean `echo json_encode($row);`? — Nick, Jun 17 '20 at 01:04
Ahh! My mistake. That doesn't fix it was just trying out some stuff, gonna change and edit this. Thank you! — Gavin, Jun 17 '20 at 01:06
You should add an error callback on your AJAX call. If the request returns a response other than a 200, you are not going to see any errors and your success callback will not be executed. — akenion, Jun 17 '20 at 01:09
@akenion Thank you, I added a failure with an alert in. But interestingly enough, when i clicked the button with the update, there is not failure alert... — Gavin, Jun 17 '20 at 01:16
Take a look at the network tab in the developer tools on your browser. You should see a response to your AJAX request. If your error callback is not firing, it probably is a 200. Since the POST parameter will not be set with a JSON request, I would expect an empty response body. — akenion, Jun 17 '20 at 01:22
@akenion Yes you are correct. I see that it does say 200 OK. How would I so about changing the request or parse the JSON as you suggest? — Gavin, Jun 17 '20 at 01:24
@Sihakk See this answer: https://stackoverflow.com/a/18867369/13254783 — akenion, Jun 17 '20 at 01:35
@akenion thank you! and Thannk you for the network tool thing, I see where my errors are! — Gavin, Jun 17 '20 at 01:38

score 3 · Answer 1 · answered Jun 17 '20 at 01:30

3

Your problem is from this line on your Javascript success function

document.getElementById("CommentBox") = data.comments

Change this to:

document.getElementById("CommentBox").value  = data.comments

answered Jun 17 '20 at 01:30

Psalms Kalu

95
1
5

This is only part of the problem, but this is more correct than (2) in my answer since CommentBox is an input. I had assumed it was just an element like a span. – akenion Jun 17 '20 at 01:37

score 2 · Accepted Answer · answered Jun 17 '20 at 01:16

There are at least a few issues here.

PHP will not implicitly parse JSON into the POST super global. That will only work for form data(you could change your AJAX request to pass form data or update your PHP to parse JSON). This means that your isset($_POST["item_id"]) check will always return false.
In your success handler for the AJAX request, you are assigning a string value to a DOM element. This is likely not what you want. You likely want to set the innerHtml of the element. Since you are dealing (presumably) with text and are already using jQuery, just do $("#CommentBox").text(data.comments);

Issues with using JSON to fetch data from a PHP database

2 Answers2