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?

&lt;?php
/** @var $this Zend_View */

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

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

$this-&gt;headScript()-&gt;captureStart(); ?&gt;
//&lt;script language="text/javascript"&gt;
    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 = '&lt;li class="ui-content"&gt;\n    &lt;div style="float: left; width: 200px;"&gt;\n        &lt;span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"&gt;&lt;/span&gt;\n        &lt;input name="dates[]" class="datebox" style="width: 120px;" type="text" value="' + datestring + '" /&gt;\n    &lt;/div&gt;\n    &lt;div style="padding-left: 200px;"&gt;\n        &lt;input name="contents[]" type="text" style="width: 100%;" /&gt;\n    &lt;/div&gt;\n&lt;/li&gt;';
        $(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);
    });
//&lt;/script&gt;
&lt;?php $this-&gt;headScript()-&gt;captureEnd(); ?&gt;
&lt;div class="story"&gt;
    &lt;form action="&lt;?= $this-&gt;url(array('controller' =&gt; 'admin', 'action' =&gt; 'applyEvents')) ?&gt;" method="post"&gt;
        &lt;ul style="list-style: none; margin-bottom: 1em; padding: 0; width: 100%;"&gt;
            &lt;li class="ui-button ui-state-default" style="width: 100%; margin-bottom: 5px;"&gt;&lt;span class="ui-icon ui-icon-plus" style="float: left;"&gt;&lt;/span&gt;
                Add a new Event&lt;/li&gt;
            &lt;? foreach ($this-&gt;events as $event) { ?&gt;
                &lt;li class="ui-content"&gt;
                    &lt;div style="float: left; width: 200px;"&gt;
                    &lt;span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"&gt;&lt;/span&gt;
                    &lt;input name="dates[]" class="datebox" style="width: 120px;" type="text" value="&lt;?= $event-&gt;GetDate()-&gt;format('Y-m-d') ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div style="padding-left: 200px;"&gt;
                        &lt;input name="contents[]" type="text" value="&lt;?= $event-&gt;GetMessage() ?&gt;" style="width: 100%;" /&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;? } ?&gt;
        &lt;/ul&gt;
        &lt;input type="submit" name="submit" value="Apply" /&gt;
        &lt;input type="submit" name="submit" value="Cancel" /&gt;
    &lt;/form&gt;
&lt;/div&gt;
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

&lt;li class="ui-content"&gt;
    &lt;div style="float: left; width: 200px;"&gt;
        &lt;span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"&gt;&lt;/span&gt;
        &lt;input name="dates[]" class="datebox" style="width: 120px;" type="text" value="&lt;?php echo $date ?&gt;" /&gt;
    &lt;/div&gt;
    &lt;div style="padding-left: 200px;"&gt;
        &lt;input name="contents[]" type="text" value="&lt;?php echo $message ?&gt;" style="width: 100%;" /&gt;
    &lt;/div&gt;
&lt;/li&gt;


Then in your view:

&lt;?php foreach ($this-&gt;events as $event): ?&gt;
    &lt;?php echo $this-&gt;partial('list_item.phtml', array(
        'date' =&gt; $event-&gt;GetDate()-&gt;format('Y-m-d'),
        'message' =&gt; $event-&gt;GetMessage(),
    )); ?&gt;
&lt;?php endforeach; ?&gt;


Then for your javascript:

function AddNewEvent()
{
    var today, html, temp;
    // call str_replace because javascript doesn't like new lines in strings
    html = '&lt;?php echo str_replace(PHP_EOL, "\n", $this-&gt;partial('list_item.phtml', array(
        'date' =&gt; $event-&gt;GetDate()-&gt;format('Y-m-d'),
        'message' =&gt; '',
    ))); ?&gt;';
    $(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).