【问题标题】:Cakephp Dynamically add Drop down menus for TimeCakephp 为时间动态添加下拉菜单
【发布时间】:2011-04-19 05:13:38
【问题描述】:

我有一个表格,其中包括为餐厅添加营业时间。

operation_hours(weekday, open_time, close_time, restaurant_id)

我以这种形式使用它

<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>

生成

http://pastebin.com/TDDesCRn

我想添加多个这个.. 以防其余的工作像这样,早上 10 点到下午 3 点,然后是晚上 7 点到晚上 11 点。

我需要设置一天。

这是动态添加它的最佳方式。

我试过这样的事情

// 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++;
    });

});

我想知道使用 cakephp 和 jQuery 的最佳方法是什么?

【问题讨论】:

    标签: forms cakephp drop-down-menu cakephp-1.3


    【解决方案1】:

    另一种方法是对控制器方法使用 ajax 调用,该方法返回所需的表单输入,并将其插入现有输入之后。如果您只使用表单的这一部分为视图创建元素,则可以在 add()edit() 视图以及 ajax 视图中重用该元素。然后你也可以使用FormHelper来生成它。

    更新下面是它如何工作的示例。

    在您的 app_controller 中,将 RequestHandler 包含在您的组件中:

    var $components = array('RequestHandler');
    

    并将其放入 app_controller 的 beforeFilter 方法中:

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

    然后,您将有一个简单的 ajax 调用控制器方法:

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

    time.ctp 也可以很简单,只引用一个元素:

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

    名为“time_form.ctp”的元素(在此示例中)仅包含您想要的部分表单(例如问题中的第一个代码块)。然后,在餐厅控制器的add()edit() 视图中,调用相同的元素(实际上,您需要传入数据来告诉它哪些值已经保存在edit() 视图中):

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

    然后包含一个请求链接,该链接将调用您的add_time() 方法并将结果放入#times。您可以为此使用 JsHelper:

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

    检查request()link() 方法。这只是它如何工作的一般概述。您需要弄清楚要传入哪些值来确定表单元素键等。

    希望这会有所帮助。

    【讨论】:

    • 是的。说得通。你能告诉我一个在 Ajax 的帮助下调用助手的例子吗,或者给我一个例子。我不太了解。
    • 希望上面的代码能帮助你弄清楚如何处理它。请务必查看 JsHelper 和 FormHelper 填写详细信息。
    猜你喜欢
    • 2013-06-22
    • 2012-10-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-03
    • 1970-01-01
    相关资源
    最近更新 更多