Question

首先，我不确定这里是正确的小部件，弹出窗口还是对话框。我现在要弹出。我有一个表单，提交时我想在弹出窗口中显示结果。验证和JSON的东西在这里：

$(function(){
    $.fn.serializeObject = function() {
        //serializeObject function stuff
    };

    $(document).on('click', function() {
        $('#myForm').validate({
            errorPlacement: function (error, element) {
                if (element.is('select')) {
                    error.insertAfter(element.parents('div.ui-select'));
                } else {
                    error.insertAfter(element.parents('div.ui-input-text'));  // default placement
                    }
                },
                    errorElement: 'em',
                    submitHandler: function(form){
                    var wrapper = {};
                    var location = {};
                    wrapper.location = $("#newLocation").serializeObject();
                    $.ajax({
                        type: $(form).attr('method'),
                        url: 'server' + 'service' + '/' + 'servicecall',
                        dataType: 'json',
                        async: false,
                        data: JSON.stringify(wrapper),
                        clearform: true,
//****Here is where the fun starts**
                        success: function(msg) {
                                var ID = msg.location.id;
                                //other element ID's...
                                //pop up vars
                                var $popUp = $("<div/>").popup({
                                    dismissable: true,
                                    theme: "d",
                                    overlayTheme: "a",
                                    transition: "pop"
                                }).on("popupafterclose", function () {
                                    $(this).remove;
                                });
                                if(msg.success){
                                    $('#newLocation').slideUp('fast');
                                    $popUp.popup('open').append(ID);
                                 }
                            },
                            error: function(msg) {
                                $popUp.popup('open').append('Error');
                            }
                        });
                        return false;
                    },
                    rules: {
                        //rules
                    },
                    messages: {
                       //messages
                    }
                });
            });

我需要动态创建弹出窗口并附加一些返回的数据。我可以将返回的数据附加到成功显示的隐藏div /表中，但是想要使用动态创建的弹出窗口（或者如果最好的话，则对话框）。我只是无法创建弹出窗口。有什么想法吗？

Answer 1

您必须在ajax部分之外创建弹出窗口，以便所有细分都可以使用它（成功，错误等）

popup = '<div data-role="popup" id="popup" data-theme="d" data-overlay-theme="a" data-dismissable="true" data-transition="pop"></div>';

$.mobile.activePage.append( popup ).trigger( "pagecreate" );

$( document ).on( "popupafterclose", ".ui-popup", function() {
    $( this ).remove();
});

然后你可以使用它

success: function(msg) {
     var ID = msg.location.id;
     //other element ID's...
     if(msg.success){
        $("#popup").popup('open').append(ID);
     }
},
error: function(msg) {
      $("#popup").popup('open').append('Error');
}

我相信这样的事情会起作用。

更新1 我从文件中取出了上述内容。你的也可以工作，但是你没有把它附加在DOM中。是的，您创建了一个HTML元素（<div/>），但是您没有将它附加到DOM。如上所述将它附加到活动页面可能会修复你的问题。

更新2 我尝试修复其他一些错误，例如您在error:中使用弹出窗口的错误，但只在success:

中创建弹出窗口

如何在jQuery Mobile中弹出显示返回的JSON

1 个答案: