Как мне загрузить внешний виджет при нажатии на li в списке?

Question

Если у меня есть элемент списка, как это:

<li class="" id="view_ideas"><a href="#"><span>View ideas</span></a>

И я хочу, чтобы при нажатии на него загружался следующий виджет Get Satisfaction Engage:

<div id="getsat-widget-6135"></div>
<script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js"></script>
<script type="text/javascript">
if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"}); }
</script>

Что я должен делать? Я пытался использовать что-то вроде этого:

<script type ="text/javascript">
    jQuery(function () {
        jQuery('#view_ideas').click(function(){
            var str = jQuery(this).text();
            jQuery('#getsat-widget-6135').load('<div id="getsat-widget-6135"></div>
                <script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js"></script>
                <script type="text/javascript">
                    if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"});     
}
            </script>');
        });
    });

Я пробовал что-то вроде этого:

<script type="text/javascript">
    var script = document.createElement('
    if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"});
       jQuery("#getsat-widget-6135").append("#view_ideas"); }
 </script>')

В основном, ничего не происходит при нажатии на li. Я также играл с.innerHTML и.text, я пытался поместить JavaScript прямо в li или span, и я пытался заменить href скриптом (из-за того, что li и / или виджет исчезли) или показывать в странных местах без каких-либо событий) и т. д.

Вот скрипка, где я играл:

http://jsfiddle.net/nQhDG/

Answer 1

Попробуйте это, вы были довольно близко:

jQuery(function () {
    jQuery('#view_ideas').click(function () {
        if (typeof GSFN !== "undefined") { 
            $('#getsat-widget-6135').empty();
            GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"}); }
    });
});

а также

<script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js">
</script>
<ul id="nav1">
    <li class="" id="view_ideas"><a href="#"><span>View ideas</span></a>
    </li>
</ul>
<div id="getsat-widget-6135"></div>

http://jsfiddle.net/nQhDG/4/

Answer 2

Я бы использовал css и установил бы на дисплей ни один элемент, который вы хотите загрузить. Затем вы можете сделать так, чтобы у li был щелчок мышью, который отображал бы элемент, изменив отображение на блок (или что вы хотите), вы можете сделать это с помощью document.getElementById(идентификатор нужного элемента).style.display='block'