How do I have an external widget load upon clicking on an li in a list?

Question

If I have a list item like this:

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

And I want to have it load the following Get Satisfaction Engage widget when it's clicked on:

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

What should I do? I've tried using something like this:

<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>');
        });
    });

I've tried something like this:

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

Mostly, nothing happens when the li is clicked on. I've also played with .innerHTML and .text, I've tried putting the JavaScript right into the li or the span and I've tried replacing the href with the script (both of which make the li and/or widget either disappear or show up in weird locations without any event), etc.

Here's the fiddle where I've been playing:

http://jsfiddle.net/nQhDG/

Answer 1

Try this, you were pretty close:

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

and

<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

I would use css and set the display to none of the item you want loaded. Then you can make the li have an onclick which would show the item by changing display to block (or whatever you want) you can do this by document.getElementById(id of item needing shown).style.display='block'