0

I have a need to display a cross-domain webpage in a nav-tab content box. I am using the "whatever origin" example explained in this link

Loading cross domain endpoint with jQuery AJAX

and my HTML code looks like this:

  <section class="local-market-stats">
     <div id="market-condition-chart-wrap">
       <ul class="nav nav-tabs" id="myTabs">
          <li class="active"><a data-toggle="tab" href="#cc">CC</a></li>
          <li><a data-toggle="tab" href="#fm">FM</a></li>
          <li><a data-toggle="tab" href="#et">ET</a></li>
          <li><a data-toggle="tab" href="#bs">BS</a></li>
       </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="cc">
              <div></div> <!-- the external page content displays here -->
            </div>

            <div class="tab-pane" id="fm">
            </div>

            <div class="tab-pane" id="et">
            </div>

            <div class="tab-pane" id="bs">
            </div>
          </div><!-- end tab-content -->
     </div><!-- end market-condition-chart-wrap -->
   </section><!-- end local-market-stats -->

Ajax Code:

$.ajaxSetup({
      datatype : "html",
      contentType: "application/x-www-form-urlencoded; charset=UTF-8"
});

$.getJSON('http://whateverorigin.org/get?url=' +  encodeURIComponent('http://www.marketrendspremium.com/share/v1/e/cmlkPTEmZnRpZD0yJmZpZD0xMDAwJmd0eT0xMiZsdGlkPTQmbGlkPTk5OTk5JmdpZD0wJmNjPTAwMDBkZCZzaWQ9MCZtaWQ9MCZ0dD0yJm1vZGU9MiZ3aWR0aD01NDAmaGVpZ2h0PTMzMCZtbHNpZD0wJmN0eT1tbHM=')
       + '&callback=?',

       function(data) {
           $('#cc div').html(data.contents);
});

Nothing was displayed as a result, but if I switch it back to encodeURIComponent('http://google.com') it works just fine. I really don't need to encode the url as the link should display just like that, but it still doesn't work even I removed encodeURIComponent().

Any advice is greatly appreciated!

Community
  • 1
  • 1
user1672793
  • 59
  • 6
  • Try to change ajaxSetup's contentType to `application/json; charset=utf-8`. And datatype in your ajaxSetup is not needed. – vitalikaz Oct 24 '14 at 14:10
  • Thanks for your help. Well the content of the web page is a chart, after I changed it to application/json, the chart didn't display, only a note "chart goes here" displayed. – user1672793 Oct 24 '14 at 14:22
  • So it's another problem now. You get a full HTML of the page and just insert it into a div. This is not correct for your usecase. Why do you need such a thing? I think you should be able to get data you need (not whole page's HTML, just data) and initiate a chart locally on your page. – vitalikaz Oct 24 '14 at 14:55
  • That's a great question. actually the site provides an iframed content like this '', and I couldn't get it displayed in the newer firefox browser. Later I learned that the other major browsers will do the same thing, to display the iframed content I need to click a "shield" icon. so I need another soluti – user1672793 Oct 24 '14 at 15:02

1 Answers1

0

I got it to work, but I'm not sure if it's really what you were looking for. First a couple of notes:

  • when you got the message "chart goes here" - that was the body of the webpage returned by marketrendspremium.com, meaning your request was working
  • in my case during testing, when I got that message, I also received a javascript error saying Highcharts is not defined.
  • basically, marketrendspremium.com was returning a nearly empty HTML body, with a bunch of javascript to build the chart, and the javascript wasn't working because Highcharts wasn't defined.

OK so that's where I was, with a javascript error that I couldn't fix because I had no control over marketrendspremium.com. So I reviewed their response, and they're including their own javascript library:

<script type="text/javascript" src="http://209.20.80.108/chart/js/highcharts.js"></script>

I took a guess that this library defines Highcharts, and that if I include that library on my own page, it might solve the problem, and it did. I didn't use JSON though, I used corsproxy.com. Here's the source code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://209.20.80.108/chart/js/highcharts.js"></script>
<script type="text/javascript">
    // this variable isn't necessary but it made the code easier to read
    var url = 'www.marketrendspremium.com/share/v1/e/cmlkPTEmZnRpZD0yJmZpZD0xMDAwJmd0eT0xMiZsdGlkPTQmbGlkPTk5OTk5JmdpZD0wJmNjPTAwMDBkZCZzaWQ9MCZtaWQ9MCZ0dD0yJm1vZGU9MiZ3aWR0aD01NDAmaGVpZ2h0PTMzMCZtbHNpZD0wJmN0eT1tbHM=';
    $.get('http://www.corsproxy.com/' + url,
        function(data) {
            $('#cc div').html(data);
        }
    );
</script>
<section class="local-market-stats">
    <div id="market-condition-chart-wrap">
        <ul class="nav nav-tabs" id="myTabs">
            <li class="active"><a data-toggle="tab" href="#cc">CC</a></li>
            <li><a data-toggle="tab" href="#fm">FM</a></li>
            <li><a data-toggle="tab" href="#et">ET</a></li>
            <li><a data-toggle="tab" href="#bs">BS</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="cc">
                <div></div> <!-- the external page content displays here -->
            </div>
            <div class="tab-pane" id="fm"></div>
            <div class="tab-pane" id="et"></div>
            <div class="tab-pane" id="bs"></div>
        </div><!-- end tab-content -->
    </div><!-- end market-condition-chart-wrap -->
</section><!-- end local-market-stats -->
Mike Willis
  • 1,493
  • 15
  • 30
  • This absolutely works. I tried that solution and had the same issue but didn't think about inserting the chart script was all I needed to do. Thank you so much! – user1672793 Oct 24 '14 at 16:15
  • No problem, glad it worked for you! Just a note to keep in mind, you'll have to monitor the location of the highcharts.js script and change your source code whenever it gets moved. Usually that means it'll stay the same for 5 years, you'll forget all about it, then they'll move it and you'll spend hours remembering all of this! – Mike Willis Oct 24 '14 at 16:15
  • 1
    Wow, thanks so much for the tip. I can't image what I have to go through if you didn't remind me. Great tips! – user1672793 Oct 24 '14 at 16:20