Retrieving External Content into Lithium Component

Question

What's the best practice for retrieving external content into a Lithium component?&nbsp; We were thinking JQuery, but what is the standard way to do this?&nbsp; We found a small JQuery snippet online to try to pull in the google.com home page, but it's not working in the Lithium component editor (returns partially processed HTML code, and unprocessed code).&nbsp; Any ideas?&nbsp; Below is our code.&nbsp;&nbsp;&lt;div id="wcmDiv"&gt;&lt;/div&gt;&lt;a href="http://www.google.com" class="ajaxtrigger"&gt;load some content&lt;/a&gt;&lt;@liaAddScript&gt;(function ($) {&nbsp;&nbsp; var container = $('#wcmDiv');&nbsp;&nbsp; $('.ajaxtrigger').click(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; doAjax($(this).attr('href'));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp; function doAjax(url){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // if it is an external URI&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(url.match('^http')){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // call YQL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var firstArg = "http://query.yahooapis.com/v1/public/yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; encodeURIComponent(url)+"%22&amp;format=xml'&amp;callback=?";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(firstArg);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.getJSON(firstArg,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // this function gets the data from the successful&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // JSON-P call&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function(data){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // if there is data, filter it and render it out&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(data.results[0]){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = filterData(data.results[0]);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container.html(data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // otherwise tell the world that something went wrong&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var errormsg = '&lt;p&gt;Error: could not load the page.&lt;/p&gt;';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container.html(errormsg);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ); //end getJSON call&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // if it is not an external URI, use Ajax load()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('#target').load(url);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp; }//end doAjax function&nbsp;&nbsp;&nbsp; // filter out some nasties&nbsp;&nbsp; function filterData(data){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/&lt;?/body[^&gt;]*&gt;/g,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/[|
]+/g,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/&lt;--[\S\s]*?--&gt;/g,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/&lt;noscript[^&gt;]*&gt;[\S\s]*?&lt;/noscript&gt;/g,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/&lt;script[^&gt;]*&gt;[\S\s]*?&lt;/script&gt;/g,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data = data.replace(/&lt;script.*/&gt;/,'');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return data;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; alert("here");})(LITHIUM.jQuery);&lt;/@liaAddScript&gt;

haidongg · Answer

here is my code working with some JSON Web services.
&nbsp;
function callAjax() {
    LITHIUM.jQuery.ajax({
        url: "${ajaxURL}",
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'callbackFunctionOnceJsonpReturnedProperly',
        timeout: ${ajaxTimeout},
        success: function(){
            //alert("success");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            .......
        }
    });
}

function callbackFunctionOnceJsonpReturnedProperly(data, textStatus, xhr){
    if (typeof (data) == 'undefined' || data == null) {
        alert("jsonpCallback object is null");
        return;
    }
    
    var username = data["username"];      
}
&nbsp;

adamn · Answer

Hi mannerheim,
&nbsp;
JavaScript is indeed the suggested way for pulling in external content. jQuery and other libraries make it pretty easy to make external requests. I took a quick look at your snippet and it seems to be working as expected, as far as I can tell.
&nbsp;
There are probably a few reasons why the result doesn't look very pretty:

CSS isn't being pulled in from Google, so the same styling isn't getting applied
The images getting pulled in have relative URLs, so they're pointing to non-existant resources on the community
Your code snippet is stripping out javascript, which is probably a good thing for security reasons, but could also affect how the content is rendering

cblown · Answer

We think that Lithium should provide a way to pull external data in server side using Freemarker. Please support our Idea here&nbsp;http://lithosphere.lithium.com/t5/Ideas/Access-to-external-data-sources-via-a-custom-component-endpoint/idi-p/61442&nbsp;ThanksChris

rholder · Answer

Has anyone successfully completed this solution? I'm interested in doing something similar on our site.

rholder · Answer

I added my support to your idea. &nbsp;In my particular situation, I would love to retrieve data from an external RSS feed and display it within a component.

Forum Discussion

Retrieving External Content into Lithium Component

Related Content

List of Khoros Community OOTB and Custom components

Trying to retrieve community URL with context object

Component to Retrieve Floating Thread

Delete an SDK @override Component?

What is the component for blog contributors?

Recent Discussions

Connecting Khoros data to CRM (Salesforce)

How do I get the article ID in Freemarker in a TkbArticle?

400/404 error on POST request

Online User Count is Completely Wrong

TinyMceEditor is undefined