PHP Code into Javascript

Question

I am using fullcalendar.js and the calendar is working as it should right now. If a user clicks on an entry at the calendar, a modal appears with some information. What I need now is, that those information inside the modal are information from the database, so I would like to insert some PHP code but I have no idea how.

Let me show you which PHP code I would like to use so that the data from my database are displayed at the modal:

<?php
    $dates=getPcalInfoOfHour($gl_userid,0,0);
        for ($x=0;$x<count($dates["id"]);$x++) {
            Title: '".$dates["title"][$x]."';
            Selected Date: '".$dates["date"][$x]."';
            Selected Time: '".$dates["start"][$x]."' '".$dates["end"][$x]."';
            Topic: '".$dates["topic"][$x]."';
            Location: '".$dates["location"][$x]."';
            Address: '".$dates["address"][$x]."';
        }
?>

Here is the part of my Javascript Code where I would like to enter my php code:

    eventClick: function(calEvent, jsEvent, view) {

        //display a modal
        var modal =
        '<div class="modal fade">\
          <div class="modal-dialog">\
           <div class="modal-content">\
             <div class="modal-body">\
               <button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">&times;</button>\
                <label> <strong>Topic:</strong> Topic</label>\
                <label> <strong>Selected Dated:</strong> Date</label>\
                <label> <strong>Selected Time:</strong> Time</label>\
                <label> <strong>Title:</strong> Title</label>\
                <label> <strong>Location:</strong> Location</label>\
                <label> <strong>Address:</strong> Address</label>\
                <label> <strong>Phone:</strong> Phone</label>\
             </div>\
             <div class="modal-footer">\
                <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Close Window</button>\
             </div>\
          </div>\
         </div>\
        </div>';

        var modal = $(modal).appendTo('body');

        modal.modal('show').on('hidden', function(){
            modal.remove();
        });

        console.log(calEvent.id);
        console.log(jsEvent);
        console.log(view);

    }

I know that PHP is a server side language and JavaScript is client based language but there must be a way, that my data from the database will be shown inside the modal am I right? I know a little bit about PHP programming but I never wrote something in JavaScript.

I would really appreciate if someone can tell me what my code should look like so that I get my information from the database inside the modal window.

Thanks, Chris

you can write like `var php = ` and `alert(php)` i think its work — Mayank Vadiya, Oct 15 '15 at 13:22
If the data is filled by users you are vulnerable to XSS attacks. — GuyT, Oct 15 '15 at 13:29
Possible duplicate of [Access PHP variable in JavaScript](http://stackoverflow.com/questions/4287357/access-php-variable-in-javascript) — moonwave99, Oct 15 '15 at 13:32
@GuyT, not really if he is sanetizing input before it is stored in his database there should't be a problem :) — MrK, Oct 15 '15 at 16:45
@KristianHareland That's correct, but it is better to always encode output because there will be a moment that you forget to sanitize the user input and besides SQL injection(if you are not using prepared statements) you will be vulnerable to XSS attacks. — GuyT, Oct 16 '15 at 08:49

score 0 · Answer 1 · answered Oct 15 '15 at 13:21

0

I believe this would do:

var js_string = "<?php echo $php_string; ?>";

answered Oct 15 '15 at 13:21

pistou

2,799
5
33
60

score 0 · Answer 2 · answered Oct 15 '15 at 13:23

You have to make request to server to php script what will fetch data from DB and generate html.

Example javascript to use with php generated html for modal:

$.post('/script_generating_html.php', params, function(response) {
    var modal = $(response).appendTo('body');

    modal.modal('show').on('hidden', function(){
        modal.remove();
    });
});

score 0 · Answer 3 · answered Oct 15 '15 at 13:24

Think of it this way. PHP generates what the browser will read before sending anything. So if you had the following code

<?php
  $data = "Super Important";
?>

<script>
  alert("<?php print $data; ?>");
</script>

It would generate for the client

<script>
  alert("Super Important");
</script>

If you're going to be working with modifying javascript with php, also look into json_encode()

as another way to acheive the same thing is

<?php
  $data = "Super Important";
?>

<script>
  alert(<?php print json_encode($data;) ?>);
</script>

PHP Code into Javascript

3 Answers3