Dynamically generating a list of events

This is a simple list of items in a list, which allows the user to dynamically generate that list of events. Then a controller action does the work of serializing that into the database.

The issue is that there's the PHP-generated HTML segment, and there's a separate JavaScript segment to do the additions (for when someone presses the "add new page" button). This is not only duplicated; when it's done inline in the JavaScript it's extremely ugly to look at (look at the length of that line!).

Is there a better way of doing this?

```
headLink()->appendStylesheet($this->baseUrl('css/redmond/jquery-ui-1.8.5.custom.css'));

$this->headScript()->appendFile($this->baseUrl('js/jquery.js'));
$this->headScript()->appendFile($this->baseUrl('js/jquery-ui-1.8.5.custom.min.js'));

$this->headScript()->captureStart(); ?>
//
function CreateDateboxes(jqObject) {
jqObject.datepicker({
dateFormat: 'yy-mm-dd',
showOn: 'button',
changeYear: true,
changeMonth: true
});
}

function RemoveParent() {
$(this).parent().parent().remove();
}

function AddNewEvent() {
var today, html, temp, datestring;
today = new Date();
datestring = (today.getYear()+1900) + '-' + (today.getMonth()+1) + '-' + today.getDate();
html = '\n \n \n \n \n \n \n \n';
$(this).after(html);
temp = $(this).next();
CreateDateboxes($('.datebox', temp));
$('.ui-icon-trash', temp).click(RemoveParent);
}

$(function() {
CreateDateboxes($('.datebox'));
$('.ui-icon-trash').click(RemoveParent);
$('.ui-icon-plus').parent().click(AddNewEvent);
});
//
headScript()->captureEnd(); ?>

url(array('controller' => 'admin', 'action' => 'applyEvents')) ?>" method="post">


Add a new Event
events as $event) { ?>

I'm assuming from looking the code you're using Zend Framework. I've solved similar issues in Zend and Symfony using php partials.

You could create a partial _list_item.phtml

    
        
        " />
    
    
        " style="width: 100%;" />
    

Then in your view:

events as $event): ?>
    partial('list_item.phtml', array(
        'date' => $event->GetDate()->format('Y-m-d'),
        'message' => $event->GetMessage(),
    )); ?>

Then for your javascript:

function AddNewEvent()
{
    var today, html, temp;
    // call str_replace because javascript doesn't like new lines in strings
    html = 'partial('list_item.phtml', array(
        'date' => $event->GetDate()->format('Y-m-d'),
        'message' => '',
    ))); ?>';
    $(this).after(html);
    temp = $(this).next();
    CreateDateboxes($('.datebox', temp));
    $('.ui-icon-trash', temp).click(RemoveParent);
}

Viola! No template duplication because the affected code is in a partial. No excess javscript templating libraries, although if this kind of thing is prevalent in your application I'd suggest some refactoring and implementing such a templating library.

This approach will have the least impact on your work flow, little to no learning curve, and a short investment in development time for big decrease duplication (bosses love hearing that kind of thing).

StackExchange Code Review Q#492, answer score: 8