0

テーブルでオブジェクトを作成または編集するときに、オブジェクトを編集または追加するためのビューで開くjqueryダイアログがあります。彼らが提出するとき、すべてがうまくいきます。検証チェッキングも追加しましたが、検証エラーが発生した場合は、ダイアログボックスが閉じ、ユーザーは検証エラーメッセージを含む実際のページにリダイレクトされます。

私がやりたいのは、ページに移動する代わりに、ダイアログボックスに検証エラーを表示することです。私は周りを見回して、これにajaxを使用する必要があるかもしれないことを確認しましたが、どのように始めればよいかわかりません。

これが私のモデルのコードです。短くするために余分なものをいくつか削除しました。

class LocalClock extends AppModel
{
    public $useDbConfig = 'default';
    public $useTable = 'local_clocks';

    public $validate = array(
        'utc_offset_sec' => array(
            'rule' => 'notEmpty',
            'rule' => 'numeric',
            'message' => 'Please Enter a Valid Number'
        ),
        'in_month' => array(
            'rule' => 'notEmpty',
            'rule' => 'numeric',
            'message' => 'Please Enter a Valid Number'
        ),
        'in_week' => array(
            'rule' => 'notEmpty',
            'rule' => 'numeric',
            'message' => 'Please Enter a Valid Number'
        ),
        'in_day' => array(
            'rule' => 'notEmpty',
            'rule' => 'numeric',
            'message' => 'Please Enter a Valid Number'
        ),
        'in_hour' => array(
            'rule' => 'notEmpty',
            'rule' => 'numeric',
            'message' => 'Please Enter a Valid Number'
        )
    );

    public function setStatType( $type )
    {
        $this->table = 'local_clocks';
        $this->_schema = array(
            'col1' => array('type' => 'int'),
            'col2' => array('type' => 'string'),
            'col3' => array('type' => 'string'),
            'col4' => array('type' => 'string'),
            'col5' => array('type' => 'string'),
    }
}
?>

これが私のコントローラーのコードです：

class LocalClocksController extends AppController
{
    public $components = array('RequestHandler', 'Session');   // enable checking for incoming request attributes

    public $helpers = array('Html', 'Form', 'Session', 'Javascript', 'Paginator');

    public $paginate = array(
        'limit' => 10,
        'order' => array(
            'LocalClock.id' => 'asc'
        )
    );

    public function index()
    {
        $this->LocalClock->table = 'local_clocks';
        $this->LocalClock->getDataSource()->tableFields['local_clocks'] = array( "id", "name", "auto_offset", "utc_offset_sec", "in_month", "in_week", "in_day", "in_hour", "out_month", "out_week", "out_day", "out_hour", "offset_sec");

        if ($this->RequestHandler->accepts('xml'))
        {
            // xml handler
            $this->set('localClocks', $this->LocalClock->find('all'));
            $this->set('_serialize', array('local_clocks'));
            $data = $this->paginate('LocalClock');
            $this->set('localClocks', $data);
        }
        elseif ($this->RequestHandler->accepts('json'))
        {
            //json handler
            $this->set('localClocks', $this->LocalClock->find('all'));
            $this->set('_serialize', array('local_clocks'));
            $data = $this->paginate('LocalClock');
            $this->set('localClocks', $data);
        }
        elseif( $this->RequestHandler->accepts('html'))
        {
            //html handler
            //$this->LocalClock->getDataSource()->tableFields['local_clocks'] = array( "id", "name", "auto_offset", "utc_offset_sec", "in_month", "in_week", "in_day", "in_hour", "out_month", "out_week", "out_day", "out_hour", "offset_sec");
            $this->set('localClocks', $this->LocalClock->find('all'));

            $data = $this->paginate('LocalClock');
            $this->set('localClocks', $data);
        }
    }

    public function add()
    {
        if ($this->request->is('post'))
        {
            if ($this->LocalClock->save($this->request->data))
            {
                $this->set('localClocks', $this->request->data);
                $this->LocalClock->save($localClocks);
                $this->Session->setFlash('Local Clock: '. $this->request->data['LocalClock']['name'] . ' has been created.');
                $this->redirect(array('action' => 'index'));
            }
            else
            {
                $this->Session->setFlash('Unable to add new Local Clock.');
            }
        }
    }

