Magento - Admin Grid page doubling main Fields

Question

I'm working on a custom Magento(1.9.0.1version) extension.

Let me describe you my problem in pictures:

When i click the button to go to the next page:

And then this problem appears:

As you can see it is doubling by any reason the Magento fields pointed in the picture and the Loading block in the middle is not fading away.

Let me show you my entire config file:

<?xml version="1.0"?>
<config>
  <modules>
    <VivasIndustries_SmsNotification>
      <version>1.0.0</version>
    </VivasIndustries_SmsNotification>
  </modules>
  <global>
    <models>
        <smsnotification>
            <class>VivasIndustries_SmsNotification_Model</class>
            <resourceModel>vivasindustries_smsnotification_resource</resourceModel>
        </smsnotification>
        <vivasindustries_smsnotification_resource>
        <class>VivasIndustries_SmsNotification_Model_Resource</class>
        <entities>
            <smsnotification>
            <table>VivasIndustries_SmsNotification</table>
            </smsnotification>
            <smsnotificationhistory>
            <table>VivasIndustries_SmsHistory</table>
            </smsnotificationhistory>
        </entities>
        </vivasindustries_smsnotification_resource>
    </models>
    <resources>
        <smsnotification_setup>
            <setup>
                <module>VivasIndustries_SmsNotification</module>
            </setup>
            <connection>
                 <use>core_setup</use>
             </connection>
        </smsnotification_setup>
        <smsnotification_read>
            <connection>
                <use>core_read</use>
            </connection>
        </smsnotification_read>
        <smsnotification_write>
            <connection>
                <use>core_write</use>
            </connection>
        </smsnotification_write>
    </resources>    
    <events>
        <sales_order_save_after>
            <observers>
                <vivasindustries_smsnotification>
                    <class>smsnotification/observer</class>
                    <method>orderSaved</method>
                </vivasindustries_smsnotification>
            </observers>
        </sales_order_save_after>
    </events>
    <helpers>
        <smsnotification>
            <class>VivasIndustries_SmsNotification_Helper</class>
        </smsnotification>
    </helpers>
    <blocks>
        <smsnotification>
             <class>VivasIndustries_SmsNotification_Block</class>
        </smsnotification>
    </blocks>
  </global>
  <adminhtml>
    <acl>
        <resources>
            <all>
                <title>Allow Everything</title>
            </all>
            <admin>
                <children>
                    <system>
                        <children>
                            <config>
                                <children>
                                    <vivas>
                                        <title>Vivas - All</title>
                                    </vivas>
                                </children>
                            </config>
                        </children>
                    </system>
                </children>
            </admin>
        </resources>
    </acl>
    <layout>
        <updates>
            <smsnotification>
                <file>smsnotification.xml</file>
            </smsnotification>
        </updates>
    </layout>   
    </adminhtml>
    <admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <VivasIndustries_SmsNotification before="Mage_Adminhtml">VivasIndustries_SmsNotification_Adminhtml</VivasIndustries_SmsNotification>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>
</config>  

Here is the files that is creating the grid table:

<?php

class VivasIndustries_SmsNotification_Block_Adminhtml_Sms_History extends Mage_Adminhtml_Block_Widget_Grid_Container


{
    public function __construct()
    {
        $this->_controller = 'adminhtml_sms_history';
        $this->_blockGroup = 'smsnotification';
        $this->_headerText = Mage::helper('smsnotification')->__('SMS History');

        parent::__construct();

        $this->_removeButton('add');
    }
}

And:

<?php

class VivasIndustries_SmsNotification_Block_Adminhtml_Sms_History_Grid extends Mage_Adminhtml_Block_Widget_Grid
{
    public function __construct()
    {
        parent::__construct();
        $this->setId('smsnotification_grid');
        $this->setDefaultSort('id');
        $this->setDefaultDir('DESC');
        $this->setSaveParametersInSession(true);
        $this->setUseAjax(true);
    }


    protected function _prepareCollection()
    {
        $collection = Mage::getResourceModel('smsnotification/smsnotificationhistory_collection');
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }


    protected function _prepareColumns()
    {
          $this->addColumn('id', array(
              'header'    => Mage::helper('smsnotification')->__('ID'),
              'align'     =>'right',
              'width'     => '50px',
              'index'     => 'id',
          ));

          $this->addColumn('receiver', array(
              'header'    => Mage::helper('smsnotification')->__('Receiver'),
              'align'     =>'left',
              'index'     => 'receiver',
          ));

        $this->addColumn('phone', array(
            'header'    => Mage::helper('smsnotification')->__('Phone'),
            'align'     =>'left',
            'index'     => 'phone',
        ));

        $this->addColumn('email', array(
            'header'    => Mage::helper('smsnotification')->__('Email'),
            'align'     =>'left',
            'index'     => 'email',
        ));

        $this->addColumn('smstext', array(
            'header'    => Mage::helper('smsnotification')->__('SMS Text'),
            'align'     =>'left',
            'index'     => 'smstext',
        ));

        $this->addColumn('date', array(
            'header'    => Mage::helper('smsnotification')->__('Date'),
            'align'     =>'left',
            'index'     => 'date',
        ));



        return parent::_prepareColumns();
    }

    public function getRowUrl($row)
    {
        return $this->getUrl('*/*/edit', array('id'=>$row->getId()));
    }
}

I don't know where is my mistake and why it is doubling these fields. Do you have any idea how to resolve this problem ?

Thanks!

Answer 1

When you do use the method setUseAjax, Magento is going to try to reload only the grid in the page via ajax.

So for this to work, you would have to specify to Magento what URL he need to fetch to have the gird and only the grid to refresh it via ajax, otherwise it is going to assume, incorrectly, that it have to refresh the grid with the current page url, so adding the header of the admin a second time in the div supposed to hold only the grid. Like in your screenshots.

There is the way to go :

In VivasIndustries_SmsNotification_Block_Adminhtml_Sms_History_Grid add this function :

public function getGridUrl()
{
    return $this->getUrl('*/*/smsGrid', array('_current'=>true));
}

So you also have to add this action to your controller of VivasIndustries_SmsNotification_Adminhtml and render the block with your grid and only this one. Like that :

public function smsGridAction()
{
    $this->getResponse()
        ->setBody($this->getLayout()
        ->createBlock('smsnotification/adminhtml_sms_history_grid')
        ->toHtml()
    );
}

And you should be good to go.