7

Before you label it as duplicate, I already have looked at here, as well, here too, but I can not seem to find a working solution. I understand that I can not pass a script to innerHTML because of the script tag. But is there possibly a way to push this particular API into a div without putting it onto the HTML page. I have a button that takes in an input and run a couple $.get to get stock information, so I want to include this as part of the result, however, innerHTML is not allowed, and I have attempted many of the solutions in the links above, to no avail.
I can place the script below within the div on the HTML page, but I prefer not to do that, and plus I need to get the user input, so placing it within my .js would be much easier to perform all functions together. I have the widget's js included.

<script type="text/javascript">
new TradingView.widget({
  "width": 480,
  "height": 400,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_top_toolbar": true,
  "save_image": false,
  "hideideas": true
});
</script>

So far I have

var script = document.createElement('script');
script[(script.innerText===undefined?"textContent":"innerText")] = "new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:"+ticker+ "','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});";
document.getElementById("stockChart").appendChild(script);

And this work but not how I want it to, however, this just execute that script and this chart is the only thing displaying on the page, is there a way I can force this to be in the <div>? With the above solution, the script is executed, but not placing the widget within the div (it seems like, I could be wrong. I am not proficient in this).

what it is doing In this image, when I run the script with JS file with the other operations, it just display the graph by itself on the page.

when code is in html file This is when the code is within the div and before running any JS functions, I guess it is in the div, however, I need to put an input above in the box so all of the information can be display on one page like below

where I want it to be I want the graph to be place in the red dot, where the <div> is

HTML

<div id="content">
          <img src="icon/logo.png">
          <h1>Search Shares</h1>
          <div id="stockTickGet">
            Ticker: <input type="text" id="tickBox" list="options"/>
            <button onclick="Ticker()" id="tickerSubmit" class="btn btn-primary">Submit</button>
            <datalist id="options"></datalist>
          </div>
          <div id='showStockTick' class='stockTicker'></div>
          <!-- <div id='stockChart'></div> -->
          <div id='stockChart'>
          </div>      
          <div id='showStockSearch' class='stockTicker'></div>
          <div id='newsresult' class='stockTicker'></div>

          <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Buy Stocks</button>

        </div>

In a sense, this is what I want to do, but not allowed/working

document.getElementById("stockChart").innerHTML = "<script> new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:GOOG','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});<"+"/script>";
Community
  • 1
  • 1
Bao Thai
  • 533
  • 1
  • 6
  • 25
  • 4
    *"I can place the script below within the div on the HTML page, but I prefer not to do that"* - Are you saying that if you do do that then it works the way you want it to, with the widget appearing within the div? – nnnnnn Apr 21 '17 at 03:51
  • Well, not particularly. By working, I mean it fits within my HTML layout ( am not for sure it is in the div). However, I have to replace the parameter of the widget with a user input, so I need to include it into my JS operations with the other ones doing similar thing to obtain that input. They are all performing an operation to put together all the information to display on the page. I can provide a screenshot to what I want. – Bao Thai Apr 21 '17 at 03:52
  • Where is `ticker` defined? Does `new TradingView.widget()` call select and populate `#stockChart` element? – guest271314 Apr 21 '17 at 03:54
  • In the JS file, the JS file has a function to obtain the input and provide a drop down list. Once the button is click, a different function will grab the text in the input field, and does all the extra operations. – Bao Thai Apr 21 '17 at 03:55
  • Not sure what issue is? – guest271314 Apr 21 '17 at 03:56
  • Sorry, give me a sec! – Bao Thai Apr 21 '17 at 03:56
  • Can you include full resulting `html`, that is the `html` rendered by `TradingView.widget()` call at Question? – guest271314 Apr 21 '17 at 04:06
  • In the 2nd picture, the TradingView.widget() rendered within the #stockChart when I place the on the html page itself. In the 1st picture is when I use the script work around for the element, but the end result is just an empty page with just the resulting widget box – Bao Thai Apr 21 '17 at 04:13
  • So when the `stockchart` shows up the other details, showStockSearch, newsresult, showStockTick disappear ? – Searching Apr 21 '17 at 04:14
  • @Searching YES! Basically everything is wiped. – Bao Thai Apr 21 '17 at 04:14

1 Answers1

2

While a script can be placed within a div, the misunderstanding here seems to be that you can choose the target div for whatever html the script produces.

Without seeing the script code or at least knowing what the script does it's impossible to say if the script produces any html elements at all, or even if it did, you can't know how it injects those in the current page.

new TradingView.widget(..). Even if you place this as a script element on a html element in your page, it may dance a jig and cook a stew for all we know.

As for the solution to your problem:

I made a search for Tradingview.widget and found this page: www.tradingview.com. It seems to be what you are talking about. Looking at the page source it seems you can add a container_id to the widget options:

new TradingView.widget({
     ...
     container_id : "widget-frame-container";
});

This means that if you have a div with said id:

<div id="widget-frame-container"></div>

Then I would assume that whatever the script produces will be injected there.


Sorry for not testing and giving a half-assed answer!

ippi
  • 9,857
  • 2
  • 39
  • 50
  • Perfect... And really? I tried to be as specific as I can. Sorry for the misdirection on the question title, what I wanted to do was the actual title itself, but the content was a bit all over the place. But that was an important thing to miss, I guess I was too focus on doing innerHTML to work with script – Bao Thai Apr 21 '17 at 04:17
  • Sorry, I went overboard. I edited out the last bit of snarkiness. – ippi Apr 21 '17 at 04:19