I am working on a project where people can add elements to a journal entry. Certain elements allow users to later on add their results. I allow them to edit these results by using a TbEditableField widget. I add the elements via ajax to the DOM. When I do this though all new editable fields don’t work since they were added after the original DOM load. They work if I refresh the page. Is there a setting with this widget so that it can work with an element added to the DOM dynamically?
Only thing I could find similar was this: jsfiddle.net/xBB5x/329/
Any help would be greatly appreciated.
Figured out a solution myself. Here is what I did, where the widget is created:
$this->widget('bootstrap.widgets.TbEditableField', array(
'type' => 'text',
'model' => $model,
'attribute' => 'result',
'url' => $this->createUrl('/controller/action'),
'text' => $model->result,
'htmlOptions' => array(
'class' => 'neweditable',
'rel' => 'Model_result_' . $model->id,
'data-pk' => $model->id,
),
));
Then in the ajax call that updates the DOM I just had to add this line:
$.post(url,values,function(data) {
if(data.complete == 'true') {
$(journal_div).html(data.html);
$(journal_div + ' a.neweditable').editable({'datepicker':{'language':'en'},'type':'text','url':'/controller/action','name':'result','title':'Enter Result','mode':'popup'});
}
}, 'json');