Subject: Iframes in jQuery-UI's dialog

Posted on: 21/04/2013 12:53pm
By: LWC

Did anyone manage to use such a thing?

None of the methods found in a Google search worked for me when I tried them using $_SCRIPTS->setJavaScriptLibrary('jquery.ui...

Does anyone know why?

Here's how it's supposed to work in a PHP staticpage:
PHP Formatted Code

global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery.ui...'); // choose the proper one

$js=''; // take the Javascript code found in that aforementioned Google search

$_SCRIPTS->setJavaScript($js, true, false);
?>

*Put here the HTML code from that aforementioned search*

<?php
echo ""; // This dummy entry is needed to stop Geeklog from failing.
 

Re: Iframes in jQuery-UI's dialog

Posted on: 21/04/2013 08:54pm
By: Laugh

This worked for me in a staticpage. I had the php setting to execute and added this to the page:

PHP Formatted Code

global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery.ui.dialog');

$js='
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function(ev, ui){
             $("#myIframe").attr("src","http://www.jQuery.com");
          }
});

$("#dialogBtn").click(function(){
    $("#dialog").dialog("open");
});
'; // take the Javascript code found in that aforementioned Google search

$_SCRIPTS->setJavaScript($js, true, true);
?>

<div id="dialog">
    Your Iframe Below
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>

<?php

return '';
 

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 03:33am
By: LWC

First of all, if you chose the standard "Execute PHP" then you should change "return" to "echo".

But more importantly, found the problem! I bet you've enabled the cdn_hosted option!
See, when it's on, Geeklog doesn't care one bit which UI module you've turned on.
Instead, it always loads all of the modules (by calling the overall jquery-ui.min.js).

So the iframe code only works with jquery-ui.min.js itself. However, Geeklog provides no automated way to call the local version. So one has to call it manually. But the automated way must still be used in order to load the relevant CSS files. I chose effect-fade because it's the smallest file.

PHP Formatted Code

global $_SCRIPTS, $_CONF;
$_SCRIPTS->setJavaScriptLibrary('jquery.ui.effect-fade'); // dummy file needed in order to load jQuery's CSS files and - in case of cdn_hosted - the actual JS

$cdn_hosted = true;
$js='';
if (empty($_CONF['cdn_hosted'])) {
  $cdn_hosted = false;
  $js .= '<script type="text/javascript" src="' . $_CONF['site_url'] . '/javascript/jquery_ui/jquery-ui.min.js"></script>
<script type="text/javascript">
';
}

$js .= '
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function(ev, ui){
             $("#myIframe").attr("src","http://www.jQuery.com");
          }
});

$("#dialogBtn").click(function(){
    $("#dialog").dialog("open");
});
';

if (empty($_CONF['cdn_hosted']))
    $js .= '</script>';

$_SCRIPTS->setJavaScript($js, $cdn_hosted);
?>

<div id="dialog">
    Your Iframe Below
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>

<?php
echo '';
 

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 09:37am
By: Laugh

Nope the cdn_hosted option is disabled on my site.

The above code works just find for me on Geeklog 1.8.1. I press the open dialog button and the dialog pops open with the iframe inside it.

If you want to add more features to the dialogue like being able to drag it around the screen with my code you would need to add:

PHP Formatted Code
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.draggable');


to the code.

As you suggested we should add the ability to the code to add the entire jquery ui library if that is what the developer desires (jquery-ui.min). Did you want to add a feature request?

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 01:34pm
By: LWC

I can't edit my post but 'jquery.ui.effect-fade' should be replaced with 'jquery.ui.core' (which is loaded anyway if effect-fade is called, so let's spare the middleman).

Anyway, you say your original code works for you even with cdn_hosted disabled. Are you aware that at least in Geeklog's old v1.8.2 demo site, it uses a special jQuery plugin that uses cdn_hosted even if cdn_hosted is disabled? That's why it works there (i.e. because it ignores your orders and calls the overall jquery-ui.min.js).

Your original code fails (at least for me) in Geeklog's new demo site.
Please check it in v2.0.0 which is Geeklog's official version now.

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 04:15pm
By: Laugh

I was using my own sites for all my original tests. The code here will work on Geeklog 2.0.0 (tested on my site and the actual Geeklog demo site).
PHP Formatted Code

global $_SCRIPTS;
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.dialog');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.draggable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.droppable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.resizable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.button');

 $js='
  $(function() {
    $( "#dialog" ).dialog();
  });
 '; // take the Javascript code found in that aforementioned Google search

 $_SCRIPTS->setJavaScript($js, true, true);
 ?>

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

<?php

echo '';
 

You are right about the code in my previous post. It will not work in Geeklog 2.0.0. Geeklog 2.0.0 contains a much newer version of jQuery and jQuery UI. If you add this line to the code to my previous post example (it is a requirement of the dialog now), it will now work:

PHP Formatted Code
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.button');
 

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 05:23pm
By: LWC

Well played, my friend, well played. I've previously tried calling all of the libraries, but it failed. Looks like it needs only the relevant ones. So how did you realize which libraries it needed?

Also, can I make it auto width/height? Your height statement seems to affect the window, not the iframe inside that window.

Here's the full updated code:
PHP Formatted Code

global $_SCRIPTS;
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.dialog');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.draggable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.droppable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.resizable');
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.button');

$js='
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function(ev, ui){
             $("#myIframe").attr("src","http://www.jQuery.com");
          }
});

$("#dialogBtn").click(function(){
    $("#dialog").dialog("open");
});
';

$_SCRIPTS->setJavaScript($js, true, true);
?>

<div id="dialog">
    Your Iframe Below
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>

<?php
echo '';
 

Re: Iframes in jQuery-UI's dialog

Posted on: 22/04/2013 06:30pm
By: Laugh

Quote by: LWC

Well played, my friend, well played. I've previously tried calling all of the libraries, but it failed. Looks like it needs only the relevant ones. So how did you realize which libraries it needed?



I had to guess on that one since the jquery docs are not updated to version 1.9

Here is the 1.8 docs that show a list of Dependencies for that version:

http://docs.jquery.com/UI/API/1.8/Dialog

Tom

Geeklog - Forum
https://www.geeklog.net/forum/viewtopic.php?showtopic=94946