Executing Javascript using AJAX

Question

I know that there are already alot of this similar questions out there but I still can't understand what is going on. I am not very familiar with AJAX and have a very basic knowledge on javascript.

Scenario:

I have a index.html page which is running the ajax and a file (sub.html) which has the javascript (does not have js file included.), it's a manually coded javascript in sub.html.

Example:

(index.html)

$('#content').load(pageurl + '#inner_content', function(){

//some code

});

(sub.html)

<script type="text/javascript">
    (function($){
      var interactive_chart_config = {
        zoom_historical_default: [% chart_config.chart.chart_interactive.zoom_historical_default %],
        zoom_intraday_default: [% chart_config.chart.chart_interactive.zoom_intraday_default %],
        quotes_delay: [% ir.var.Config.format.quotes_delay %],
        news_on_chart: {
          [% news_types = chart_config.chart.chart_interactive.news_on_chart.keys %]
          [% FOREACH news_type = news_types %]
            [% news_type %]: {
              [% news_options = chart_config.chart.chart_interactive.news_on_chart.${news_type}.keys %]
              [% FOREACH news_option = news_options %]
                [% news_option %]: [% chart_config.chart.chart_interactive.news_on_chart.${news_type}.${news_option} ? 'true' : 'false' %][% IF news_option != news_options.last %],[% END %]
              [% END %]
            }[% IF news_type != news_types.last %],[% END %]
          [% END %]
        },
        modify_news: [
          [% FOREACH news = chart_config.chart.chart_interactive.modify_news.news %]
            {
              [% FOREACH key = news.keys %]
                [% key %]: '[% news.${key} %]'[% IF key != news.keys.last %],[% END %]
              [% END %]
            }[% IF news != chart_config.chart.chart_interactive.modify_news.news.last %],[% END %]
          [% END %]
        ]
      };

      $(document).ready(function(){
        $('#content_container').web_chart($.extend({}, {
          theme : Highcharts.theme,
          counter_code : "[%= stock_ids.first %]",
          plot_on_load : true,
          always_reload : true,
              loading_indicator_id  : 'loading_indicator',
              chart_setting_id      : 'chart_setting',
              counter_list_form_id  : 'counter_list_form',
              chart_container_id    : 'chart_container',
              css_class_for_flags    : {'N' : 'news_tooltip', 'I' : 'insider_trades_tooltip', 'C' : 'corporate_actions_tooltip'}
        }, interactive_chart_config));
      });
    })(jQuery);

  </script>

How do I execute the javascript for the sub.html using AJAX in index.html?

Hope you guys can help me out. Thanks in advance.

SomeShinyObject · Accepted Answer · 2013-03-15 01:04:15Z

1

Use a function.

<script type="text/javascript>
    function stuffFromSub() {
        var foo = "I do stuff";
        return foo;
    }
</script>

and then in load()

$('#content').load(pageurl + '#inner_content', function(){
    stuffFromSub()
});

answered Mar 15, 2013 at 1:04

SomeShinyObject

7,8316 gold badges41 silver badges60 bronze badges

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

1 Comment

Dr3am3rz Over a year ago

Hi Christopher, thanks for helping me. I have edited my question and added in the actual javascript code. I don't know how to use your answer to solve that javascript part. =x

Ryan B · Accepted Answer · 2013-03-15 01:17:06Z

0

If you are trying to use AJAX to retrieve a page that has javascript on it, it would require you run eval() on it which would be a big no no.

The best solution to this would be to create a .js file instead of a .html file and link to it instead. Place the code you'd like to run into a function so you can call on it when you'd like.

answered Mar 15, 2013 at 1:17

Ryan B

1661 silver badge6 bronze badges

3 Comments

Dr3am3rz Over a year ago

Hi Ryan, I tried to do that way but the javascript contains some backend codings so I'm stuck.

Ryan B Over a year ago

Unfortunately, I'm not sure what language is being used for your sub.html or it might even be in a template of some sort. If possible, the backend coding could set the content type of the file allowing you to still call the file with a script include. Otherwise, you can run an include of sub.html within the index.html file. All of this really is determined by the server side language is being used and if you have control over it. If not, you may not be able to do it this way.

Dr3am3rz Over a year ago

I see. Too bad I have no control over that. Sigh. Thanks anyway.

Collectives™ on Stack Overflow

Executing Javascript using AJAX

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related