Yii-如何打開Jquery對話框小部件並提交表單

Question

我環顧四周，發現了各種示例，但是我不確定是否正確實現了它們。 我認為不會像我單擊提交按鈕時那樣，它會重新加載頁面並且不提交任何內容。

來源： Yii，在“提交”按鈕上附加了javascript函數

預期的目標如下：我希望用戶輸入消息后單擊“ Fire！”。 這樣做后，將驗證消息，如果驗證正確，將執行腳本。

我希望Jquery對話框執行的操作是在腳本執行時彈出。 （因為需要一些時間），腳本完成后，會將用戶帶到主頁。

這是我目前如何設置它並注釋掉各種嘗試的方式：

jQuery的

bouncing = '<?php echo CJavaScript::encode($isbouncing);?>';

    $(function() {
        $( "#dialog-message" ).dialog({
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            show: {effect: "blind", duration: 500},
            hide: {effect: "explode", duration: 500},
            buttons: { Ok: function() {$( this ).dialog( "close" );} }
        });
        if(bouncing = 1)
            $( "#dialog-message").dialog( "open" );

        $("#bouncing-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            show: {effect: "blind", duration: 500},
            hide: {effect: "explode", duration: 500}
        });
 $("#bounce-log-form").submit(function() {
                $('#bouncing-message').dialog('open');
            });

            //Grab closest form
                //var form = ($this).closest("bounce-log-form");
            //Freeze submission
                //e.preventDefault();
            //Get the action-url of the form
                //var actionurl = e.currentTarget.action;
            //Display the dialog box
                //$('#bouncing-message').dialog('open');
            //Now we can submit our form
                //form.submit();
            /*$.ajax({
                url: actionurl,
                type: 'post',
                dataType: 'json',
                success:  function(){
                    $('#bouncing-message').dialog('close');
                }
            })*/

        });

形成

<div id="NB_messagebox" class="NB_console_content form">
    <?php
    $form = $this->beginWidget('CActiveForm', array(
        'id' => 'bounce-log-form',
        'focus' => array($logmodel, 'reasonBounced'),
        'enableAjaxValidation' => true,
        'clientOptions' => array(
            'validateOnSubmit' => true,
            'validateOnChange' => false,
            'validateOnType' => true,
        ),
    ));
    ?>
    <p class="note">Fields with <span class="required">*</span> are required.</p>
    <?php echo $form->errorSummary($logmodel); ?>

    <div class="row">
        <?php echo $form->labelEx($logmodel, 'reasonBounced'); ?>
        <?php echo $form->textArea($logmodel, 'reasonBounced', array('rows' => 6, 'cols' => 50)); ?>
        <?php echo $form->error($logmodel, 'reasonBounced', array(), true, true); ?>
    </div>
    <div class="row buttons">
        <?php echo CHtml::submitButton($label = 'Fire!', array('name' => 'BounceButton', 'class' => 'NB_bounce_Button', 'submit' => Yii::app()->createUrl("/whammy/confirm", array("id" => $model->id)))) ?>
    </div>
    <?php $this->endWidget(); ?>
    <?php echo CHtml::endForm(); ?>

    <div id="dialog-message" title="Multi-Bounce Safety">
        <p>
            <span class="ui-icon ui-icon-flag" style="float:left; margin:0 7px 50px 0;"></span>
            A node is currently being bounced, proceed with caution!
        </p>
        <p>
            <b>Press "Ok" to continue</b>.
        </p>
    </div>
    <div id="bouncing-message" title="Bouncing Node">
        <p>
            <span class="ui-icon ui-icon-flag" style="float:left; margin:0 7px 50px 0;"></span>
            Bouncing node:  <?php echo $model->name; ?>
        </p>
    </div>

</div>

Answer 1

更新。 發送表單時打開窗口。

$("#bounce-log-form").submit(function(e){
    e.preventDefault(); // prevent form submiting and page reload
    $('#bouncing-message').dialog('open');
    $.ajax({
       type: 'POST',
       url: $("#bounce-log-form").attr('action'), // or location.href or <?= Yii::app()->createUrl()
       data: $("#bounce-log-form").searialize(),
       cache: false
    });

    return false;
});