jQuery dialog over content from another site
dialog, jquery, jquery-ui, modal-dialog, php
Solution
[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.
Problem
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.