fragoulis / metabox

A metabox is part of a website whose contents can be drawn from an AJAX call and get refreshed anytime or using an interval.

A metabox is simply part of the website, whose contents can be drawn from an AJAX call and get refreshed anytime or using an interval.

##Changelog

0.4
Added custom css, header and footer support.

0.3
Added begin/end support to render initial content.

##Update guide

From 0.3 to 0.4
PHP: Replace attribute initHtml with content
JS: Replace this.$element with this.$content in ajax callbacks

##Requirements

Tested on Yii 1.1.12

##Usage

Simple initialisation:

$this->widget('ext.metabox.EMetabox', array(
 'id' => 'mymetabox',
 'url' => array('/myurl'),
));

This prints:

<div id="mymetabox" class="metabox">
  <div class="metabox-content"></div>
</div>

and

$('#mymetabox').metabox({url : 'myurl'});

You can refresh it manually, using JavaScript, without parameters

$('#mymetabox').metabox('refresh');

or with extra parameters

$('#mymetabox').metabox('refresh', {
  type: 'POST', 
  data : {
  }
});

You can initialize it with an interval so that it auto-refreshes:

$this->widget('ext.metabox.EMetabox', array(
 'id' => 'mymetabox',
 'url' => array('/myurl'),
 'options' => array(
  'refreshInterval' => 1000, // refresh every second
 )
));

The metabox can have initial content. You can use the content attribute:

$this->widget('ext.metabox.EMetabox', array(
  ...
  'content' => 'Initial content'
));

or the begin/end:

$this->beginWidget('ext.metabox.EMetabox', array(
  ...
));
echo 'Initial content';
$this->endWidget();

You can optionally add a header and/or a footer to the metabox:

$this->widget('ext.metabox.EMetabox', array(
  'header' => 'My title',
  'footer' => date('H:i:s'),
  'content' => 'Initial content'
));

There are also three callbacks you can override which are called in the order shown below:

• beforeRefresh()
• handleResponse(response data)
• afterRefresh(response data)

Metabox::handleResponse by default updates the div's contents with the response data. Within the scope of these methods, this refers to the metabox object. You can access the outer div element by calling the $element attribute and the inner content div by calling the $content attribute as shown below in the example.
Also, you can access the header and footer divs (if they exist) by callcing the $header and $footer attribute respectively.

$this->widget('ext.metabox.EMetabox', array(
 ...
 'options' => array(
  'handleResponse' => 'js:function(data){this.$content.html(data);}
 )
));

##Examples With HTML response
With JSON response

##Installation

Unzip into the extensions folder.

##Resources

Github

test

metabox's Issues

Refresh content from [default] url using a selector for the content

When url is left blank the widget uses the current url as source.
On metabox refresh the widget would just replace the content with the whole response (which is the whole page).
Make it so that, given a selector, the metabox contents are updated only with the contents of the matching element living inside the response.

That would only work with html response.
It is kinda like the default CGridView behavior when it updates its dataset.

Add header button toolbar

Event binding

Bind on user or system events and refresh when they are triggered.