Виджет TradingView, заменяющий весь HTML-код

Попытка добавить TradingView widget на мой сайт. Этот виджет должен загружать, когда пользователь select вариант из выпадающего списка.Виджет TradingView, заменяющий весь HTML-код

выпуск: виджет загружается, но он заменяет все в теле и, следовательно, выпадающее меню исчезает.

Пример:

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 (выберите раскрывающийся вариант, и увидеть виджет нагрузок, но выпадающий исчезает)

Любые советы о том, как сделать выпадающее меню, не исчезают, а загрузка виджета TradingView загружается?

источник

2017-01-14 Zeigeist

Вопросы, относящиеся к jdfiddle и не показывая никакого кода не принимаются на SO. Вы должны выполнить основное редактирование. – mkluwe

@mkluwe: добавлен связанный код на вопрос. – Zeigeist

@ Zeigeist взгляните на ответ, отправленный мной. Не забывайте поднимать и принимать, если он решает вашу проблему. :) – Manish

Так что я могу разобраться с веб-сайта виджетов. Все, что происходит, это то, как это работает. Поэтому для этого нужно вести себя так, как вы хотите. Вам нужно будет использовать iframe. в вашем index.html и создайте отдельный файл say chart.html и дайте src iframe как chart.html. И при изменении даже измените src фрейма с параметром запроса и прочитайте этот параметр запроса в chart.html и создайте диаграмму. Ниже приведен код для вашей справки.

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>

Вот plunker Demo я создал.

Ссылка, которую я использовал для кода, чтобы получить параметры запроса.

How can I get query string values in JavaScript?

Hoe это помогает :)

источник

2017-01-14 17:13:11 Manish