Cakephp Dynamically add Drop down menus for Time

Question

I have a form which includes adding operting time for a restaurant.

operation_hours(weekday, open_time, close_time, restaurant_id)

i use this in the form

<div class="operation_hours">
<?php echo $this->Form->dateTime('RestaurantOperationHour.open_time', false, '12', null, array('interval' => 15, 'value' => '10:00:00')); ?>
<?php echo "<label> to </label>"; ?>
<?php echo $this->Form->dateTime('RestaurantOperationHour.close_time', false, '12', null, array('separator' => ' ', 'interval' => 15, 'value' => '23:00:00')); ?>
</div>

which generates

http://pastebin.com/TDDesCRn

i wanna add multiple of this.. incase the rest works like this 10am to 3pm then 7pm to 11pm.

i will need to sets for a single day.

which is the best way to add this dynamically.

i tried some thing like this

// JavaScript Document
$(function () {

    // Phone Number
    var i = $('div#phoneContainer div input').size();
    $('a#addPhone').click(function () {
        $('<div><input name="data[Restaurantphone][' + i + '][number]" type="text" value="" id="Restaurantphone' + i + 'Number" /></div>').appendTo('div#phoneContainer');
        i++;
    });


    // Restaurant Timing
    var j = $('div#timeContainer div').size();
    $('a#addTime').click(function () {

        open_hours = $('div#timeContainer div select#Restauranttiming0OpenHour').html();
        open_minutes = $('div#timeContainer div select#Restauranttiming0OpenMin').html();
        open_meridian = $('div#timeContainer div select#Restauranttiming0OpenMeridian').html();
        close_hours = $('div#timeContainer div select#Restauranttiming0CloseHour').html();
        close_minutes = $('div#timeContainer div select#Restauranttiming0CloseMin').html();
        close_meridian = $('div#timeContainer div select#Restauranttiming0CloseMeridian').html();

        tag1 = '<select id="Restauranttiming';
        tag2 = '" name="data[Restauranttiming][';
        tag3 = '</select>';
        open_hours = tag1 + j +'OpenHour' + tag2 + j + '][open][hour]">' + open_hours + tag3;
        open_minutes = tag1 + j +'OpenMin' + tag2 + j + '][open][min]">' + open_minutes + tag3;
        open_meridian = tag1 + j +'OpenMeridian' + tag2 + j + '][open][meridian]">' + open_meridian + tag3;

        close_hours = tag1 + j +'CloseHour' + tag2 + j + '][close][hour]">' + close_hours + tag3;
        close_minutes = tag1 + j +'CloseMin' + tag2 + j + '][close][min]">' + close_minutes + tag3;
        close_meridian = tag1 + j +'CloseMeridian' + tag2 + j + '][close][meridian]">' + close_meridian + tag3;


        content = '<div>\n' + open_hours + ':' + open_minutes + ' ' + open_meridian + '\n-\n' +close_hours + ':' + close_minutes + ' ' + close_meridian + '\n</div>';
        $(content).appendTo('div#timeContainer');
        j++;
    });

});

i wanna know which the best way to do it with cakephp and jQuery ?

Answer 1

Another approach would be to use an ajax call to a controller method that returns the form inputs you want, and insert it after the existing ones. If you create an element for your views with just this part of the form, you can reuse that element in your add() and edit() views, as well as for the ajax view. Then you can also use the FormHelper to generate it.

UPDATE Here's an example of how it would work.

In your app_controller, include RequestHandler in your components:

var $components = array('RequestHandler');

And also put this in your beforeFilter method in the app_controller:

if($this->RequestHandler->isAjax()){
    Configure::write('debug', 0); // forget debug messages
    $this->layout = 'ajax'; //and use ajax layout
}

You would then have a simple controller method for the ajax call:

function add_time() {
    $this->render('time');
}

time.ctp could also be very simple, and just refer to an element:

echo $this->element('time_form');

The element called "time_form.ctp" (in this example) that has just the part of the form you want (e.g. the first code block from the question). Then, in your add() and edit() views in the restaurant controller, call the same element (actually you'll need to pass data in to tell it which values have already been saved in the edit() view):

<fieldset>
<legend>Times</legend>
    <div id="times">
        <?php echo $this->element('time_form'); ?>
    </div>
</fieldset>

Then include a request link that will call your add_time() method and place the results in #times. You could use the JsHelper for this:

http://book.cakephp.org/view/1593/Methods

Check the request() and link() methods. This is just a general outline of how it would work. You'll need to figure out which values to pass in to determine your form element keys, etc.

Hope this helps.