How to use php's require() functionality dynamically

Question

To start off I want to mention, that i am just starting out with HTML, PHP and JS. I would like to generate a Website that has a menu on the left and some Content on the right side. And after some tests i managed to do so. Atleast statically.

So far i created a menu on the left, which has some text ("Project") and onclick it will expand and Show some reports. All of that works fine. See here (I left the table border active to demonstrate better)

This is the code I'm currently using to generate this site.

<script type="text/javascript">
$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
    $('.click-nav .js ul', this).slideUp();
    $('.clicker').removeClass('active');  
    }
  });
});
</script>


<table border=1 width="100%">
    <tr>
        <td width="200px" valign="top" align="left">
            <div class="click-nav">
                <ul class="no-js">
                    <li>
                        <a href="#" class="clicker">Project1</a>
                        <ul>
                            <li><a href="#">Report1</a></li>
                            <li><a href="#">Report2</a></li>
                            <li><a href="#">Report3</a></li>
                            <li><a href="#">Report4</a></li>
                            <li><a href="#">Report5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        
        </td>
        <td>
            <center>
        
                    <br><br>
                    <H2>Projects</H2>
                    <br><br><br><br>
                    <div id="KPI"><?php require(DB_REP."KPI_report.php")?></div>
            </center>
        </td>
        <td width="50px"></td>
    </tr>
</table>

Ok now on to my Problem. The Goal of the site is to dynamically load this part:

<div id="KPI"><?php require(DB_REP."KPI_report.php")?></div>

and i want to do it like this: When Report1,2,3,4 or 5 is clicked i would like to Change the require. So that the php to require is the value of the element that is clicked. In a way like this:

<div id="KPI"><?php require(DB_REP."$clicked.php")?></div>

because later the Buttons Report1, Report2.. etc. will also be generated dynamically by parsing what reports are available.

But so far i found no way to store the value of the element clicked in a php variable. Since I'm getting the click Event in the Java script only.

I hope my Problem is clear and I would appreciate any help. Thanks in advance!

PHP is a server-side script, it will always run first only then javascript, there it cannot be dynamic. You can load the data and hide it with jquery, upon clicking and show the data? — MuthaFury, Dec 22 '16 at 10:37
look at this question: http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — Pepo_rasta, Dec 22 '16 at 10:38

Cvetan Mihaylov · Answer 1 · 2016-12-22T10:53:34.913

What you need is to do AJAX call upon click. This way your JS will send request to your PHP backend and then you can have the PHP respond with the appropriate response data, depending on the request data - for example "report_id".

$.ajax({
        url: "index.php",
        data: {report_id:reportId},
        type: "GET"
    })
    .done(function(data){
        // your logic here
    })
    .fail(function(jqXHR){
        console.log(jqXHR);
    })

Example index.php code:

$filename = "DB_REP".$_GET("report_id").".php";

if (file_exists($filename)) {   
    require($filename);
}

score 0 · Answer 2 · answered Dec 22 '16 at 10:46

I would make a php script which serves the report, and this script would for example have the following php filename: report_maker.php

Now in report_maker.php, I would have a variable based on a GET argument, so for example: $reportId = $_GET['reportId'];

So in your JavaScript function, I would make a AJAX request to: http://yourdomain.com/path/to/report_maker.php?reportId=(the Id from your 'clicker')

Check out how to use jQuery.get() (AJAX request) at: https://api.jquery.com/jquery.get/

I hope this makes sense?

score 0 · Answer 3 · answered Dec 22 '16 at 10:52

If I understood correctly, you should use AJAX For example:

                <ul>
                    <li><a href="#" id="report1">Report1</a></li>
                    <li><a href="#" id="report2">Report2</a></li>
                    <li><a href="#" id="report3">Report3</a></li>
                    <li><a href="#" id="report4">Report4</a></li>
                    <li><a href="#  id="report5"">Report5</a></li>
                </ul>

JS code:

$(document).ready(function () {

    $("#report1").click(function () {
      //click on report 1 button, then send request to our PHP file
       $.post('ourphpscriptfile.php', { }, function (data) {
           $("#KPI").html(data); //data - this is response from the script
       });
    });
});

Your PHP script

<?php

//to do something here

echo "result of script in HTML";

?>

Please try to use above construction The result of this example - dynamically loading result of script "ourphpscriptfile.php" to DIV with ID "KPI", by clicking on link with ID =report1

score 0 · Answer 4 · answered Dec 22 '16 at 11:28

There is no way to interactively change the php code. Php is rendered on the server side and then result is sent to the browser where javascript operates. So You must reload content of #KPI in javascript on click event. Below is example how to do it.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('.click-nav > ul').toggleClass('no-js js');
        $('.click-nav .js ul').hide();
        $('.click-nav .js').click(function (e) {
            $('.click-nav .js ul').slideToggle(200);
            $('.clicker').toggleClass('active');
            e.stopPropagation();
        });
        $(document).click(function () {
            if ($('.click-nav .js ul').is(':visible')) {
                $('.click-nav .js ul', this).slideUp();
                $('.clicker').removeClass('active');
            }
        });
        $('.click-nav a').click(function () {
            var url_base = '<?=DB_REP;?>';
            var target = $(this).data('target');
            if (target) {
                $.get(url_base + target, function (data) {
                    $("#KPI").html(data);
                    alert("Load was performed.");
                });
            }
        })
    });
</script>

<table border=1 width="100%">
    <tr>
        <td width="200px" valign="top" align="left">
            <div class="click-nav">
                <ul class="no-js">
                    <li>
                        <a href="#" class="clicker">Project1</a>
                        <ul>
                            <li><a href="#" data-target="Report1.php">Report1</a></li>
                            <li><a href="#" data-target="Report2.php">Report2</a></li>
                            <li><a href="#" data-target="Report3.php">Report3</a></li>
                            <li><a href="#" data-target="Report4.php">Report4</a></li>
                            <li><a href="#" data-target="Report5.php">Report5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </td>
        <td style="text-align: center">
            <br><br>
            <h2>Projects</h2>
            <br><br><br><br>
            <div id="KPI">
                <?php require(DB_REP."KPI_report.php")?>
            </div>
        </td>
        <td width="50px"></td>
    </tr>
</table>

score 0 · Answer 5 · answered Dec 22 '16 at 11:32

0

Thats why ajax is there for you http://api.jquery.com/jquery.ajax/. You'll need to use ajax

answered Dec 22 '16 at 11:32

ujwal dhakal

2,289
2
30
50

How to use php's require() functionality dynamically

5 Answers5