atk4agiletoolkit

Agile Toolkit - Grid is not reloading - what am I missing?


I had grid reloading working after form submit in a popup, but now I've changed stuff around and for some reason it stopped working and can't figure out why...

EDIT: See comment below...

Basically, the 'details' page used to not be a subpage of this page but a separate .php file, I prefer the subpage approach, but I must have screwed up somewhere in the transition... I've edited out some stuff that would only make this harder to read.

Does anyone see what I'm missing or where I'm going wrong?

class page_liststuff extends Page {
    function initMainPage(){
    // parent::init();

    $grid = $this->add('Grid');
    $this->js('reload_grid',$grid->js()->reload());

$grid->addColumn('button','edit');
$grid->addButton('Refresh')->js('click', $grid->js()->reload());

if($_GET['edit']){
    $this->js()->univ()->frameURL('Edit',$this->api->url('details'))->execute();
}

}

function defaultTemplate(){
    return array('page/detail');
}

function page_details(){

    $m = $this->setModel('Stuff');
$f1 = $stap1->add('Form');
$f1->addSubmit('Save');

if ($f1->isSubmitted()){
    try {
            $f1->update();
    $f1->js()->univ()
    ->successMessage('Success!')
    //->closeDialog()
    ->getjQuery()->trigger('reload_grid')
    ->execute();

        } catch(Exeception $e) {
            $f1->js()->univ()->alert('Fail!')->execute();
        }
}
  }

}

Solution

  • You can use any jQuery UI Dialog widget options to your advantage like so:

    $options = array(
        'closeOnEscape' => false, // http://api.jqueryui.com/dialog/#option-closeOnEscape
        'dialogClass' => 'no-close',
    );
    
    $this->js()->univ()
        ->frameURL('Edit', $this->api->url('./details'), $options, $callback)
        ->execute();
    

    Just to hide close button it's much more easier to use CSS for that as described here: http://api.jqueryui.com/dialog/#entry-longdesc in paragraph "Hiding the close button".

    In some cases, you may want to hide the close button, for instance, if you have a close button in the button pane. The best way to accomplish this is via CSS. As an example, you can define a simple rule, such as:

    .no-close .ui-dialog-titlebar-close {
      display: none;
    }
    

    Then, you can simply add the no-close class to any dialog in order to hide its close button:

    $( "#dialog" ).dialog({
      dialogClass: "no-close",
      buttons: [{
        text: "OK",
        click: function() {
          $( this ).dialog( "close" );
        }
      }]
    });