Magento – load ajax loader image after clicking save button

form-validation

I am using magento 1.9 version. After clicking save or any button then I want to show progress by ajax loader. I found a div having ID "loading-mask". If i will change its style display:none to block then it all working fine. But I want to change this after validation pass. Where should I can place this condition for proper result ?

document.getElementById("loading-mask").style.display="Block";

Best Answer

You can show the imagen when the form is submitted:

$j(function() {
     $j('form').submit( function() {
         alert("Something"); //do something else here
         //in your case
         $j("#loading-mask").show();
         return true;
     });
});

Related Solutions

Magento – Show loading image after clicking submit button magento prototype

There are many ways to do this. One of them is to override submit method of VarienForm class:

VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
    // your action here
    // ..

    // then call parent method
    $super(url);

    return false;
}

Magento – Add confirmation pop-up to admin form “Save” button

Something like this may help you

 $base_fieldset->addField(
                'your_btn', 'button', array(
            'name' => 'your_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();

Then in layout file

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