    public function edit($id = null)
    {
        $this->LocalClock->id = $id;
        if ($this->request->is('get'))
        {
            $this->request->data = $this->LocalClock->read();
            $this->set('localClocks', $this->LocalClock->read());
        }
        else
        {
            if ($this->LocalClock->save($this->request->data))
            {
                $this->Session->setFlash('Local Clock: '. $this->request->data['LocalClock']['name'] . ' has been updated.');
                $this->redirect(array('action' => 'index'));
            }
            else
            {
                $this->Session->setFlash('Unable to update Local Clock: '. $this->request->data['LocalClock']['name']);
                $this->set('localClocks', $this->request->data);
            }
        }
    }
?>

これが私のindex.ctpのコードです：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />

<p> <?php echo $this->Paginator->prev('« Previous', null, null, array('class' => 'disabled')); ?>;
<?php echo $this->Paginator->numbers(); ?>
<?php echo $this->Paginator->next('Next »', null, null, array('class' => 'disabled')); ?>; </p>

<script>
$(function() 
{
    var $dialog = $("#edit_dialog").dialog(
        {
            autoOpen: false,
            title: 'Edit Local Clock',
            height: 500,
            width: 500,
            resizable: true,
            modal: true
        });
    $(".edit_dialog").click(function()
    {
        $dialog.load($(this).attr('href'), function ()
                {
                    $dialog.dialog('open');
                });
        return false;
    });
});
</script>

<script>
$(function()
{
    var $dialog = $("#add_dialog").dialog(
        {
            autoOpen: false,
            title: 'Create Local Clock',
            height: 500,
            width: 500,
            resizable: true,
            modal: true
        });
    $(".add_dialog").click(function()
    {
        $dialog.load($(this).attr('href'), function ()
                {
                    $dialog.dialog('open');
                });
        return false;
    });
});
</script>

<p><marquee><u>Local Clocks</u></marquee></p>

<div>

<table>
    <thead><tr>
<th> <?php echo $this->Paginator->sort('id', 'ID'); ?> </th>  <th>Name      </th>  <th>Auto Offset  </th>  <th>UTC Offset Sec  </th>  <th>In Month  </th>
<th>In Week  </th>  <th>In Day    </th>  <th>In Hour      </th>  <th>Out Month       </th>  <th>Out Week  </th>
<th>Out Day  </th>  <th>Out Hour  </th>  <th>Offset Sec   </th>  <th>Actions         </th>
    </tr></thead>

    <tbody>

<?php  foreach($localClocks as $LocalClock) { ?>

        <tr>
    <td>  <?php echo $LocalClock['LocalClock']['id']; ?>              </td>
    <td>  <?php echo $LocalClock['LocalClock']['name']; ?>            </td>
    <td>  <?php echo $LocalClock['LocalClock']['auto_offset']; ?>     </td>
    <td>  <?php echo $LocalClock['LocalClock']['utc_offset_sec']; ?>  </td>
    <td>  <?php echo $LocalClock['LocalClock']['in_month']; ?>        </td>
    <td>  <?php echo $LocalClock['LocalClock']['in_week']; ?>         </td>
    <td>  <?php echo $LocalClock['LocalClock']['in_day']; ?>          </td>
    <td>  <?php echo $LocalClock['LocalClock']['in_hour']; ?>         </td>

    <td>
        <?php echo $this->Html->link('View', array('action' => 'view', $LocalClock['LocalClock']['id']), array('class' => 'view_dialog')); ?>
    <?php echo $this->Html->link('Edit', array('action' => 'edit', $LocalClock['LocalClock']['id']), array('class' => 'edit_dialog'));?>
    <?php echo $this->Form->postLink('Delete', array('action' => 'delete', $LocalClock['LocalClock']['id']), array('confirm' => 'Are you sure?')); ?>
            </td>
        </tr>
<?php } ?>

