6

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.

FishBasketGordo
  • 22,904
  • 4
  • 58
  • 91
Steve
  • 614
  • 5
  • 16
  • I checked the code and it seems to work. - I need more details in order to help – guy mograbi Aug 24 '12 at 12:51
  • I suggest you use chrome with f12, to see if you get errors in JS console. for more details, I've set up a wiki page on developers tools in chrome: http://wiki.mograbi.info/developers-tools-for-web-development - this post also explains how to error-trap JS in different method. – guy mograbi Aug 24 '12 at 12:52
  • Nothing open your dialog box. Remove the "style="display:none;" part of your div and add the parameter "autoOpen: true" to your dialog creation – sdespont Aug 24 '12 at 12:54
  • Correct - the code AS IS does work, but as I mentioned, if you comment OUT the line "$targetlink = 'http://www.yahoo.com';" and UNcomment the line "// $targetlink = 'http://www.msn.com';" it won't work – Steve Aug 24 '12 at 12:55
  • And you don't need to destroy your dialog box before the creation – sdespont Aug 24 '12 at 12:55
  • Hi @Steve - I mean it is working with comment/uncomment as you suggested. I successfully opened the dialog with the 3 links under the "NOT WORKING" comment – guy mograbi Aug 24 '12 at 12:56

4 Answers4

5

even though I was unable to reproduce the problem on my end, Terry Seidler's answer is valid. You will experience collisions with sites that already have dialogs and JQuery.

You have 2 methods to attack this problem (I don't think the 'no conflict' method will do as you are also using UI plugins )

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

  2. use raw JS to add handler to onload for page/window, and run a function. In this function you should paste JQuery's and JQuery-UI's code. This method uses the function's scope to avoid namespace issues.

Just to make method 2 more clear, image 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 alert "this will print me too" - and running printMe anywhere else on page will alert "this will print me". This way you will not harm the pages you are loading (which is also something you should consider) and they will not have an effect on you.

How will it look like? In order to see how to add raw JS onload handler, you can have a look at this stackoverflow question. lets say it is something like document.addEventListener( 'onload', function () { ... /* important stuff */ });

The important thing is how will this function look like? 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's code. 

} /* end of really important stuff function here */

Wanna see this method live and running? I protect my site with Incapsula - and so they show their seal on my site (kind of like your dialog) - see the floating div on bottom right? They use JQuery and other stuff there too just like I specify here.

BTW - regarding CSS - you might get same problems there. For example you refer to class .bottom - other sites might have that exact class and CSS of their own. make sure you wrap the entire dialog code with a very unique ID (something like gjkelrgjkewrl849603856903ID - and start all your CSS selectors with it to avoid collisions).

Community
  • 1
  • 1
guy mograbi
  • 27,391
  • 16
  • 83
  • 122
  • Guy, thanks for the answer - Terry's answer solved the problem and all is working. However, are you suggesting from your answer that I might still encounter future problems/conflicts I've not yet discovered, so should try your approach even though Terry's worked? I've tried what I 'think' you meant but it hasn't worked (no doubt due to my coding rather than your suggestion!): `myfunc() { $(document).ready(function() { $( "#thedialog" ).dialog({height:400, etc, etc }); }; etc, etc...` – Steve Aug 24 '12 at 13:38
3

[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.

Terry Seidler
  • 2,043
  • 15
  • 28
  • THIS IS THE BEST ANSWER - I would 'up-vote' if I could, to show others that this solved it, but I'm new here so if anyone else can up-vote this answer for me (to help others know it's the one that solved the issue) that would be great. Thanks Terry - that's a great help - I had a hunch come type of conflict might have been occurring - I even stumbled across the 'noConflict' command, but couldn't get it to work - you've been really helpful – Steve Aug 24 '12 at 13:08
  • @Steve - should be able to vote with >15 points now, but also have a look at Guy mograbi's post, he seems to have a bit more experience with this ;) – Terry Seidler Aug 24 '12 at 13:16
0

You need to remove the style="display:none" code if you want that the dialog will be opened 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>
sdespont
  • 13,915
  • 9
  • 56
  • 97
  • Agreed, you're right (this was a left-over bit of code from the fuller version - the dialog used to be triggered onclick, so the display:none hid the dialog contents until the onclick ocurred. Thanks for the comment) – Steve Aug 24 '12 at 13:06
-1

I've tried your code, and it worked for me. Maybe you have a php error message in the generated source and it conflict with you JS code.

Check the generated source in browser.

pirklajos
  • 38
  • 2
  • This is really a comment, not an answer. With a bit more rep, [you will be able to post comments](http://stackoverflow.com/privileges/comment). For the moment I'm flagging this post for deletion. – Lix Aug 24 '12 at 12:49