CODEWITHSUNDEEP
angularjsembed
Mawg
Mawg

Reputation: 40185

(Angular) Js embedding an MS Word doc using AJAX return data as the URL

[Update] there is a 50 point bonus, which I will up to 200 for a working fiddle

[Update] while I prefer an AngualrJs solution, I will also accept plain JS - just anything to get me over this impasse ... a GET call to my server returns a URL and I want to embed that document into my HTML

With reference to my previous question, @MaximShoustin 's answer seemed perfect, but I am having problems.

The URL in that solution there is hard coded, but I want to get mine by AJAX. When I do, the document is not embedded, but I see no error in the developer console.

I made this fiddle, where I added these lines

to the HTML

  <iframe ng-src="{{cvUrlTrusted_2}}"></iframe>

and, to the controller

  app.controller('Ctrl', function($scope, $sanitize, $sce, $http) {

added , $http

and

  //  new stuff follows
  var url = 'http://fiddleapi.rf.gd/getDocuemntUrl.php';

  /* The URL contains this code ...
      <?php
        echo('https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc');   
                ?>     
  */
        $http.get(url)
      .success(function(data, status, headers, config)
         { 
              var cvTrustedUrl_2 = 'http://docs.google.com/gview?url=' + data.trim() + '&embedded=true';
              $scope.cvTrustedUrl = $sce.trustAsResourceUrl(cvTrustedUrl_2);
        })
         .error(function(data, status, headers, config)
          {
             alert('Urk!');
          });

If you invoke the API at http://fiddleapi.rf.gd/getDocuemntUrl.php you will see that it returns the same document URL as was hard coded in the solution.

Please, first check my code, lest I have made a mistake.

Long description, short question : how can I embed a document who's URL is returned from an AJAX API into an HTML document using AngularJS? Free free to fork the fiddle.

Upvotes: 1

Views: 529

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

Your fiddle doesn't work because of cross domain problem: http://fiddleapi.rf.gd/getDocuemntUrl.php

So I loaded simple JSON file with content:

{
  "val":"https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc"
}

and:

$http.get('data.json').then(function (resp){
      var cvTrustedUrl_2 = 'http://docs.google.com/gview?url=' + resp.data.val + '&embedded=true';
    $scope.cvUrlTrusted_2 = $sce.trustAsResourceUrl(cvTrustedUrl_2); 
});

Demo Plunker

It works fine so the problem is in your http://fiddleapi.rf.gd/getDocuemntUrl.php because this URL doesn't work in Postman too. I get:

This site requires Javascript to work, please enable Javascript in your browser or use a browser with Javascript support

be sure you configured it well

Upvotes: 1

Related Questions