1 (edited by m[e]ntor 2007-12-19 4:09:04 PM)

Topic: modalWindow Plugin

Hi,

every webdeveloper know the problem: How can i validate formdata without the stupid javascript alert,confirm or prompt function.

The solution ist this new Plugin.

One year ago i changed the lightbox into a lockbox which allows me to open in multi-layering new windows in a webapplication.
And now i changed it again into a xajaxplugin.

It is simple to use, create your ajax-object and include the Plugin:

$core = './xajax/xajax_core';
require_once( $core . '/xajax.inc.php' );
$xajax = new xajax();
require_once( $core . '/xajaxPlugin.inc.php' );
require_once( $core . '/xajaxPluginManager.inc.php' );
require_once './xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php';

Create with your template-engine e.g. smarty a window-content  und put them to the response:

$objResponse = new xajaxResponse();
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent);

or use $backgroundcolorm, $opacity ( 0-100 ) and $classname to define the style of youzr "lightbox"

$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent, $backgroundcolor, $opacity, $className );

with the following code you can close the highest window:

$objResponse->plugin( 'clsmodalWindow', 'closeWindow');

or you use the close alias in your html:

onclick="xajax.closeWindow()"


You can find a Demo an the Download on my page:

Download: http://www.amp-lified.de/index.php?lnk= … &fid=2
Demo: http://www.amp-lified.de/modalWindow/

The download includes the demo-file.

BTW:

this plugin includes a function named "postLoadClientScript"

if you want to include the javascript of this plugin on demand, and not on every pagecall include that plugin on your xajax-function and before you create your response object. After that and before you want open a new Window use the following code:


require_once './xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php';
$objResponse = new xajaxResponse();
$objResponse->plugin( 'clsmodalWindow', 'postLoadClientScript');
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent);

the browser waits until the script is post-loaded and create after that your new window.

Feel free to use it and post comments.

Re: modalWindow Plugin

very nice ;D
Will sure come in hand!

Re: modalWindow Plugin

Just what I was searching for

I used thickbox on a project, but I had to modify a lot of code to get it working the way I wanted. And this plugin works faster than thickbox.

Thanks

Re: modalWindow Plugin

hi m[e]ntor

thanks very much for this plugin!

i have two litte questions:

1) after copying your plugin (without any changes) and the script from the index-file to my website, i get the following warning:
Notice: Undefined property: clsmodalWindow::$sDefer in /..../xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php on line 118
as i am not familiar with object oriented programming and xajax as well, i do not know how to get rid of this warning. can you help me?

2) is there a possibility to make the modal window scrollable?

sorry if these are stupid questions... (deutsch w

5 (edited by bambi 2008-01-13 4:00:55 PM)

Re: modalWindow Plugin

hi!

in the meantime i found a solution for my second question: since the modal window is a simple div, i just added overflow: auto in the css-stlye.

i think i've also found a solution for my first problem, but i'm not shure...
i added the following line to modalWindow.inc.php after line 94 in the configure-function:
if (!isset($this->sDefer)) { $this->sDefer = ''; }

after this change, no warning is displayed anymore. but i'm not sure, if this line of code impacts the rest of the plugin in any negative way...
it would be great to hear from you (m[e]ntor), whether this is a good solution for my problem or you have a better one.

many thanks! bambi

Re: modalWindow Plugin

Hi Bambi,

thx for the report.

I have change the class and add a class property with the name sDefer with a standardvalue null.
This should resolve the problem because now the sDefer property is defined. I have removed some lines in the configure function which have set them to an empty string, because this isn

Re: modalWindow Plugin

hi oliver

merci! :-)

lg, bambi

Re: modalWindow Plugin

m[e]ntor wrote:

I have change the class and add a class property with the name sDefer with a standardvalue null.
This should resolve the problem because now the sDefer property is defined. I have removed some lines in the configure function which have set them to an empty string, because this isn

xajax Developer
Connect to me on LinkedIn:
http://www.linkedin.com/in/calledtoconstruct

Re: modalWindow Plugin

On weekend i found a problem with whitespaces on the beginning of the window-html.
The javascript-part didn

