JQueryUI.dialog( "закрыть" ) не работает после вызова ajax

Я использую диалог jQueryUI с опцией модальной формы, чтобы открыть всплывающее окно. Когда пользователь нажимает кнопку, он отправляет свой вход в базу данных, а затем должен закрыть диалог. Все работает ЗА ИСКЛЮЧЕНИЕМ закрытия диалога. (Работает кнопка "Закрыть", она просто не закрывается автоматически после возврата из базы данных PHP script. Здесь код script. (Я попытался выделить строку, которая не работает, видимо, вы не можете вложить жирный шрифт внутри тегов кода, но линия окружена двойными звездочками, чтобы выделить ее. Это не часть реального кода!)

<script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        var name = $( "#name" ),
            email = $( "#email" ),
            company = $( "#company" ),
            plate = $( "#plate"),
            allFields = $( [] ).add( name ).add( email ).add( company ).add( plate ),
            tips = $( ".validateTips" );

        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }

        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }

        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 390,
            width: 350,
            position: 'top',
            modal: true,
            zIndex: 3000,
            buttons: {
                "Submit your plate": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( plate, "plate code", 1, 7 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( company, "company", 1, 100);

                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );


                    if ( bValid ) {

                            var nameStr = name.val();
                            var emailStr = email.val();
                            var companyStr = company.val();
                            var plateStr = plate.val();

                            var string = 'name='+ nameStr+'&email='+emailStr+'&company='+companyStr+'&plate='+plateStr;
                            //alert('string: '+string);


                            $.ajax({
                               type: "POST",
                               url: "submit_plate.php",
                               data: string,
                               dataType: 'json',
                               cache: false,
                               success: function(returnData){
                                                            alert(returnData.msg);
                                if(returnData.error === false) {
                                    **$( this ).dialog( "close" );**
                                }
                                else {
                                    alert("Error: "+returnData.msg);
                                }
                              }

                             });


                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

        $( "#submit-plate" )
            //.button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    });
</script>

Любые идеи? ИЗМЕНИТЬ КОД ДОСТУП К PHP

<?php
include('../cfg/ez_sql.php');
include('../cfg/db_setup.php');

$err = false;
if (isset($_REQUEST['plate'])) {

    $raw = "INSERT INTO dot_plate_submissions (plate_code, plate_name, plate_company, plate_email) VALUES ('%s', '%s', '%s', '%s')";
    $clean = sprintf($raw,
               mysql_real_escape_string($_REQUEST['plate']),
               mysql_real_escape_string($_REQUEST['name']),
               mysql_real_escape_string($_REQUEST['company']),
               mysql_real_escape_string($_REQUEST['email']));

    //error_log("cleaned query: $clean");

   $db->query($clean);
}
else {
    $err = true;
}

if($err) {
    $return['error'] = true;
    $return['msg'] = "There was an error submitting your plate";
}
else {
    $return['error'] = false;
    $return['msg'] = "made it to php";
}
echo json_encode($return);
?>

Таким образом, даже если ошибка ложна, вызов ajax все равно должен вернуть две части данных.

Ответы

Ответ 1

Я решил это решить несколько месяцев назад, но забыл вернуться сюда и опубликовать решение. Это не имело никакого отношения к моему коду; это был конфликт версий jqueryui и jquery. Я использовал более старую версию jquery; как только я обновил свою библиотеку до версии, требуемой jqueryui (и которая на заметке была очень четко обозначена на демо-странице, а я плохо читаю внимательно), все работает правильно.

Ответ 2

Измените ваш вызов $.ajax, чтобы включить контекст, поэтому в обратном вызове действует значение $(this):

$.ajax({
    type: "POST",
    url: "submit_plate.php",
    data: string,
    dataType: 'json',
    context: $(this),
    cache: false,
    success: function(returnData){
        if(returnData.error === false) {
            $( this ).dialog( "close" );
            } else {
                  alert("Error: "+returnData.msg);
            }
    }   
});

Ответ 3

когда вы инициализируете свое диалоговое окно, сделайте что-то вроде этого:

var dialog = $( "#dialog-form" ).dialog({....});

Как только вы готовы закрыть диалоговое окно, вместо того, чтобы использовать $(this), попробуйте:

$(dialog).dialog("close");

Мне приходилось делать это в прошлом в тех решениях, которые я написал, где я испытывал те же проблемы

Ответ 4

в подфункции "ошибка", а не "успех":

$("#diaolog-form-id").dialog("close");

Ответ 5

Я использовал решение Энтони Шоу. Он отлично работал у меня, и я использую ASP.net AJAX, поэтому похоже, что проблема не имеет ничего общего с PHP.

Вот несколько простых JavaScript, выполняющих задание:

var DialogOps = function () {        
    var _dialog;
    this.showDialog = function () {
        _dialog = $('#dialog').dialog({
          // dialog options here
        });
    }
    this.closeDialog = function () {
        $(_dialog).dialog('close');
    }
}
var dialogOps = new DialogOps();

Вызовите dialogOps.showDialog(), чтобы открыть диалоговое окно и dialogOps.closeDialog(), чтобы закрыть его.