0

I have a function, where I inside a while loop print out 3 buttons, which have an id there is taken from a row in mysql. When you click that button a bootstrap modalbox is shown, where the following column data has to be showm:

id, headline, description, place, year.

In the following javascript i print out the information from headline and description, which is working:

$("#editBox .modal-title").html(jdata.headline); $("#editBox .modal-body").html(jdata.description);

I also need to print out the place and year. I thought I could do that like this:

$("#editBox .modal-title").html(jdata.headline); $("#editBox .modal-body").html(jdata.description) $("#editBox .modal-body").html(jdata.place) $("#editBox .modal-body").html(jdata.year);

But the result is I am printing the description 3 times out. How can I print out place and year in the same modal-body as where the description is?

PHP

<?php
if(isset($_POST['post_id'])) {
    $id = $_POST['post_id'];
    $sql = "SELECT id, place, headline, description FROM article WHERE id = ".$id;
    $res = $mysqli->query($sql);
    if($res){
        $data = $res->fetch_assoc(); 

        echo json_encode($data);
     }else{
        echo "no results: <br>";
    echo $sql;
    }
}
?>

HTML

<div class="modal fade" id="editBox">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div>
            </div>
        </div>
    </div>
</div>

Javascript

   <script>
    $( document ).ready(function() {       
        $(".btn-open-modal").click(function(){
            var id = $(this).data("id");
             $.ajax({
              type : 'post',    
               url : 'getdata.php', //Fetch records 
              data :  'post_id='+ id, //Pass $id
              success : function(data){
                console.log(data);
                var jdata = JSON.parse(data);
                    if(jdata){
                        console.log("is json");
                        $("#editBox").modal().show();
                        $("#editBox .modal-title").html(jdata.headline);
                        $("#editBox .modal-body").html(jdata.description);
                    }else{
                        console.log("not valid json: "+data);
                    }       
               }
            });
        });
    });
    </script>
Mimi
  • 125
  • 10
  • Your code is vulnerable to [**SQL injection attacks**](https://en.wikipedia.org/wiki/SQL_injection). You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). – Alex Howansky Apr 24 '17 at 15:50
  • Thank you for the comment. I will convert that to mysqli. It is just a hobby homeproject, to learn some more about modalboxes, and how to call data within a modalbox. – Mimi Apr 24 '17 at 15:55

0 Answers0