10 (edited by bambi 2008-03-06 1:34:31 PM)

Re: modalWindow Plugin

Hi Oliver

Sorry that I have to come back with another question... It is about the positioning of the modal window DIV...

I will make an example, because this is a little bit complicated to describe...

Let's assume, that the viewport has a width of 1600px and a height of 800px. The displayed window BEFORE I click on a link to open the modal window has a height of 1000px, so it has a vertical scrollbar. The DIV in the modal window itself has a fixed width of 500px and flexible height which depends on the content. Let's assume that it can have a height of 500px to 2000px.

The problem is, that if the height of the modal window DIV (e.g. 1500px) is larger than the height of the original window displayed in the background (e.g. 1000px), the browser-window gets a height of 1500px (that's correct), but the half-transparent overlay is not enlarged so that the bottom part of the original window remains white (as white is my background-color). Is there any possibility to prevent this misrepresentation?

I hope that you are able to follow my description... :-)

As a work-around, I have written a little JS-Function which I call directly before returning the response-object:

function wpSetModalBackgroundHeight (modal_divname)
{
  var height_modal = document.getElementById(modal_divname).offsetHeight;
  var height_target = height_modal + 100;
  var height_actual_px = document.getElementById('lb_layer1').style.height;
  var height_actual = height_actual_px.substring(0,height_actual_px.length-2); // remove "px"
 
  if (height_actual < height_target)
  {
    var height_target_px = height_target + "px";
    document.getElementById('lb_layer1').style.height = height_target_px;
  }
}

This seems to work fine, but I can't imagine that this is the best solution...?

What do you think?


Many thanks!
Michelle

Re: modalWindow Plugin

Hi,

Is it possible to open the modalWindow from within a frame?
I tried to integrate the plugin yesterday. While the demo works as expected on my box, the the window is not shown after integrating the necessary code snippet in the code I am developing on.

I think that the main problem is the frame I use. Is this true? Is there a chance to use this plugin inside a frame?

Thanks in advance!

Fred

Re: modalWindow Plugin

Hey,

I am trying to use modal window with the latest version of Xajax and I am receiving the following error:

Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /var/www/vhosts/gfx-null.com/subdomains/warcraft-players/httpdocs/main/xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php on line 38

Would be nice to know if this will be fixed soon as I really would like to use it.

Re: modalWindow Plugin

hi metric, which php-version do you have?

Re: modalWindow Plugin

hey, it looks to be I am using the latest php version. I was able to get it to work by changing these lines of code:

    /**
     *  Used to store the base URI for where the javascript files are located.  This
     *    enables the plugin to generate a script reference to it's javascript file
     *    if the javascript code is NOT inlined.
     *
     * @var string
     */
    var $sJavascriptURI; //used to be null right here and was private: changed to var
    
    /**
     *  Used to store the value of the inlineScript configuration option.  When true,
     *    the plugin will return it's javascript code as part of the javascript header
     *    for the page, else, it will generate a script tag referencing the file by
     *    using the <clsTableUpdater->sJavascriptURI>.
     *
     * @var boolean
     */
    var $bInlineScript; //had a default value assigned here plus was private: changed it to just be var
    
    /**
     * 
     * String: sDefer
     * 
     * Configuration option that can be used to request that the
     * javascript file is loaded after the page has been fully loaded.
     * 
     */
    var $sDefer; //used to be private: changed to var
    
    /**
     * clsmodalWindow constructor
     *
     */

//modified the constructor to reflect OO programming.
    function clsmodalWindow()
    {
         $this->sDefer = '';
        $this->sJavascriptURI = '';
        $this->bInlineScript = false;
    }

15 (edited by m[e]ntor 2008-04-04 6:09:59 AM)

Re: modalWindow Plugin

From where did you get this Code?

My Plugin was written for PHP5, all of these vars are defined as private, and the constructor as __construct not as function clsmodalWindow

