0

私はcakephp 2.1を使用しており、カテゴリコントローラーのアクションを追加しました。カテゴリのフォームを追加するためのjqueryモーダルウィンドウをどこに含めましたか。

以下のようなモーダルのコード。

<!-- Modal -->
<div id="AddModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &#215;
    </button>
    <h3 id="myModalLabel">Add Category</h3>
</div> 
<div class="modal-body">
    <?php echo $this -> Form -> create('Stock'); ?>
        <fieldset>
                <div class="control-group">
                     <?php echo $this -> Form -> label('Name'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> text('InventoryCategory.name', array('class' => 'input-xlarge', 'placeholder' => 'Enter Category name here...', 'required' => false)); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.name', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                     <?php echo $this -> Form -> label('Parent Category'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> select('InventoryCategory.inventory_category_id', null, array('value' => '', 'class' => 'input-xlarge')); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.inventory_category_id', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                     <?php echo $this -> Form -> label('Description'); ?>
                     <div class="controls">
                         <?php echo $this -> Form -> textarea('InventoryCategory.description', array('class' => 'input-xlarge', 'rows' => '3', 'placeholder' => 'Some description or notes goes in here....')); ?>
                         <?php echo $this -> Form -> error('InventoryCategory.description', array('class' => 'error-message')); ?>
                     </div>
                 </div>
                 <div class="control-group">
                    <div class="controls">
                        <?php echo $this -> Form -> button('Submit', array('class' => 'btn btn-primary')); ?>
                    </div>
                </div>
        </fieldset>
    <?php echo $this -> Form -> end(); ?>
</div>

データを保存するための ajax 呼び出しを含めました。以下のようにjavascriptのコード。

    $('#AddModal').on('shown', function() {
        $.getJSON('<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'categories', true)); ?>', function(data) {
            var options = '';
            $.each(data, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#InventoryCategoryInventoryCategoryId").html(options);
        })
    });

    $('#StockCategoriesForm').submit(function(e) {
        e.preventDefault();

        var name    = $("#InventoryCategoryName").val();
        var categoryId  = $("#InventoryCategoryInventoryCategoryId").val();
        var description   = $("#InventoryCategoryDescription").val(); 

        $.ajax({
            url: "<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'add_category'))?>",
            type: "POST",
            cache: false,
            data: '{"InventoryCategory":{"name":"'+name+'", "categoryId": "'+categoryId+'", "description": "'+description+'"}}', // here build JSON object with your form data
            dataType: "json",
            contentType: "application/json",
            complete: function(result) {
                console.log(result);
                if(result.response == true) {
                    $("#InventoryCategoryName").val(null);
                    $("#InventoryCategoryInventoryCategoryId").val(null);
                    $("#InventoryCategoryDescription").val(null);
                    location.reload();
                    $('#AddModal').modal('hide');
                    alert('inserted');
                } else {
                    alert('not inserted');
                }
            }
        });
    });

カテゴリは保存されていますが、モーダルはそれ自体に近づいていないためCakephp Model、それだけで検証エラーが必要Jquery Modalでした。私が書いていることは正しいですか、それとも間違っている場合は解決策を教えてください。仕事はもっと評価されます。

4

1 に答える 1

2

location.reload（）に障害がある可能性があります。これを行う最もクリーンな方法は、POST呼び出しからJSONではなくレンダリングされたHTMLを取得し、ダイアログの内容をそれに置き換えることです。このようにして、フォームの作成をCakePHPに任せます。

成功すると、たとえば、「閉じる」ボタンのあるウィンドウを返すか、モーダルを閉じるタグを埋め込むことができます。

var $form = $('#StockCategoriesForm');
$form.submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: "<?php echo $this->Html->url(array('controller'=>'stocks', 'action'=>'add_category'))?>",
        type: "POST",
        cache: false,
        data: $form.serialize(),
        complete: function(result) {
            $('#AddModal').html(result);
        }
    });
});
于 2013-03-11T14:54:57.203 に答える