How to add data to a modal PHP, MySQL Ajax

Question

I wrote this code:

<div class="container">
<div class="row">
    <div class="col-md-3">
        <div id="accordion" role="tablist" aria-multiselectable="true">
            <div class="card">
                <div class="card-header" role="tab" id="headingOne">
                    <h5 class="mb-0">
                        Message options
                    </h5>
                </div>

                <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-block">
                        <table class="table">
                            <tr>
                                <td>
                                    <a href="?messages=inbox"><i class="fa fa-inbox"></i> Inbox</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="?messages=read"><i class="fa fa-envelope"></i> Read</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="?messages=trash"><i class="fa fa-trash"></i> Trash</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                Messages
            </div>
            <div class="card-block">
                <table class="table mx-auto" id="table">
                    <thead>
                    <tr>
                        <th>Number</th>
                        <th>Subject</th>
                        <th>Time added</th>
                        <th>More</th>
                    </tr>
                    </thead>
            </div>
            <?php

            if((isset($_GET['messages']) && $_GET['messages'] == 'inbox') || !isset($_GET['messages'])) {
                $id = $_SESSION['id'];
                $messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 0");
            }
            elseif(isset($_GET['messages']) && $_GET['messages'] == 'read' ){
                $id = $_SESSION['id'];
                $messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageRead = 1");
            }
            elseif (isset($_GET['messages']) && $_GET['messages'] == 'trash'){
                $id = $_SESSION['id'];
                $messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 1");
            }
            if(!$messages){
                echo '<tr>

                              <td colspan="3" style="text-align: center">No new messages in the inbox</td>

                          </tr>';
            }
            elseif(!isset($_GET['messages']) || $_GET['messages'] == 'inbox'){
                foreach ($messages as $message){
                    $number = $message['id'];
                    $subject = $message['subject'];
                    $time_added = $message['time_added'];
                    if($message['messageRead'] == 0){
                        echo "<tr class='table-active'><td>$number</td><td>$subject</td><td>$time_added</td></tr>";
                    }
                    else{
                        echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td><td><div class='dropdown'>
                                  <button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                                        <i class='fa fa-ellipsis-v'></i>
                                  </button>
                                  <div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>
                                    <a class='dropdown-item' href='#'>Preview</a> 
                                    <a class='dropdown-item' href='#'>Mark as read</a>
                                    <a class='dropdown-item' href='#'>Mark as unread</a>
                                  </div>
                              </div>
                          </td></tr>";
                    }
                }
            }
            else{
                foreach ($messages as $message){
                    $number = $message['id'];
                    $subject = $message['subject']; // needs to become subject new row in database
                    $time_added = $message['time_added'];
                    echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td>

                          <td><div class='dropdown'>
                                  <button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                                        <i class='fa fa-ellipsis-v'></i>
                                  </button>
                                  <div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>

                                    <button class='dropdown-item' data-toggle='modal' data-number='$number' data-target='#exampleModalLong'>Preview</button> 
                                    <a class='dropdown-item' href='#'>Mark as read</a>
                                    <a class='dropdown-item' href='#'>Mark as unread</a>
                                  </div>
                              </div>
                          </td></tr>";
                }
            }
            ?>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#exampleModalLong').on('show.bs.modal', function(e) {
        var number = $(e.relatedTarget).data('number');
        $.ajax({
            type: 'POST',
            url: 'retrieveData.php',
            data: {
                'id': number
            },
            success: function(data){
                console.log(data);
            },
            error: function(error){
                alert(error);
            }
        });
    });
</script>

I want to retrieve the data by Id of the message and show a preview on click of the modal. But somehow when I click on my 3 dot menu (which launches the modal) the console won't log the data from retrieveData.php

retrieveData.php

if(isset($_POST['id'])){
    $id = $_POST['id'];
    $data =  $database->getDataAsArray("SELECT * FROM messages WHERE id=$id");
    echo $data;
    return $data;
}

getDataAsArray function (completly unsafe I know I need to use a prepared statment):

public function getDataAsArray($myQuery){
    $this->connection = mysqli_connect($this->host, $this->dbUsername, $this->dbPassword, 'portal');
    $query = mysqli_query($this->connection, $myQuery);
    $results = array();
    while($line = mysqli_fetch_array($query)){
        $results[] = $line;
    }
    return $results;
}

Could anyone please help me to fix my Ajax function (I think the error is there) so I can display the data of a message in my modal?

Use your browser's debugging tools. Is there an error in the development console? Is the JavaScript code executed at all? Is the AJAX call made? Does it contain the data you expect? What is the server's response? — David
– David, Commented Aug 12, 2017 at 18:19
@David No erros in the console, no server response. Ajax is called, so does Javascript. — Sander Bakker
– Sander Bakker, Commented Aug 12, 2017 at 18:22
Turn on error reporting in PHP. Check the PHP error logs. If by "no response" you mean the response is blank entirely then that could be the PHP "white screen of death" which means there's an error happening server-side. If by "no response" you mean that the request just hangs indefinitely then it sounds like there may be a logical error in your server-side code, possibly leading to an infinite loop, and you'll need to do some debugging to find it. — David
– David, Commented Aug 12, 2017 at 18:23
@David PHP error logs are on. No error in the logs somehow. It's very weird — Sander Bakker
– Sander Bakker, Commented Aug 12, 2017 at 18:25

Peter van der Wal · Accepted Answer · 2017-08-12 19:28:12Z

1

echo $data; where $data is an array will output only the text "Array" as described by the manual:

Arrays are always converted to the string "Array"; because of this, echo and print can not by themselves show the contents of an array.

Use json_encode to format the array to JSON (JavaScript Object Notation):

echo json_encode($data);

By the way, you can get rid of that return $data; as it isn't doing anything (assuming given code isn't within a function, and that file isn't included anywhere else in your code with include or require).

answered Aug 12, 2017 at 19:28

Peter van der Wal

12k2 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add data to a modal PHP, MySQL Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related