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

Question

[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.

Sorry, but I am not seeing them - maybe I use the wrong browser? Can you tell what they are and how to correct? — Mawg
– Mawg, Commented Oct 29, 2017 at 13:43
Aha! Thanks; ok, I will inject it & update the link in question. Meanwhile, can you answer the problem? — Mawg
– Mawg, Commented Oct 29, 2017 at 13:47

Maxim Shoustin · Accepted Answer · 2017-10-31 12:46:52Z

1

+50

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

edited Oct 31, 2017 at 12:46

answered Oct 31, 2017 at 12:40

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mawg Over a year ago

That look great (+1), but I need to be able to get the URL from a 3rd party site :-( Would it help if I change the content of fiddleapi.rf.gd/getDocuemntUrl.php to have the same contents as your data,js ?

Maxim Shoustin Over a year ago

@Mawg The browser will block you with cross Domain security prob.

Mawg Over a year ago

OIC :-( Then, if there is no other way, I will have to generate the whole HTML page server side in PHP, not load the HTML and then try to get that URL by AJAX. If I generate the whole page server side, then I can include the URL hard coded in it.

Maxim Shoustin Over a year ago

you can attach PHP file to your angular project and PHP will call server side PHP. So you will get rid of cross domain

Mawg Over a year ago

A very good point, of course (as always, from you :-) I am coding something for a friend, and he wanted 2 sites, although I recommended only one. I will see if I can persuade him.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related