jquery - CakePHP + ajaxForm - ビューの一部をロード

Question

jQuery プラグイン AjaxForm を介してフォームをサーバーに送信します。

これは私の単純化されたビューです：

<div id="output1">...here goes my CakePHP PHP form code...</div>

<script type="text/javascript">
    $(document).ready(function() { 
        var options = { 
            target:'#output1',
            beforeSubmit: onBeforeSubmit,
            success: onSuccess,
            error: onError
        }; 
        $('#CommentEditForm').ajaxForm(options); 
    });
</script>

モデルによって検証されていないフォームデータを受け取ったコントローラー関数で、ajax レイアウトのレイアウトを変更し、デフォルトのレイアウトの html を使用せずにビューを返し、ビューの div#output1 に追加します。

問題ないようですが、フォーム以外は表示されていますが、div#output1 と JavaScript コードが表示されています。私の問題はどこにあるのか知っています - javascriptコードやdiv#output1のものではなく、フォームデータのみを返す方法が必要です。このロジックはすべてのアプリケーションで使用されるため、すべてのビューで {if...else} 条件をハードコーディングする必要は避けたいと考えています。

score 4 · Accepted Answer

thaJezathの答えは良いですが、他にもいくつかあります：

すべての ajax に CakePHP Js ヘルパーを使用する方が簡単で、より DRY です。

<div id="output">
<?php
    echo $this->Form->create();
    echo $this->Form->input('input1');
    echo $this->Form->input('input2');
    echo $this->Js->submit('submit',array('update' => '#output');
?>
</div>

これにより、ajax送信を処理するバッファリングされたスクリプトが自動的に追加されます。ただし、レイアウトのタグecho $this->Js->writeBuffer();の直前に行が必要になります。</body>しかし、これはまだ返されます<div id="output">...- に変更すると'update' => '#content'、コンテンツ div 全体がリロードされます。

他のものではなくフォームだけを更新する必要がある場合：

ビューファイルで：

     <div id="output">
     <?php $this->start('ajax-content'); // this line starts new block ?>
     <?php
        echo $this->Form->create();
        echo $this->Form->input('input1');
        echo $this->Form->input('input2');
        echo $this->Js->submit('submit',array('update' => '#output');
    ?>
    <?php
        $this->end(); // this line ends block
        echo $this->fetch('ajax-content'); // this line print contents of block
    ?>
    </div>

そして、あなたの /View/Layouts/ajax.ctp で:

    <?php
        // next 2 lines only ensure that ajax-content block exists
        // if not it will be just empty string
        $this->startIfEmpty('ajax-content'); 
        $this->end();
        echo $this->fetch('ajax-content'); // this line outputs ajax-content block (the form)
    ?>

つまり、このメソッドを要約すると、ビューブロック内の ajax コンテンツで返したいコンテンツを囲みます。次に、ビュー全体を印刷する代わりにajaxレイアウト（$this->fetch('content');）、ajax-contentブロックのコンテンツのみを印刷します（$this->fetch('ajax-content');）。このようにして、ajax リクエスト中に返したいすべてのコンテンツをすべてのビューでマークできます。

台詞：

        $this->end(); // this line ends block
        echo $this->fetch('ajax-content'); // this line print contents of block

便利ではないかもしれません - すべてのブロック記録コードを独自のヘルパーに入れて、単純に使用することをお勧めします。

    <div id=...
    $this->AjaxContent->start();
    your form here
    $this->AjaxContent->stop();
    </div>

thaJezath がコメントで書いたように、JsHelper は将来のリリースで非推奨になるため、彼が言ったようにビューブロックを使用する方が安全です。HtmlHelper には、これを行う便利な方法があります。

    <?php $this->Html->scriptStart(array('inline' => false)); ?>
        $(document).ready(function(){ 
            // your code here
        });
    <?php $this->Html->scriptStart(array('inline' => false)); ?>

これにより、スクリプトがviewBlockに追加"script"され、デフォルトのレイアウトで印刷されます$this->fetch('script');

score 3 · Accepted Answer

JavaScriptを出力するには、JavaScriptバッファーまたは「ビューブロック」を使用する必要があります。これにより、ビューではなくレイアウト内にjavascriptを出力できます。AJAXリクエストに対してすでに別のレイアウトに切り替えている（またはレイアウトなし）ため、AJAXを介して取得するときにスクリプトは含まれません。

ビューを次のように変更します。

ビューのコンテンツを次のように変更します。

<div id="output1">...here goes my CakePHP PHP form code...</div>

<?php

/**
 * I'm using 'heredoc' notation so that you don't have to escape quotes and '$'
 * @link http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc
 */
$script = <<< JS
    $('#CommentEditForm').ajaxForm({ 
        target:'#output1',
        beforeSubmit: onBeforeSubmit,
        success: onSuccess,
        error: onError
    }); 
JS;

/**
 * Append the JavaScript to the JavaScript-buffer
 * using the JS helper
 * 
 * @link http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html
 */
$this->Js->buffer($script);

レイアウトにJavaScriptを出力します（例：Layouts / default.ctp）

<!-- rest of your layout here -->

<?php
// Output the JavaScript and wrap it in a 'onDomready()' wrapper
echo $this->Js->writeBuffer();
?>
</body>
</html>

注：JSバッファーを使用する場合、スクリプトに「onDomready（）」を追加する必要はありません。CakePHPは、$ this-> Js-> writeBuffer（）でバッファーを出力するときにスクリプトを自動的に追加します。

注2：output-bufferを使用すると、JavaScriptをバッファーに複数回追加できます。たとえば、「elements」を使用している場合は、JavaScriptをバッファに追加することもできます。これにより、スクリプト「as-you-go」を追加して、体の最後に一度に出力することができます。

jquery - CakePHP + ajaxForm - ビューの一部をロード

2 に答える 2

Related

Reference