Magento Adminhtml Javascript Popup Dialog

PopupDialogFeatured

Recently,I needed to add functionality to open javascript Popup dialog inside Magento Adminhtml area to perform some operations and then to handle onClose action to fill the form that called popup.
After some researching on most easier way to do that, I finally found the solution that suited my needs.

Let me share with you the simple way to use Popup Dialog from adminhtml area I used.
(Code below is just sample code and I assume that you are familiar with adminhtml forms and layout update and that you will know how to transfer this samples into your sourcecode.)

1. Create some Adminhtml form block in which you will add the button that will call our popup dialog.

For example:

<?php
/**
 *
 * @author     Darko Goleš <darko.goles@inchoo.net>
 */
class Inchoo_TestModule_Block_Adminhtml_TestPopup_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {
    protected function _prepareForm() {
        $form = new Varien_Data_Form(array(
            'id' => 'edit_form',
            'action' => $this->getUrl('*/*/save'),
            'method' => 'post',
            'enctype' => 'multipart/form-data',
                )
        );
        $base_fieldset = $form->addFieldset(
                'base', array(
            'legend' => Mage::helper('testmodule')->__('Test data'),
                )
        );
        $base_fieldset->addField(
                'authorize_btn', 'button', array(
            'name' => 'authorize_btn',
            'label' => Mage::helper('testmodule')->__(
                    'Click on folowing link to test popup Dialog:'
            ),
            'value' => $this->helper('testmodule')->__('Test popup dialog >>'),
            'class' => 'form-button',
            'onclick' => 'javascript:openMyPopup()'
                )
        );
        $form->setUseContainer(true);
        $this->setForm($form);
        parent::_prepareForm();
    }
}

You can notice that I added a button that calls: javascript:openMyPopup();

2. After that we need to set custom template file for this screen in order to be able to add custom javascript in document:

Add in some of layout xml files inside app/design/adminhtml/yourpackage/yourtheme/layout …

<?xml version="1.0"?>
<layout>
    <adminhtml_yourcontroller_youraction>
        <reference name="content">
            <block type="testmodule/adminhtml_testscreen"
                   name='inchoo.restconnect.adminhtml.testscreen' template="testscreen/edit.phtml">
            </block>
        </reference>
        <reference name="head">
            <action method="addItem">
                <type>js_css</type>
                <name>prototype/windows/themes/default.css</name>
            </action>
            <action method="addCss">
                <name>lib/prototype/windows/themes/magento.css</name>
            </action>
        </reference>
    </adminhtml_yourcontroller_youraction>
</layout>

As you can see, we added our edit screen’s block in content and set the custom template to it.
Also we added some css references into the head block in order to apply predefined Magento admin theme styles on out Popup dialog.

3. Let’s finally show how our template file should look like:

<?php echo $this->getFormInitScripts() ?>
<script type="text/javascript">
    function openMyPopup() {
        var url = '<?php echo $this->getUrl('adminhtml/dashboard/index') ?>?';
        if ($('browser_window') &amp;&amp; typeof(Windows) != 'undefined') {
            Windows.focus('browser_window');
            return;
        }
        var dialogWindow = Dialog.info(null, {
            closable:true,
            resizable:false,
            draggable:true,
            className:'magento',
            windowClassName:'popup-window',
            title:'Test popup Dialog',
            top:50,
            width:300,
            height:150,
            zIndex:1000,
            recenterAuto:false,
            hideEffect:Element.hide,
            showEffect:Element.show,
            id:'browser_window',
            url:url,
            onClose:function (param, el) {
                alert('onClose');
            }
        });
    }
    function closePopup() {
        Windows.close('browser_window');
    }
</script>
<div class="content-header">
    <?php echo $this->getHeaderHtml() ?>
    <p class="form-buttons"><?php echo $this->getButtonsHtml('header') ?></p>
</div>
<?php echo $this->getFormHtml() ?>
<?php if ($this->hasFooterButtons()): ?>
<div class="content-footer">
    <p class="form-buttons"><?php echo $this->getButtonsHtml('footer') ?></p>
</div>
<?php endif; ?>
<?php echo $this->getFormScripts() ?>

Here you can see the function openMyPopup() that opens the dialog.
Also, you can notice that we have the callback function onClose() implemented: that triggers after we close Popup dialog.

One more handy function is implemented and that is: closePopup() function. When some operation in popup dialog is finished, we can call:

this.parent.closePopup();

from Dialog window document.

As you can see we use Magento’s Dialog class to create popup dialog. It can take number of configuration options that we can use to make this dialog popup suit our needs.
To get more info on Dialog class and its options, just take a look at the “js\prototype\window.js” file in your Magento installation files.

PopupDialog1

Cheers :-)

8
Top

Care to rate this post?

Author

Darko Goles

Ex Inchooer

Darko worked at Inchoo as Backend Developer from March 2011 to January 2014

Other posts from this author

Discussion 8 Comments

Add Comment
  1. Gen

    Thanks for the code, very useful – although my popup window is not opening as a popup but rather it’s launching within the active window in the top left hand corner. Is there a “target” variable we need as well?

  2. @Gen, you should check loaded Magento admin js files and css in your page.

  3. Mike

    How would you do this in the front end? I’ve been trying to use window.js for popup image in the product page but with no sucess… Thanks!

  4. Swapnil Kene

    This is good but it dosent work in IE8 (not sure abt other versions). It throws error “Object doesn’t support this property or method” in window.js line no-1549 (win.getContent().innerHTML = content;).

    I spent lot of time debugging but no success. Any suggestions please.

  5. rahul

    Thanks for the code..it is very useful..

  6. hardik

    i want to display checkout page in the popup when i m click on add to cart page plz help me

  7. @Gen you would need to include a layout file and load the CSS files for the theme.

    Magebase has a good write up on that part: http://magebase.com/magento-tutorials/quick-tip-easy-pop-ups-with-window-js-in-the-front-end-with-magento/

  8. Raja

    I want to display the order success message in the popup once the order was confirmed instead of redirecting to the success page.

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top