在jquery模式窗口中添加CakePHP動作

Question

我正在使用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'); 
       } 
      } 
     }); 
    }); 

類別被保存，但模式沒有得到密切的本身和我只是想Jquery Modal驗證Cakephp Model錯誤。這是我寫的是正確的，或者如果它是錯誤的，請給我一些解決方案。這項工作更受讚賞。

Answer 1

location.reload（）很可能是錯誤的。最簡單的方法是從POST調用中獲取呈現的HTML而不是JSON，並用它替換對話內容。這樣您就可以將表單構建到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); 
     } 
    }); 
});