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 http://lithosphere.lithium.com/t5/Ideas/Access-to-external-data-sources-via-a-custom-component-endpoint/idi-p/61442

Thanks

Chris

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

5 Replies

Related Content

API Call for Retrieving Pre-Moderation Messages

Aurora: Consent to add external videos to posts

Trying to retrieve community URL with context object

Component to Retrieve Floating Thread

Aurora: Understanding the Salesforce connector components and their entities

Recent Discussions

liqlAdmin in khoros aurora graphql API

Join node/group 301 API error

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

How to retrieve "Internal reason for ban" field

Tips on keeping stage and prod in alignment?