AJAX内容未使用已加载的Javascript源

Question

I have a file called incident.php that loads my main page. This includes header, footer and sidebar. The content of the page I am loading from incident.inc.php. As this is ever changing I have opted to use AJAX to load this content and reload at 30 second intervals allowing it to be left open as a dashboard.

For the dashboard code I am using Twitter Bootstrap and this dashboard: https://wrapbootstrap.com/theme/metro-admin-template-WB0KDM51J

This dashboard has multiple JS files that it loads at the bottom of each page. I have found that when I am loading the content through AJAX that it doesn't behave properly along with the loaded javascript source files. I have seen multiple ways of getting a script to run at the time the Ajax content loads, but have not seen how I can get it to recognize these 20 or so javascript files that the dashboard includes. The only work around I have found is to include all of these javascript files within the incident.inc.php which I assume is not the proper way to do it.

I am looking for the best practice on how to have content loaded from AJAX to utilize the included Javascript files in the originating file (incident.php).

My AJAX call within incident.php is as follows.

(function($){
        $.ajaxSetup(
            {
                cache: false,
                beforeSend: function() {
                    $('#incidents').hide();
                    $('#loading').show();
                },
                complete: function() {
                    $('#loading').hide();
                    $('#incidents').show();
                },
                success: function() {
                    $('#loading').hide();
                    $('#incidents').show();
                }
            });
        var $container = $("#incidents");
        $container.load("incident.inc.php");
        var refreshId = setInterval(function()
        {
            $container.load('incident.inc.php');
        }, 30000);
    })(jQuery);

I know that there has to be a better way to do this. I just can't seem to pinpoint exactly how to do it in this situation.

Answer 1

You could have incident.inc.php send back two results instead of plain HTML.

Now it probably responds with something like this:

...
<div>HTML here</div>
...

If you respond with JSON:

{html:"<div>HTML here...</div>", scripts:["/js/movieplayer.js","/js/myscript.js"]}

You could then have some storage of already loaded javascript files as well, so you wouldn't have to load the same file again.