Add and call javascript function at runtime from within innerHtml

Question

I am using dotnet.highcharts to create a chart at runtime:

I use an ajax call an receive formatted html as a result. This is what I get back:

<div id='bbb55283bfc3440a96c7ae26e130173f_container'></div><script type='text/javascript'>
var bbb55283bfc3440a96c7ae26e130173f;
function TestFunction() {
    bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
        chart: { renderTo:'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' }, 
        title: { text: 'Test' }, 
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, 
        series: [{ data: [12, 23, 1, 9, 34, 54] }]
    });
}
</script>

Now I am putting this inside a div element (where data is the above snippet):

$(myDiv).innerHtml = data;

Next I need to call the function TestFunction()

How can I do that? It lives inside myDiv like this:

<div id="chartContainer" style="float:left">
    <div id="bbb55283bfc3440a96c7ae26e130173f_container"></div>
    <script type="text/javascript">
      var bbb55283bfc3440a96c7ae26e130173f;
      function TestFunction() {
        bbb55283bfc3440a96c7ae26e130173f = new Highcharts.Chart({
            chart: { renderTo: 'bbb55283bfc3440a96c7ae26e130173f_container', defaultSeriesType: 'line' },
            title: { text: 'Test' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
            series: [{ data: [12, 23, 1, 9, 34, 54] }]
            });
      }
    </script>

David · Accepted Answer · 2014-09-24 13:54:25Z

0

TestFunction doesn't "live inside the div". JavaScript isn't part of the markup in that manner.

As soon as the function is defined:

function TestFunction() {
    // code
}

It is available from then on as a global function on the window object. So from anywhere else on the page you can invoke it:

TestFunction();

Of course, if this div is repeated in any way and you're assuming some kind of namespacing of functions within divs, then you'll find that not to be the case in practice. If the function is globally defined again anywhere in the document then that second definition will simply overwrite the first one.

answered Sep 24, 2014 at 13:54

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

buddybubble Over a year ago

But why am I not able to call TestFunction()? I get "Uncaught ReferenceError: TestFunction is not defined" when I try to call it from console

David Over a year ago

@buddybubble: You don't provide any information about that in the question, so I can only guess. It would seem, clearly, that when you try to call it the function hasn't been defined. Maybe I misunderstood, is the JavaScript code itself being returned by the AJAX call? That's definitely going to cause some interesting scenarios, especially if there is more than one instance of it. But evaluating JavaScript returned by AJAX could require a little bit of trickery. For example: stackoverflow.com/questions/8097558/…

buddybubble Over a year ago

My case seems to be almost the same as the one you linked. Like I said, I am getting a mix of html and js as a result from an ajax call, see my first code snippet. I am putting this with innerHtml inside a div. I then want to call one part (TestFunction) of the code I just inserted into the div

David Over a year ago

@buddybubble: This answer in particular seems like a good approach: stackoverflow.com/a/8097791/328193 If you have the entire response as a jQuery object then you should be able to extract the script element from that object. Then you can create and append a new script tag like in that answer.

buddybubble Over a year ago

Thanks that did it! I just dont understand why I have to do that. Can't I call the function - as you said in your initial answer- directly?

|

Collectives™ on Stack Overflow

Add and call javascript function at runtime from within innerHtml

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related