在特定包含的php文件中加载js文件

Question

I found some problems to load js files in php file. I have file php admin-pp-sipp-litbang.php. Inside that file, I include some php files with switch case like that:

 <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
        <?php
        switch (@$_GET['modul']) {
            case "beranda":
                include "tampilan-admin-pp/beranda.php";
                break;
            case "permintaanakun":
                include "tampilan-admin-pp/permintaanakun.php";
                break;
            case "permintaanpp":
                include "tampilan-admin-pp/permintaanpp.php";
                break;
            case "chat":
                include "tampilan-admin-pp/chat.php";
                break;
            case "detailsproposal":
                include "tampilan-admin-pp/details_proposal.php";
                break;
            case "detailspermintaanakun":
                include "tampilan-admin-pp/details_permintaanakun.php";
                break;
            case "detailspengguna":
                include "tampilan-admin-pp/details_pengguna.php";
                break;
            default:
                include "tampilan-admin-pp/beranda.php";
        }
        ?>
    </div><!--/.main-->

After that, I load js files for tampilan-admin-pp/chat.php on admin-pp-sipp-litbang.php near close body tag . Here are the js files.

        <script id="message-template" type="text/x-handlebars-template">
    <li class="clearfix">
        <div class="message-data align-right">
            <span class="message-data-time" >{{time}}, Today</span> &nbsp; &nbsp;
            <span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
        </div>
        <div class="message other-message float-right">
            {{messageOutput}}
        </div>
    </li>
</script>

<script id="message-response-template" type="text/x-handlebars-template">
    <li>
        <div class="message-data">
            <span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
            <span class="message-data-time">{{time}}, Today</span>
        </div>
        <div class="message my-message">
            {{response}}
        </div>
    </li>
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>

<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>

<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>

The problem is the js files for tampilan-admin-pp/chat.php affects another included files. How can I load that js files only for tampilan-admin-pp/chat.php?

Answer 1

Is there any reason why you can't just move the <script> tags at the bottom of admin-pp-sipp-litbang.php into tampilan-admin-pp/chat.php?

If you need them to be included at the end of admin-pp-sipp-litbang.php, then you will need to use another switch statement or similar logic after the handlebars templates.

UPDATE:

The problem is that your php files are being conditionally included by the switch statement but your "chat" javascript files are being included every time regardless. You need to conditionally include the javascript files as well. You could just add the <script> tags to the original switch statement, but often javascript is better loaded just before the </body> ending tag, as you have done. To keep that characteristic, add another switch statement at the bottom of admin-pp-sipp-litbang.php before including the js files.

So

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>

<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>

<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>

Becomes:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>

<?php switch($_GET['modul']):
    case 'chat': ?>
        <script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
        <script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
        <script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
    <?php break;?>
<?php endswitch;?>

That way you can add other case statements that match the other includes at the top of the file to conditionally include their javascript too.