Forum Discussion

mannerheim's avatar
13 years ago

Retrieving External Content into Lithium Component

What's the best practice for retrieving external content into a Lithium component?  We were thinking JQuery, but what is the standard way to do this?  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).  Any ideas?  Below is our code.

 

 

<div id="wcmDiv"></div>

<a href="http://www.google.com" class="ajaxtrigger">load some content</a>

<@liaAddScript>

(function ($) {

   var container = $('#wcmDiv');

   $('.ajaxtrigger').click(function(){

      doAjax($(this).attr('href'));

      return false;

   });

 

   function doAjax(url){

      // if it is an external URI

      if(url.match('^http')){

         // call YQL

         var firstArg = "http://query.yahooapis.com/v1/public/yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+

         encodeURIComponent(url)+"%22&format=xml'&callback=?";

 

         alert(firstArg);

         $.getJSON(firstArg,

            // this function gets the data from the successful

            // JSON-P call

            function(data){

               // if there is data, filter it and render it out

               if(data.results[0]){

                  var data = filterData(data.results[0]);

                  alert(data);

                  container.html(data);

               }

               // otherwise tell the world that something went wrong

               else {

                  var errormsg = '<p>Error: could not load the page.</p>';

                  container.html(errormsg);

               }

            }

         ); //end getJSON call

 

         // if it is not an external URI, use Ajax load()

      }

      else {

         $('#target').load(url);

      }

   }//end doAjax function

 

   // filter out some nasties

   function filterData(data){

      data = data.replace(/<?\/body[^>]*>/g,'');

      data = data.replace(/[\r|\n]+/g,'');

      data = data.replace(/<--[\S\s]*?-->/g,'');

      data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');

      data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');

      data = data.replace(/<script.*\/>/,'');

      return data;

   }

 

   alert("here");

})(LITHIUM.jQuery);

</@liaAddScript>

  • AdamN's avatar
    AdamN
    Khoros Oracle

    Hi mannerheim,

     

    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.

     

    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
    • Has anyone successfully completed this solution? I'm interested in doing something similar on our site.
      • HaidongG's avatar
        HaidongG
        Lithium Alumni (Retired)

        here is my code working with some JSON Web services.

         

        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"];      
        }