0

I have several js files in my host/public/js folder. In my html I have a list with several links, representing the js files.

What I am trying to achieve is, when a link is clicked (e.g. <a href="">file1.js</a>) the file1.js (referenced in <head> <script src="/js/file1.js" type="text/javascript"></script> </head> in my html file) should be used for displaying maps created using leaflet (a JavaScript library for interactive maps).

Is there a way to create this "javascript file selection" tool using PHP, Javascript, twig, or jquery?

dreieck
  • 39
  • 9
  • 2
    Possible duplicate of [Dynamically load a JavaScript file](https://stackoverflow.com/questions/21294/dynamically-load-a-javascript-file) – Devsi Odedra Jul 18 '19 at 12:05
  • May the scripts be pre-loaded or not? – Ro Achterberg Jul 18 '19 at 12:06
  • What do you exactly mean with "pre-loaded"??? sorry, i am new in the business :-/ – dreieck Jul 18 '19 at 12:08
  • Though it is possible to dynamically load js files, loading new js files is not suitable for the task at hands (mostly because you can't get rid of a script once it's loaded). Search for "SPA" to find a better technique for the task. – Teemu Jul 18 '19 at 12:23
  • @nico, without knowing anything about your goals, it's hard to advise you on a best course of action. By 'pre-loading', I mean to simply include ( – Ro Achterberg Jul 18 '19 at 12:30
  • @RoAchterberg "_should be used for displaying/formatting my content_" says enough, dynamically loading js files for this is not a good idea. – Teemu Jul 18 '19 at 12:35
  • It would be tricky to dynamically add Js to format content, it would mean that each file should be compatible with any other Js previously loaded (can undo what's been formatted before). An easy solution would be to reload the whole page with a parameter (for example a GET through the URL) and that PHP inserts the right script tag to the page. – Kaddath Jul 18 '19 at 12:38
  • my js files are web-maps (leaflet). The idea is to display a different map (js file) when a link is clicked – dreieck Jul 18 '19 at 12:39
  • Yes, that is possible. What have you tried so far, where are you stuck? – Nico Haase Jul 19 '19 at 13:57

2 Answers2

1

It is possible you tackle with your problem the wrong way.

Basically, what you want to do is to change the state of your page when something is clicked on this page. And to do so, you need to fetch something from your server.

I think you should consider this:

You have only one javascript file you could call application.js that you load with the script element. In this file, you will have all your javascript code.

When the click happens, your code will execute an asynchroneous request to fetch data from your server and change your page accordingly.

Example (with jQuery):

    $.ajax({
            url: url,
            jsonp: false,
            dataType: "json"
        }).done(function(data){
            processJSON(data);
        });

Full example here: http://franceimage.github.io/map/

When you click on the 1rst icon for the left sidebar, you can select a different set of points. It then fetches the data from the server (/map/data) and changes the look of the map.

Is it what you need ?

YaFred
  • 9,698
  • 3
  • 28
  • 40
0

I was tackling my problem the wrong way. The solution was https://api.jquery.com/jQuery.getScript/.

I get my js scripts asynchronously from the server. The containers (where the maps are rendered) are reloaded using document.getElementById('id_map_container').innerHTML = "<div id='map'></div>"; (see refresh leaflet map: map container is already initialized)

In the example above there is just one leaflet and the data (yellow points) are fetched and displayed on the basis map.

In my case, I have lots of js files that have to be requested. So the solution was jQuery.getScript( url [, success ] ), which is actually the short hand and equivalent of

$.ajax({
  url: url,
  dataType: "script",
  success: success
});
dreieck
  • 39
  • 9