Intentando agregar widget de TradingView en mi sitio web. Este widget debe cargarse cuando el usuario select una opción de un menú desplegable.

Problema : el widget se carga, pero reemplaza todo en el cuerpo y, por lo tanto, el menú desplegable desaparece.

Ejemplo :

Código HTML:

<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 (seleccione la opción desplegable y vea las cargas de widgets, pero desaparece el menú desplegable)

¿Algún consejo sobre cómo hacer que el menú desplegable no desaparezca y aún así se cargue el widget TradingView?

2
Zeigeist 14 ene. 2017 a las 14:08

3 respuestas

La mejor respuesta

Entonces, ¿qué puedo distinguir del sitio web de widgets? Lo que sea que esté sucediendo es cómo funciona. Entonces, para que esto se comporte de la manera que quieras. Tendrá que usar un iframe. en su index.html y cree un archivo separado, diga chart.html y proporcione el src del iframe como chart.html. Y en el cambio, incluso cambie el src del marco con un parámetro de consulta y lea ese parámetro de consulta en su chart.html y cree el gráfico. A continuación se muestra el código para su referencia.

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>

Aquí hay un plunker Demo que he creado.

El enlace que utilicé para el código para obtener parámetros de consulta.

¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

Azada ayuda :)

5
Community 23 may. 2017 a las 12:01

Este trabajo para mi:

Mi código html:

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

Mi 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>
0
RobC 4 sep. 2019 a las 10:39

Ciertamente es demasiado tarde, pero puede usar el argumento "container_id" para elegir dónde colocar el gráfico.

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

3
gg0512 18 sep. 2017 a las 15:55