The secure CMS.

Welcome to Geeklog, Anonymous Saturday, November 23 2024 @ 12:12 pm EST

Geeklog Forums

Iframes in jQuery-UI's dialog

 New Topic  Post Reply
 04/21/13 12:53pm (Read 8,936 times)  
Status: offline

LWC

Forum User
Full Member
Registered: 02/19/04
Posts: 818
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:
Text 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.
 
 Quote
 04/21/13 08:54pm  
Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
This worked for me in a staticpage. I had the php setting to execute and added this to the page:

Text 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 '';
 
One of the Geeklog Core Developers.
 Quote
 04/22/13 03:33am  
Status: offline

LWC

Forum User
Full Member
Registered: 02/19/04
Posts: 818
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.

Text 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 '';
 
 Quote
 04/22/13 09:37am  
Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
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:

Text 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?
One of the Geeklog Core Developers.
 Quote
 04/22/13 01:34pm  
Status: offline

LWC

Forum User
Full Member
Registered: 02/19/04
Posts: 818
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.
 Quote
 04/22/13 04:15pm  
Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
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).
Text 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:

Text Formatted Code
 $_SCRIPTS->setJavaScriptLibrary('jquery.ui.button');
 
One of the Geeklog Core Developers.
 Quote
 04/22/13 05:23pm  
Status: offline

LWC

Forum User
Full Member
Registered: 02/19/04
Posts: 818
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:
Text 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 '';
 
 Quote
 04/22/13 06:30pm  
Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
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
One of the Geeklog Core Developers.
 Quote
 New Topic  Post Reply
All times are EST. The time is now 12:12 pm.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content