javascript - TradingView widget replacing entire HTML body

Trying to add TradingView widget into my website. This widget must load when user select an option from a dropdown.

Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.

Example:

HTML Code:

<select name="fx" class="fx">
    <option value="EURUSD">EURUSD</option>
    <option value="EURJPY">EURJPY</option>
</select>

JS:

function changeFX(fx){
  var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
  return themeWidget;
}

$(document).on('change','.fx',function(){
   var widget = changeFX(this.value);
   // do something with widget.

});

(select dropdown option, and see widget loads but dropdown disappears)

Any advice how to make the dropdown doesn't disappear and still TradingView widget load?

Trying to add TradingView widget into my website. This widget must load when user select an option from a dropdown.

Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.

Example:

HTML Code:

<select name="fx" class="fx">
    <option value="EURUSD">EURUSD</option>
    <option value="EURJPY">EURJPY</option>
</select>

JS:

function changeFX(fx){
  var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
  return themeWidget;
}

$(document).on('change','.fx',function(){
   var widget = changeFX(this.value);
   // do something with widget.

});

http://jsfiddle.net/livewirerules/3e9jaLku/5 (select dropdown option, and see widget loads but dropdown disappears)

Any advice how to make the dropdown doesn't disappear and still TradingView widget load?

Share Improve this question edited Jan 14, 2017 at 16:23 asked Jan 14, 2017 at 11:08 Zeigeist 4,0154 gold badges22 silver badges22 bronze badges

Questions referring to jdfiddle and showing no code are not accepted on SO. You should perform a major edit. – mkluwe Commented Jan 14, 2017 at 13:30
@mkluwe: added related code to the question. – Zeigeist Commented Jan 14, 2017 at 16:24
@Zeigeist have a look at the answer posted by me. Dont forget to upvote and accept if it solves your problem. :) – Manish Commented Jan 14, 2017 at 17:14
@Manish: thanks for detailed answer, it worked like a charm. – Zeigeist Commented Jan 14, 2017 at 19:48

Add a comment |

3 Answers 3

Sorted by: Reset to default 9

It's certainly too late, but you can use the argument "container_id" to choose where to place the graph.

source : https://github.com/mmmy/css3demos/wiki/Widget-Constructor

So what i can make out from the widgets website. Whatever is happening is how it works. So for this to behave the way you want. You will have to use a iframe. in your index.html and create a separate file say chart.html and give the src of the iframe as chart.html. And on change even change the src of the frame with a query parameter and read that query parameter in your chart.html and create the chart. Below is the code for your reference.

index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
      $(document).on('change','.fx',function(){
       //var widget = changeFX(this.value);
        document.getElementById('content').src = "chart.html?value="+this.value;
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:400px;
    width:600px;
    display:none;
  }
</style> 
  </head>
  <body>
   <select name="fx" class="fx">
              <option value="EURUSD">EURUSD</option>
              <option value="EURJPY">EURJPY</option>
</select>
<iframe src="chart.html" id="content" >

</iframe>
  </body>
</html>

chart.html

<html>
  <head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script>
    function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var fx = getParameterByName('value');
      var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
    </script>
  </head>
  <body>
  </body>
</html>

Here is a plunker Demo i have created.

The link that i used for the code to get queryparameters.

How can I get query string values in JavaScript?

Hoe it helps :)

This work for me:

My html code:

<div class="dropdown no-arrow">
  <select id="my_stocks" class="form-control">
    <option value=" ">Select Stock</option>
    <option value="AAPL">AAPL</option>
    <option value="TSLA">TSLA</option>
  </select>
</div>
<div class="card-body">
  <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container tech_analysis">
  <div id="tradingview_3418f"></div>
  <div class="tradingview-widget-copyright">
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%", 
"height" : 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_3418f"
});
</script>
</div>
<!-- TradingView Widget END -->
</div>

My Jquery:

<script>
$(document).on('change','#my_stocks',function(){
  var stock_selected = $(this).val();
  var fxWidget = new TradingView.widget({
    "width": "100%", 
    "height" : 610,
    "symbol": "NASDAQ:"+stock_selected,
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "Light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_3418f"
  }); 
});
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - TradingView widget replacing entire HTML body - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)