Display documents using google doc viewer using iframe and jquery mobile dialog popup in Cordova 3.6

问题

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.