<?php
/*
+--------------------------------------------------------------------------
|   modalWindow Plugin
|   =============================================
|   by Oliver Trebes
|   (c) 2006 - 2007 amplified webservices
|   =============================================
|   http://www.angelmedia.de
+--------------------------------------------------------------------------
|   > $Date: 2008-02-04 08:30:19 +0100 (Mo, 04 Feb 2008) $
|   > $Revision: 55 $
|   > $Author: mentor $
+--------------------------------------------------------------------------
|   > Filename:     modalWindow.inc.php
|   > Date started: Tue Dec 18 10:53:23 CET 2007
+--------------------------------------------------------------------------
|   Desription:
|   Contains a class that creates and remove modal windows for hints,
|    actions and submissions.
|
|    Title: clsmodalWindow class
|
|    Please see <copyright.inc.php> for a detailed description, copyright
|    and license information.
|
+--------------------------------------------------------------------------
*/
class clsmodalWindow extends xajaxResponsePlugin
{
    /**
     *  Used to store the base URI for where the javascript files are located.  This
     *    enables the plugin to generate a script reference to it's javascript file
     *    if the javascript code is NOT inlined.
     *
     * @var string
     */
    private $sJavascriptURI    = null;
    
    /**
     *  Used to store the value of the inlineScript configuration option.  When true,
     *    the plugin will return it's javascript code as part of the javascript header
     *    for the page, else, it will generate a script tag referencing the file by
     *    using the <clsTableUpdater->sJavascriptURI>.
     *
     * @var boolean
     */
    private $bInlineScript    = false;
    
    /**
     * 
     * String: sDefer
     * 
     * Configuration option that can be used to request that the
     * javascript file is loaded after the page has been fully loaded.
     * 
     */
    private $sDefer            = null;
    
    /**
     * clsmodalWindow constructor
     *
     */
    function __construct()
    {
    }

    /**
     *    Function: configure
     *    
     *    Receives configuration settings set by <xajax> or user script calls to 
     *    <xajax->configure>.
     *    
     *    @param string $sName :  The name of the configuration option being set.
     *    @param mixed $mValue :  The value being associated with the configuration option.
    */
    function configure($sName, $mValue)
    {
        if ( 'scriptDeferral' == $sName )
        {
            if ( true === $mValue || false === $mValue )
            {
                if ( $mValue )
                {
                    $this->sDefer = 'defer="defer" ';
                }
            }
        }
        elseif ( 'javascript URI' == $sName )
        {
            $this->sJavascriptURI = $mValue;
        }
        elseif ( 'inlineScript' == $sName )
        {
            if ( true === $mValue || false === $mValue )
            {
                $this->bInlineScript = $mValue;
            }
        }
    }
    
    /**
     *     Function: generateClientScript
     *  
     *  Called by the <xajaxPluginManager> during the script generation phase.  This
     *    will either inline the script or insert a script tag which references the
     *    <tableUpdater.js> file based on the value of the <clsTableUpdater->bInlineScript>
     *    configuration option.
     */
    function generateClientScript()
    {
        if ($this->bInlineScript)
        {
            echo "\n<script type='text/javascript' " . $this->sDefer . "charset='UTF-8'>\n";
            echo "/* <![CDATA[ */\n";

            include(dirname(__FILE__) . '/modalWindow.js');

            echo "/* ]]> */\n";
            echo "</script>\n";
        }
        else
        {
            echo "\n<script type='text/javascript' src='" . $this->sJavascriptURI . "xajax_plugins/response/modalWindow/modalWindow.js' " . $this->sDefer . "charset='UTF-8'></script>\n";
        }
    }
    
    /**
     * Function addWindow, adds a new modal Window Layer with the given content
     *    
     * @param string $content
     * @param string $color
     * @param string $opacity
     * @param string $className
     */
    function addWindow( $content, $color = null, $opacity = null, $className = null )
    {
        $command = array('n'=>'mw:aw');
        
        $content = ltrim( $content );
        
        $this->addCommand(
                            array('n'=>'mw:aw'),
                            array( $content, $color, $opacity, $className )
        );
    }
    
    /**
     * Function closeWindow, close the Window from the top layer
     */
    function closeWindow()
    {
        $command = array('n'=>'mw:cw');
        $this->addCommand( $command, null );    
    }
    
