All geek questions in one place

JQuery dialog box for content from another site

I use jQuery's excellent and simple dialog command to open a dialog box in front of some built-in third-party content. This embedded content can be a page from any website. I can get this to work on some sites (Yahoo, Google), but I can't get it to work on other sites (MSN, Johnlewis, FT).

I removed as much as possible from the code below to give a bare-bone problem - the code, how it is displayed, works fine, and the dialog box does show up. But, comment out the YAHOO line and uncomment the MSN line, then the dialog will not be displayed!

 <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 of is that there must be something on one of the non-working websites that contradict my code - I tried everything to trap the problem, but I can not find the reason for this.

Can anybody help me?

NOTES: - (1) I know that the example, as shown, does not need PHP, but a more complete version (I just deleted most of the PHP code to keep this example small). - (2) I use jQuery elsewhere on the page in a more complete version, so ideally I would like to stay with jQuery, instead of introducing an alternative structure / method.

+6
source share
4 answers

[edit] Apparently, it works for some people. I myself can not get it to work without changes below, though .. [/ edit]

The Firebug console is useful for debugging such things. In this case, I received $ ('# thedialog'), this is not a function error message.

I worked with 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>

I assume that something on these pages contradicts / overrides $, but this seems to work fine (checked by msn.com).

See this page for more information.

+3
source

although I could not reproduce the problem at the end, Terry Seydler's answer is valid. You will encounter collisions with sites that already have dialogs and jQuery.

You have 2 methods to attack this problem (I don’t think that the "no conflict" method will work, since you also use user interface plugins)

  • check if $ defined and $.dialog . If defined, use what the site has, otherwise use dynamic loading

  • use raw JS to add a handler to onload for the page / window and run the function. In this function, you must insert jQuery and jQuery-UI code. This method uses the scope of functions to avoid namespace problems.

To make method 2 more clear, draw the following JS code

 function printMe() { alert("this will print me"); } function printMeToo(){ function printMe(){ alert("this will print me too"); } printMe(); } printMeToo();

This code should warn "it will print me too" - and starting printMe somewhere else on the page will warn "it will print me". This way you will not harm the pages you download (which should also be taken into account) and they will not affect you.

How will it look like? To see how to add an on-source JS handler, you can take a look at this stack question . let's say something like document.addEventListener( 'onload', function () { ... /* important stuff */ });

It is important how this function will look? So this is the expected structure

 function(){ /* important stuff function */ // paste here JQuery definition code (copy paste into here... ) make sure to use the minified code! (function(a,b){function G(a) ... {return p})})(window); // paste other plugins code as well. dialog + ... .... // now your code should be here, exactly like you posted it untouched $("myelement"); // this uses MY JQuery version, and my JQuery-UI version and my plugins without the possibility of an override. The site cannot override my code, and I cannot override the site code. } /* end of really important stuff function here */

Want this method to work and work? I protect my Incapsula site - and therefore they show their print on my site (like your dialogue) - see the Floating div at the bottom right? They use jQuery and other things there, just like I point out here.

BTW - regarding CSS - you might have the same problems. For example, you refer to the .bottom class - other sites may have their own class and CSS. make sure you complete all the dialogue code with a unique identifier (something like gjkelrgjkewrl849603856903ID ) and start all your CSS selectors from it to avoid collisions).

+5
source

You need to remove the style="display:none" code if you want the dialog to open automatically.

Try this code:

 <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 $targetlink = 'http://www.yahoo.com'; echo file_get_contents($targetlink); ?> <div id="thedialog" title="Simple dialog box">My girl lollipop</div> </body>
0
source

I tried my code and it worked for me. Perhaps you have a php error message in the generated source and it conflicts with you JS code.

Check the generated source in the browser.

-1
source

Source: https://habr.com/ru/post/923663/

More articles:


All Articles