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/

EkoostikMartin · Answer 1 · 2013-06-20T16:04:41.630

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/

edited Jun 20 '13 at 16:04

answered Jun 20 '13 at 15:43

EkoostikMartin

6,831
2
33
62

Thank you! It still wouldn't work for a while for some reason (probably because of some other code), but I think I've found a workaround, and this is good info for the next widget I work on. – Michelle Glauser Jun 24 '13 at 17:56

score 0 · Answer 2 · answered Jun 20 '13 at 15:43

0

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'

answered Jun 20 '13 at 15:43

Grant Weiss

355
2
12

That would work if the widget was known to the page, but it is loaded from an external service in this case. Also that is old school javascript not jquery :) – EkoostikMartin Jun 20 '13 at 15:50
Your answer is good because it uses jquery (which I don't know any of), but it will load more and more if you click on it multiple times, and what is wrong with old school?? – Grant Weiss Jun 20 '13 at 15:51
Ok, this isn't my place to be... I need to find some old school javascript questions. – Grant Weiss Jun 20 '13 at 15:59

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

2 Answers2