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