Yii 1.1: metabox

Quickly setup ajax-delivered content into metaboxes.
20 followers

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.2 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 calling 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

Total 12 comments

#15050 report it
Shahcheraghean at 2013/10/02 01:37am
@Fragoulas

Thank you so much.I mean I have a dropDown List which I want on its onChange event, fetch some ajax data and change the metabox content by that result data. For example, When i chose my custom country in dropDown list, I want to show some information about that country in metabox. Is it possible? HOW?

#15048 report it
Fragoulas at 2013/10/01 11:30am
@Shahcheraghean

How do you mean? can you give an example?

#15043 report it
Shahcheraghean at 2013/10/01 06:28am
how to use it with dropDown list?

Thanks for the extension. How can i use it with onChange dropDown list in a form?

#13082 report it
rajesh chaurasia at 2013/05/03 02:24am
thanks

this extensions is working fine for me

cheers.

#11361 report it
Fragoulas at 2013/01/09 04:33am
Feedback

There have been some downloads and I would like some feedback on this class, whether it has been useful to anyone or any comments.

#10563 report it
yiqing95 at 2012/11/05 05:25am
@Fragoulas nice work

well done !! cheers

#10561 report it
Fragoulas at 2012/11/05 04:46am
@yiqing95

Hi

Please take a look at the new version (0.2) and the example fiddles for inspiration.

Thanks for the feedback.

#10557 report it
yiqing95 at 2012/11/04 07:13pm
enhance request :)

nice extension ; but i need such functionality :

  • not just show the server' s response to the EMetabox::id as html. it will be better give the client a opportunity to handle it : if i set a js handler then shouldn't use the default behavior . let's say the response is JSON format thus the client side can handle it manually . the call back function can refer the EMetabox::id better as params of the callback function to pass .

  • if not give the EMetabox::id param , do not render a "div"

#10195 report it
Fragoulas at 2012/10/10 05:35am
@hiral darji

I can't understand your question. Can you provide more details or a better explanation of the problem?

#10194 report it
hiral darji at 2012/10/10 04:45am
query

thanks for nice extension.

I have one query that i want to refresh a link which inside views/layouts/main.php

i cant fix the url so it ive me error.

#10190 report it
Fragoulas at 2012/10/10 02:29am
@nafania

Sorry, currently I have no place to put it, really. :(

#10181 report it
Nafania at 2012/10/09 06:40am
Demo

Any demo?

Leave a comment

Please to leave your comment.

Create extension