    /**
     * Function to load the javascript on demand
     *
     * @param string $uri
     */
    function postLoadClientScript( $uri )
    {
        $this->objResponse->includeScriptOnce( $uri . 'xajax/xajax_plugins/response/modalWindow/modalWindow.js' );
        $this->objResponse->waitFor("'undefined' != typeof xjxmW", 10);
    }
    
    /**
     * Returns the classname of this plugin class
     *
     * @return clsmodalWindow
     */
    function getName()
    {
        return get_class($this);
    }
}

$objPluginManager =& xajaxPluginManager::getInstance();
$objPluginManager->registerPlugin(new clsmodalWindow());

16 (edited by metric 2008-04-04 6:25:36 PM)

Re: modalWindow Plugin

Ah, well I asked my brother what php version he had and he said he had the latest. However, I found otherwise when I ran phpinfo(). Instead, his server is running php 4.3.9. PHP 4.3.9 does not support the private declaration and the construct method. Now, I just have to grind it into my brother to install the latest php on his unix server. As there will be functions I want to use from php 5.

Thanks for the quick response.

Oh and I created the code myself. Even though I am a beginner to php, I have a programming background with C#, VB, LUA. So, I can easily catch on with what is wrong quite fast, just took a bit to understand what was going wrong in the php error. Plus, I just made it more object oriented and made it fit the php 4.3.9 standard, since that is how I program in C# and VB.

Re: modalWindow Plugin

I get one error in the source html code:

<script type='text/javascript' src='/lib/xajaxxajax_plugins/response/modalWindow/modalWindow.js' charset='UTF-8'></script>

There should be a '/' between /lib/xajax  and xajax_plugins/response/modalWindow/modalWindow.js. why is it not there?

Re: modalWindow Plugin

you didn't configure the javascript uri with a traling slash wink

->configure("javascript URI","/lib/xajax/");

19 (edited by Madox 2008-04-17 7:00:39 PM)

Re: modalWindow Plugin

but i did...:

require_once("lib/xajax/xajax_core/xajax.inc.php");       
$xajax             = new xajax();
$xajax->configure("javascript URI","/lib/xajax/");
require_once("lib/xajax/xajax_core/xajaxPlugin.inc.php");
require_once("lib/xajax/xajax_core/xajaxPluginManager.inc.php");
require_once("lib/xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php");

Doesn't seem to have any effect what I define as the javascript URI..

Re: modalWindow Plugin

do you perhaps set the uri twice using ->print/getJavaScript(); ?

21 (edited by Madox 2008-04-17 7:24:18 PM)

Re: modalWindow Plugin

Ah, thank you - corrected the mistake smile Have some problems with old code tongue

Re: modalWindow Plugin

freddrat wrote:

Hi,

Is it possible to open the modalWindow from within a frame?
I tried to integrate the plugin yesterday. While the demo works as expected on my box, the the window is not shown after integrating the necessary code snippet in the code I am developing on.

I think that the main problem is the frame I use. Is this true? Is there a chance to use this plugin inside a frame?

Thanks in advance!

Fred

Hi Fred,

because of a short offline-time of my provider and another request to framesupport i have implemented this support today in the plugin.
But at the moment there is no download for that, because i want to solve the problem which bambi describe in the post above your post.

Kind Regards

Oliver

Re: modalWindow Plugin

Hi!

Sorry for the question but, I've tried to execute this plugin in my site,  and all I get is this error message when I try to include the xajaxPlugin.inc.php file

Cannot redeclare class xajaxRequestPlugin in ...\xajax\xajax_core\xajaxPlugin.inc.php on line 102

What am I doing wrong?

Tnx guys!

Re: modalWindow Plugin

Hi,

you have to take care about the order when including the plugin.

1. include xajax
2. instantiate xajax
3. require the plugin
4. ->configure() what you need (for instance ->configure('JavaScript URI','/xajax');

Re: modalWindow Plugin

Thank you so much!! The problem has been fixed big_smile

Posts: 1 to 25 of 91

Pages 1 2 3 4 Next

You must login or register to post a reply

xajax Forums → Third party plugins → modalWindow Plugin