javascript - TradingView-widget som ersätter hela HTML-kroppen

Försöker lägga till TradingView-widget på min webbplats. Denna widget måste laddas när användaren väljer ett alternativ från en rullgardinsmeny.

Problem: Widgeten laddas, men den ersätter allt i body och därmed försvinner dropdown-menyn.

Exempel:

HTML-kod:

<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 (välj alternativ i rullgardinsmenyn, och se widgeten laddas men rullgardinsmenyn försvinner)

Några råd om hur man får rullgardinsmenyn att inte försvinna och samtidigt ladda TradingView-widgeten?

Svar #1

Det är säkerligen för sent, men du kan använda argumentet "container_id" för att välja var du vill placera diagrammet.

källa : https://github.com/mmmy/css3demos/wiki/Widget-Constructor

Svar #2

Så vad jag kan utläsa från widgets-webbplatsen. Vad som än händer är så det fungerar. Så för att detta ska bete sig på det sätt du vill. Du måste använda en iframe i din index.html och skapa en separat fil, säg chart.html, och ge src för iframen som chart.html. Och vid ändring, ändra även src för ramen med en query-parameter och läs den query-parametern i din chart.html och skapa diagrammet. Nedan är koden för din referens.

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>

diagram.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>

Här är en plunker Demo som jag har skapat.

Länken som jag använde för koden för att få queryparametrar.

Hur kan jag få värden från frågesträngen i JavaScript?

Hur det hjälper :)