JqueryUI: a link that opens a dialog

Question

Hi,

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"&gt;
          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

Answer 2

For security reasons, you cannot make an AJAX request to a domain other than the domain that originally served the webpage. For examples of security risks, see http://en.wikipedia.org/wiki/Same_origin_policy

Instead, you should consider using a hidden iframe with the Google page loaded inside of it that will then appear in the correct location when the button is clicked.

For example:

<iframe src="http://www.google.com/" style="display:none">
  <p>Your browser does not support iframes.</p>
</iframe>