Home/ Questions/Q 8427711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:51:13+00:00

I’m using jQuery’s lovely and simple dialog command to open a dialog box in

  • 0

I’m using jQuery’s lovely and simple dialog command to open a dialog box in front of some embedded 3rd party content. This embedded content could be a page from any website. I CAN get this to work on some sites (Yahoo, Google) but I CANNOT get it to work on other sites (MSN, Johnlewis, FT).

I’ve stripped out as much as possible from the code below to give the bare bones of the problem – the code as it is shown works fine and the dialog box does display. But, comment out the YAHOO line and uncomment the MSN line, then the dialog won’t display!!

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <style>
        .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; }
        .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222;  font-size: 20pt;}
    </style>
        <script>
            $(document).ready(function() {
                $( "#thedialog" ).dialog( "destroy" );
                $( "#thedialog" ).dialog({height:400, width:600, modal: true,
                    buttons: {Cancel: function() {$( this ).dialog( "close" );}}
                });
            });
    </script>
</head>
<body>
    <?php 
        // WORKING - these pages DO launch a dialog:
        $targetlink = 'http://www.yahoo.com';
        // $targetlink = 'http://www.bbc.co.uk';
        // $targetlink = 'http://www.google.com';

        // NOT WORKING - these pages do NOT launch a dialog:
        // $targetlink = 'http://www.msn.com';
        // $targetlink = 'http://www.johnlewis.com';
        // $targetlink = 'http://www.ft.com';

        echo file_get_contents($targetlink);
    ?>
    <div id="thedialog" title="Simple dialog box" style="display:none">My girl lollipop</div>
</body>

The only thing I can think is it must be something on one of the non-working websites that’s conflicting with my code – I’ve tried everything to error-trap the issue but can’t find what’s causing it.

Can anyone help me please?

NOTES:
– (1) I know the example as shown doesn’t need PHP, but the fuller version
does (I just stripped most of the PHP code away to keep this example
small).
– (2) I’m using JQuery elsewhere in the page on the fuller version
so ideally I’d like to stay with JQuery, rather than introducing an alternative framework/method.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    [edit] Apparently it is working for some people.. I myself cannot get it to work without the changes below though.. [/edit]

    The Firebug console is useful for debugging stuff like this. In this case, I got a $(‘#thedialog’) is not a function error message.

    I got it working using jQuery noConflict:

    <script>
    var $j = jQuery.noConflict();
        $j(document).ready(function() {
            $j( "#thedialog" ).dialog( "destroy" );
            $j( "#thedialog" ).dialog({height:400, width:600, modal: true,
                buttons: {Cancel: function() {$( this ).dialog( "close" );}}
            });
    });
    </script>

    My guess is that something on those pages is conflicting/overriding $, but this seems to work fine (tested msn.com).

    Have a look at this page for more information.

    • 0