    </tbody>
</table>

</div>

<div>
    <?php echo $this->Html->link('Create Local Clock', array('action' => 'add'), array('class' => 'add_dialog')); ?>
</div>

<div id="view_dialog">
</div>

<div id="edit_dialog">
</div>

<div id="add_dialog">
</div>

そして最後に、これが私のedit.ctpです。

<p>Edit Settings for Local Clock: <?php echo $localClocks['LocalClock']['name']; ?> </p>

<div>

<?php echo $this->Form->create('LocalClock', array('action' => 'edit', 'inputDefaults' => array('label' => false))); ?>
<?php echo $this->Form->input('id', array('type' => 'hidden')); ?>

<table>
    <thead><tr>
        <th>Field</th>  <th>Current Value</th>  <th>New Value</th>
    </tr></thead>

    <tbody>
    <tr> <td>Name</td> <td> <?php echo $localClocks['LocalClock']['name']; ?> </td> <td> <?php echo $this->Form->input('LocalClock.name');?> </td> </tr>
    <tr> <td>Auto Offset </td> <td> <?php echo $localClocks['LocalClock']['auto_offset']; ?> </td> <td> <?php echo $this->Form->input('LocalClock.auto_offset');?> </td> </tr>
    <tr> <td>UTC Offset Sec</td> <td> <?php echo $localClocks['LocalClock']['utc_offset_sec']; ?> </td> <td> <?php echo $this->Form->input('LocalClock.utc_offset_sec');?> </td> </tr>
    <tr> <td>In Month</td> <td> <?php echo $localClocks['LocalClock']['in_month']; ?> </td> <td> <?php echo $this->Form->input('LocalClock.in_month');?> </td> </tr>
    </tbody>
</table>

<?php echo $this->Form->end('Save Changes'); ?>
</div>

編集ダイアログボックスのヘルプを取得し、ページを閉じてリダイレクトせずに検証できる場合は、追加機能についても同じことができるはずです。

助けてくれてありがとう、そして何か不明な点があるか、誰かがもっと情報を必要としているなら私に知らせてください。

4

1 に答える 1

1

これを解決するには、まず編集ファイルの最後、$this->Form->end() の直前に ajax 送信ボタンを追加します。（括弧内の「変更を保存」を削除します。ajax送信を変更してそれを言うことができるためです）。

<?php
    // The Ajax Helper submit is used to submit the changes made to the edit form
    // because it allows the modal window to be loaded with the updated edit view
    // without leaving the modal window. 
    echo $this->Ajax->submit('Save Changes', array(
        'url' => array('controller' => 'localClocks', 'action' => 'edit'),
        'update' => 'editTable'));

    // Call the close Dialog() function if data was validated sucessfully; valid == true. 
    // Else it stays open displaying validation error message.
    if (false != $valid)
    {
        echo "<script>closeDialog()</script>";
    }

echo $this->Form->end(); ?>

次にコントローラーファイルで、編集機能を次のように変更します。

public function edit($id = null)
    {
        $this->LocalClock->id = $id;
        $this->set('valid', false);
        if ($this->request->is('get'))
        {
            $this->request->data = $this->LocalClock->read();
            $this->set('localClocks', $this->LocalClock->read());
        }
        else
        {
            if ($this->LocalClock->save($this->request->data))
            {
                $this->Session->setFlash('Local Clock: '. $this->request->data['LocalClock']['name'] . ' has been updated.');
                $this->set('valid', true);
                //$this->redirect(array('action' => 'index'));
            }
            else
            {
                $this->Session->setFlash('Unable to update Local Clock: '. $this->request->data['LocalClock']['name']);
                $this->set('localClocks', $this->request->data);
                $this->set('valid', false);
            }
        }
    }

ここでの唯一の新しい点は、コードがブール値を変数に割り当てて、検証エラーがあるかどうかに応じてダイアログ ボックスを閉じるかどうかを決定することです。

以上です。それは他のすべてに正しく差し込みます。これが他の人に役立つことを願っています。

于 2012-06-13T13:03:10.127 に答える