jump to navigation

Submodal window helper March 20, 2006

Posted by rossoft in CakePHP.
trackback

A helper for making submodal windows with this

1. Download this
2. Copy the *.js to /app/webroot/js/submodal/
3. Copy the *.css to /app/webroot/css/submodal/
4. Copy the close.gif to /app/webroot/img/submodal/
5. Put this on /app/views/helpers/submodal.php
<?php
/**
 * Submodal Helper
 * @author RosSoft
 * @license MIT
 * @version 0.10
 *
 * @link http://www.subimage.com/sublog/subModal
 *
 */
class SubmodalHelper extends Helper
{
    var $helpers=array(‘Html’,’Javascript’);
   
    var $css=’submodal/subModal’;
    var $jsdir=’submodal/’;
    var $img_close=’submodal/close.gif’;
    var $loading=’/pruebas/loading’;
     
    /**
     * Inits the submodal. Put on <body>
     * 
     */
    function init()
    {
        ob_start();
        if (!defined(‘MODAL_HELPER_REFS’))
        {
            define(‘MODAL_HELPER_REFS’,1);
            echo $this->Html->css($this->css);
            echo $this->Javascript->link($this->jsdir . ‘common’);
            echo $this->Javascript->link($this->jsdir . ‘subModal’);
            ?>
            <div id=”popupMask”>&nbsp;</div>
            <div id=”popupContainer”>
                 <div id=”popupInner”>
                      <div id=”popupTitleBar”>
                           <div id=”popupTitle”></div>
                           <div id=”popupControls”>
                               <?=$this->Html->image($this->img_close,array(‘onclick’=>’hidePopWin(true)’))?>
                       </div>
                      </div>
                      <iframe src=”<?=$this->Html->url($this->loading)?>” style=”width:100%;height:100%;background-color:transparent;” scrolling=”auto” frameborder=”0″ allowtransparency=”true” id=”popupFrame” name=”popupFrame” width=”100%” height=”100%”></iframe>
                 </div>
            </div>
            <?php
            $loading=$this->Html->url($this->loading);
            echo $this->Javascript->codeBlock(“gLoadingUrl=’$loading’; initPopUp(); hidePopWin(false);”);
            return ob_get_clean();
        }
        return ”;
    }

    /**
     * Change modal window url
     * @param string $url Url in form /controller/action/…
     * @param integer $width Width of the box
     * @param integer $height Height of the box
     * @param string $callback Will be called when window is closed
     * @return string Javascript code block enclosed in <script> tag
     */   
    function url($url,$width,$height,$callback=”)
    {
        return $this->Javascript->codeBlock($this->jsurl($url,$width,$height,$callback));
    }

    /**
     * Change modal window url
     * @param string $url Url in form /controller/action/…
     * @param integer $width Width of the box
     * @param integer $height Height of the box
     * @param string $callback Will be called when window is closed
     * @return string Javascript code block NOT enclosed in <script> tag
     */   
    function jsurl($url,$width,$height,$callback=null)
    {
        $url=$this->Html->url($url);
        if ($callback===null) $callback=’null’;
        return “showPopWin(‘$url’, $width, $height, $callback);window.setTimeout(‘setPopTitle();’, 2000);”;
    }   
}

/*
 
    Example of usage:
    <?=$submodal->init()?>
    <a href=”javascript: void(0)” onclick=”<?=$submodal->jsurl(‘/pruebas/test_submodal_result’,400,300,’windowclosed’)?>” >click here</a>
    <br/>
    <a href=”javascript: void(0)” onclick=”<?=$submodal->jsurl(‘/pruebas/test_submodal_result’,300,400)?>” >click here. Without callback</a>
    <script type=”text/javascript”>
    function windowclosed(code)
    {
        alert(“You have closed the window. Return code=” + code);
    }
    </script>
*/

?>

6. Include the helper in your controller var $helpers=array(‘xxx’,’Submodal’);

7. View code example:

<?=$submodal->init()?>

<a href=”javascript: void(0)” onclick=”<?=$submodal->jsurl(‘/pruebas/test_submodal_result’,400,300,’windowclosed’)?>” >click here</a>
<br/>
<a href=”javascript: void(0)” onclick=”<?=$submodal->jsurl(‘/pruebas/test_submodal_result’,300,400)?>” >click here. Without callback</a>
<script type=”text/javascript”>
function windowclosed(code)
{
    alert(“You have closed the window. Return code=” + code);
}
</script>

You have to put $submodal->init() anywhere in your  .
$submodal->jsurl() takes the parameters, url of the new window, width, height and a callback function that will be called after close. It returns a javascript call, you have to enclose it in a tag or anchor tag.

You have to edit the helper for set the loading page that will be shown.

Advertisements

Comments»

1. Sam D - March 20, 2006

cool!

2. jongmr - April 14, 2011

i am looking for solution for a form inside a submodal window, when submit button is clicked:

1. alert message “redirecting to another url”
2. pass the form value to a new poped-up window (non-modal).
3. close the submodal window after after submit (after successful validation).

anyone can help is very much appreciated.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: