CODEWITHSUNDEEP
javascriptphphtmljqueryjson
Gavin
Gavin

Reputation: 23

Issues with using JSON to fetch data from a PHP database

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

Table for user

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!

Upvotes: 0

Views: 57

Answers (2)

Psalms Kalu
Psalms Kalu

Reputation: 115

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

Upvotes: 3

akenion
akenion

Reputation: 815

There are at least a few issues here.

  1. 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.
  2. 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);

Upvotes: 2

Related Questions