Как исчезнуть из формы в диалоге после успеха - PullRequest
0 голосов
/ 04 июня 2011

Сценарий: Используя плагин jquery form . Форма появляется в диалоговом окне, созданном с помощью jquery UI. После нажатия на кнопку отправить сообщение об успехе появится в форме. Я хотел бы, чтобы диалоговое окно исчезло после появления сообщения об успехе.

Проблема: Мне неясно, как структурировать код, чтобы закрыть его в случае успеха, и куда поместить код.

Далее я попытался добавить «функцию успеха» к сценарию, которая запускается при нажатии на отправку формы следующим образом:

$(document).ready(function() {
var options = {
    target : '#output1',
    url:    'comments.php',
    clearForm:  'true',
    success:    function {
        $dialog.dialog('close');
    }
};
// bind 'myForm' and provide a simple callback function 
$('#brokenLinks').ajaxForm(options);
return false;
});

Однако это нарушает работу сценария, и нажатие кнопки отправки приводит к загрузке в окне сценария php с сообщением об успешном завершении, в отличие от желаемого поведения на странице формы.

Может ли кто-нибудь указать мне примеры того, как затухать диалоговое окно после отправки формы, или предложить, как это должно быть спроектировано.

Спасибо.

Дополнительный код

ФОРМА

                    </p>
                    <p>
                        <input name="nowhere" value="linknowhere" type="radio">Link is
                        broken and doesn't go anywhere
                    </p>

                    <p>
                        <input name="wrong_url" value="linktowrongurl" type="radio">Link
                        goes to an unexpected destination
                    </p>
                    <p>
                        <input name="other" value="linkother" type="radio">Other -
                        Please explain in the description box below
                    </p>
                    <em>Description</em>
                    <p>Please add as much descripton as you can about the problem you
                        noticed</p>
                    <textarea class="tagged" name="description" id="area" cols="50" rows="10" title="Please add as much description as you can."></textarea>

                    <p>
                        Page Address: <br> <input name="url" value="" id="targetURL" size="100" title="Page Address" type="text">
                    </p>
                    <p>
                        Browser<input name="browser" value="Firefox" type="text">
                    </p>
                    <p>

                        Operating System<input name="operating_system" value="MacOSX" type="text">
                    </p>
                    <p>
                        <input name="submit" id="button" value="Submit" type="submit">
                    </p>
                </fieldset>
            </form>
    <!-- server response -->

            <h2 class="testColor">Output Response</h2>
            <div id="output1" class="testColor">

            </div>
            <!--End broken links FORM-->

Сценарий создания диалога

$(document).ready(function() {


$('#target a').each(function() {
    var $link = $(this);
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            title: $link.attr('title'),
            width: 700,
            height: 800,
            modal:  true,
            open:   function (event,ui) {
                $("input[name='url']").val(pageAddress);


            }
        });

    $link.click(function() {
        $dialog.dialog('open');
        $( "#accordion" ).accordion({
            collapsible: true,
            active: false
        });
        return false;
    });
});
});

Хост-страница

<!-- Checks for presence of cookie. If present sets a php flag to indicate that cookie is present. This flag is read into Javascript in another script -->
<script type="text/javascript">
var readerStatus="tester";

if (readerStatus=="tester")  {
$(function() {
    $( "#dialog" ).dialog();
});
};
</script><!-- If tester flag is set then show the feedback button -->
<script type="text/javascript">
var pageAddress="http://localhost/Formdev/rc2feedbackform/page3_blogpage1.php";
</script><!-- Reads the url of the page and stores it as a Javascript variable -->

</head>

<body>

<div id="dialog" title="Feedback Button">
<div  title="Feedback Form">
    <p id='target'><a href="feedbackform.php"  title='Feedback Form' >Click Here   For Feedback Form</a></p>
    <p class="notes">This form is dragable and resizable</p>

</div>
</div><!-- This is the text for the tester button -->
<!--------------------------------------------------------------------------->
<!-- Start The Page Display -->
<h1>Page 1 Of The Blog</h1>
<p class="blueborder  textColor">This page simulates the page on the blog where testers will land. A button appears on this page with the title feedback form. Click on the button and the feedback form will appear. You can then complete the form. When you are done click on the submit button. If the forms is successfully recorded you will see a message telling you its been recoreded.    </p>






</body>

1 Ответ

0 голосов
/ 04 июня 2011

Вы должны отправить форму, используя ajax, чтобы предотвратить загрузку новой страницы. затем используйте функцию обратного вызова в функции ajax для выполнения .fadeout () в div / form

edit: я неправильно понял вопрос. может помочь, если вы показываете функцию, вызываемую при нажатии кнопки отправки / входа в систему

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...