Reload javascript on html change

Question

In my site's index.html I have a div element that changes when a menu item gets clicked (with jquery). The pages that get inserted into this element all have some javascript functions in them. However, I load my javascript files in the index.html right before the body closes. These files don't 'reload' when this div element changes, so the javascript doesn't work on these pages. How would I fix this issue? Do I have to reload the javascript files on the change of the element? And if so, how?

edit: Sorry, these are the codes for the page inserts:

$("li.load-page").click(function() {

  var pagina = $(this).data("page") + ".html";
  console.log(pagina);
  $("#main-content").load(pagina);
});

main-content is an empty div in index.html.

In one of the pages that gets inserted I use the jquery accordion in my html for example, but it doesn't work since it's included in the head, and the page doesn't refresh on insertion:

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        heightStyle: "content"
    });
});

EDIT2: I have simulated my problem here: https://jsfiddle.net/ktoeon2f/2/

Your given script tag a source or directly written script inside of it? — Rajaprabhu Aravindasamy, Feb 27 '16 at 11:21
It's a source. Some are included in the head, some before the body closes. They work all just fine in the index.html. But since pages get 'included' only after a menu item is pressed, the javascripts don't seem to have influence since they are loaded before the page content.. — Cake, Feb 27 '16 at 11:27

Shelim · Answer 1 · 2016-02-27T11:34:16.210

0

<script type="text/javascript" id="jsid">
//your script here
</script>

after onchange call

eval(document.getElementById("jsid").innerHTML);


after load

$("li.load-page").click(function() {

  var pagina = $(this).data("page") + ".html";
  console.log(pagina);
  $("#main-content").load(pagina);

   eval(document.getElementById("jsid").innerHTML); 
   // give an id (jsid) to script tag inside your loaded page
});

edited Feb 27 '16 at 11:34

answered Feb 27 '16 at 11:28

Shelim

141
8

That looks like a good solution. How would I use it when the script is in the src attribute and not within the tags? Would something like this work? eval(document.getElementsByClassName("jsid").getAttribute(src)) – Cake Feb 27 '16 at 11:38
can show me the code where the script is written which is not working ? As i understood your script must be written in script tag and i am suggesting you to give the id to that script tag. – Shelim Feb 27 '16 at 11:44
In the head for example, I have this: – Cake Feb 27 '16 at 11:48
ok. try and call as above or with class.It might work – Shelim Feb 27 '16 at 11:53
http://stackoverflow.com/questions/9129666/whats-the-better-practice-eval-or-append-script – Shelim Feb 27 '16 at 11:55
The id and class thing didn't work. I'll dig into that jquery.GetScript. Might work. I don't see what the degrading script tags have to do with it though. – Cake Feb 27 '16 at 12:02
If the degrading script tags is not for you please ignore it.My intension was to help you. – Shelim Feb 27 '16 at 12:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104723/discussion-between-cake-and-shelim). – Cake Feb 27 '16 at 13:53
I really don't get it. Been on this for a whole day. I just want to run all my javascript codes after have one DOM element (div) getting filled up. If I fill it up in advance, everything works. But if I .load() or .html() the content in there, all my javascript doesn't 'see' the content.. Driving me nuts! – Cake Feb 27 '16 at 17:03

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

The problem was solved in this thread: jQuery: Changing the CSS on an element loaded with ajax?

The solution was to load the other function(s) in the succes function of an ajax call:

$('#main-content').load(
    url,
    function(){
        accordionFunction();
    }
);

edited May 23 '17 at 12:07

Community

1
1

answered Feb 27 '16 at 20:54

Cake

308
4
18

Reload javascript on html change

2 Answers2