Dynamic Loading Of Javascripts

Question

I am currently building an Ajax web application using JQuery that allows for users to have the same page open multiple times in the same area. By allowing this though it tends to cause conflicts with regards to the DOM and "unique ids".

As a result I have created a system where the javascript is preprogrammed if you like in PHP with a unique id before being send out. It's then sent to the user as a .php file.

The code is similar to this: User wishes to load a page in a content_area, that content area sends AJAX request to the server with the ID of that content_area which becomes the Unique Id. The server sends back a page like "myscript.php" which contains the following:

    <script>
$(function() {
    var unique_id="<?php echo $unique_id; ?>"

    var new_div=$("<div id='content" + unique_id + "'>");
    });
    </script>

I am wondering is this a bad idea and are there any alternatives to this?

Answer 1

You can pre-render the whole (big) section of the site and then use some JS mapper/loader to dynamically load scripts and execute custom code.

You could create jQuery plugins to handle different parts of your functionality and load them when needed. On JS Loaders there is a whole section over at jster.net For routing you could use something like the Davis Mapper.

It would be preferable to have the JS resources static where possible and handle the dynamic content via AJAX calls to the server side. Hope this helped. :)

Answer 2

You'd want to add a php header so the browser knows it's a JavaScript file and not php.

<?php
header('Content-type: text/javascript');
?>
<script>
$(function() {
 var unique_id="<?php echo $unique_id; ?>"
 var new_div=$("<div id='content" + unique_id + "'>");
 });
</script>

Then you could use:

<script type="text/javascript" src="myscript.php">