1

I'm trying to display text documents inside google doc viewer which is inside an iframe which is then inside an jquery mobile dialog. I'm using cordova 3.6 and trying this on iOS.

Here's my code so far:

<div data-role="page" id="dialog">
<iframe id="myIframe" src="" style="width: 100%; height: 100%;" ></iframe>
</div>
<button href="foo.html" id="opener" data-rel="dialog" data-transition="pop">Open Dialog</button>

the functions:

<script>
 $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                show: "fade",
                hide: "fade",
                modal: true,
                open: function (ev, ui) {
                    $('#myIframe').src = 'http://docs.google.com/viewer?url=http://www.relacweb.org/conferencia/images/documentos/Hoteles_cerca.pdf';
                },
                height: 'auto',
                width: 'auto',
                resizable: true
//                title: 'Vessels'
            });

            $("#opener").click(function () {
                $("#dialog").dialog("open");
                return false;
            });
</script>

jquery used:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

On the browser this works as required but not on Cordova. The iframe is already loaded with the pdf and nothing happens with the button click. So is it just not possible or am i missing something?

Thanks.

allwynmasc
  • 393
  • 5
  • 18
  • for opening a pdf with phonegap please check this out (http://stackoverflow.com/questions/16795172/phonegap-inappbrowser-display-pdf-2-7-0) – mboeckle Oct 17 '14 at 12:32
  • @mboeckle i had seen that thread before putting the qstn, as i said this works on browser but not in the cordova app, so im not sure what am i missing. – allwynmasc Oct 18 '14 at 08:36
  • hi - maybe you use a combination of a JS pdf viewer http://www.designyourway.net/drb/a-list-of-jquery-pdf-viewers-available-at-the-moment/ and the jquery-mobile popup (http://demos.jquerymobile.com/1.4.4/popup/) – mboeckle Oct 18 '14 at 08:43
  • @mboeckle hi! as of now i'm using google doc viewer inside and iframe which is inside an `data-role="page"` which displays fine. But now there's a "download" link at the bottom of the viewer which opens the actual pdf itself in the app webview, any ideas on how can i take it out? – allwynmasc Oct 18 '14 at 08:55
  • 1
    guess you have to use the inappbrowser - http://stackoverflow.com/questions/17520348/open-pdf-in-the-phonegap-app-that-is-made-in-html-and-css – mboeckle Oct 18 '14 at 09:00
  • @mboeckle beauty! i was under the impression inappbrowser is already in the app, but i installed the plugin and it worked, that too with a proper close button. This is the best way to display the pdf for now. You should put this as an answer below. Thanks! – allwynmasc Oct 18 '14 at 09:13

1 Answers1

1

You can use the inappbrowser plugin which has been discussed here.

best

M

Community
  • 1
  • 1
mboeckle
  • 938
  • 13
  • 29