Question

i have this code that should create a dialog with the page google inside when the link is clicked:

<?php use_javascript('/sfJqueryReloadedPlugin/js/jquery-1.3.2.min.js') ?>
<?php use_javascript('/sfJqueryReloadedPlugin/js/plugins/jquery-ui-1.7.2.custom.min') ?>
<?php use_stylesheet('/sfJqueryReloadedPlugin/css/ui-lightness/jquery-ui-1.7.2.custom.css') ?>

<script type="text/javascript">

        $(function (){
                $('a.ajax').click(function() {
                        var url = this.href;
                        var dialog = $('<div style="display:hidden"></div>').appendTo('body');
                        // load remote content
                        dialog.load(
                                url, 
                                {},
                                function (responseText, textStatus, XMLHttpRequest) {
                                        dialog.dialog();
                                }
                        );
                        //prevent the browser to follow the link
                        return false;
                });
        });

</script>

<a class="ajax" href="http://www.google.com">
          Open a dialog
</a>

The problem: it shows the dialog but google is not inside.

I dont have any problems with:

<script type="text/javascript">
    $(function() {
        $("#dialog").dialog();
    });
    </script>


<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Any idea?

Javi

Answer 1

You cant make cross-domain ajax requests. This means that you cant GET the html from google.com and shove it into your dialog. If you want to have google show up in your dialog then you will probably want to use an iframe, or just write your own html to look like google and when they hit search open a new window with the results