Yii - CJuiDialog Закрыть при нажатии кнопки отправки - PullRequest
Новая
       14

Yii - CJuiDialog Закрыть при нажатии кнопки отправки

0 голосов
/ 22 августа 2011

У меня есть CJuiDialog, ниже указан код 

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'mymodal',
    'options'=>array(
        'title'=>'Your 10 seconds take you into ....',
        'width'=>700,
        'height'=>400,
        'autoOpen'=>true,
        'resizable'=>false,
        'modal'=>true,
        'closeOnEscape' => false,     
    ),

)); ?>

В этом диалоговом окне у меня есть форма, а в форме ниже - кнопка отправки 

<?php echo CHtml::submitButton('Submit', array('onclick'=>'js:function(){ alert("test"); $(#mymodal).dialog("close");}',
        )); ?>

при нажатии на эту кнопкуЯ хочу закрыть это диалоговое окно и отправить форму.Но приведенный выше код, который я написал в Button, не работает.какие-либо синтаксические ошибки?

Другой способ, которым я пытался, - я использовал кнопки в диалоговом окне и смог закрыть диалоговое окно, используя 

`js:function(){$(this).dialog("close")`

Но я не могу отправить форму там.Поэтому выбрали первый подход.

Может ли кто-нибудь помочь мне найти правильное решение?

Спасибо и всего наилучшего

Киран

Ответы [ 2 ]

6 голосов
/ 11 июля 2012

Прежде всего, вы должны понять / запомнить, что по умолчанию кнопка отправки html перемещается на или загружает URL-адрес действия формы.Таким образом, при условии, что ваш URL-адрес действия указан правильно, кнопка по умолчанию просто отправит форму и перейдет к этому URL-адресу.

  1. Если это произойдет, а URL-адрес действия иURL текущей страницы не совпадают, вы все равно больше не увидите диалоговое окно (из-за навигации).

  2. Но если ваш URL-адрес действия и текущий URL-адрес совпадают *, то, очевидно, после отправки по умолчанию этот же URL-адрес будет загружен снова, и поскольку ваш диалог 'autoOpen'=>true, он снова откроется.

Итак, лучший способ действий, который я могу для вас увидеть, это использовать jjery's ajax для отправки вашей формы.Это можно сделать тремя способами:

  1. Использование ajaxSubmitButton() непосредственно в форме: 

    echo CHtml::ajaxSubmitButton('SubmitThis',
    $url, // form's action url, you can use createUrl 
    array( // ajaxOptions, use success to close the dialog
       'success'=>'function(){$("#mymodal").dialog("close");}'
    )
);

  2. Используйте кнопку диалога, чтобы отправить форму.В приведенном ниже примере для записи запроса ajax используется сокращение $.post() и .serialize() для сериализации данных формы: 

    // other cjuidialog options
// ...
'buttons'=>array(
    'Submit'=>'js:function(){
                $.post(
                    $("#form-id").attr("action"), // the url to submit to
                    $("#form-id").serialize(), // the data is serialized
                    function(){$("#mymodal").dialog("close");} // in the success the dialog is closed
                );
           }',
    // other buttons
)

  3. Вы также можете использовать обычную кнопку отправки, но вам придется снова использовать ajax: 

    'onclick'=>'$.post(
              $("#form-id").attr("action"), // the url to submit to
              $("#form-id").serialize(), // the data is serialized
              function(){$("#mymodal").dialog("close");}
            );
           return false; // to prevent the navigation to the action url
           '

[*] если вы используете CActiveForm и не указали 'action', это происходит по умолчанию

1 голос
/ 22 августа 2011

Во-первых, не ставьте js: в значение onclick. Правильный префикс - javascript:, и он не нужен в on*, значения которого всегда являются сценариями, по умолчанию в Javascript.

Во-вторых, вы определили анонимную функцию JS, которая никогда не вызывается.

Затем научитесь использовать консоль JS для просмотра ошибок и отладчик JS для пошагового выполнения кода. В Firefox вы можете использовать расширение firebug. В Chrome или Opera нажмите Ctrl-Shift-I, чтобы открыть блок разработчика, содержащий инструменты JS. Тогда будет легко исправить ваш код JS, который в данный момент: 

function(){
    alert("test");
    $(#mymodal).dialog("close");
}

Видите ошибки? Не должно быть никакой функции, как указано выше, и вы забыли процитировать текст.

...